/* KIN KUN Academy — Build 008.6.168
   Locked responsive public shell: Desktop 1440 / iPad 768 / Mobile 375.
   Presentation only. Auth, trial, entrance, payment and app logic remain unchanged. */
:root{
  --kka-green:#006c4f;
  --kka-green-2:#0b8666;
  --kka-green-soft:#eef9f5;
  --kka-ink:#11231f;
  --kka-muted:#5d6f69;
  --kka-line:#dce8e3;
  --kka-yellow:#ffd754;
  --kka-white:#fff;
  --kka-shadow:0 8px 24px rgba(14,55,45,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.kka-guest{margin:0;background:#fff;color:var(--kka-ink);overflow-x:hidden}
body.kka-guest>.shell,body.kka-guest .shell{max-width:none!important;width:100%!important;margin:0!important;padding:0!important;background:#fff!important}
.kka157-header,.kka157-landing{font-family:system-ui,-apple-system,"Segoe UI","Noto Sans Thai",Tahoma,sans-serif}

/* ---------- header ---------- */
.kka157-header{
  width:min(100%,1440px);height:72px;margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  border-bottom:1px solid #edf2f0;background:#fff;position:relative;z-index:120;
}
.kka157-brand{grid-column:1;border:0;background:none;padding:0;display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--kka-green);min-width:166px;text-align:left}
.kka157-brand img{width:48px;height:48px;object-fit:contain;display:block;flex:0 0 auto}
.kka157-brand span{display:flex;flex-direction:column;line-height:1}
.kka157-brand strong{font-size:19px;line-height:1;font-weight:900;letter-spacing:.45px;white-space:nowrap}
.kka157-brand small{font-size:11px;line-height:1;margin-top:4px;font-weight:800;white-space:nowrap}
.kka157-nav{grid-column:2;display:flex;align-items:center;justify-content:center;gap:4px;min-width:0}
.kka157-nav>button{border:0;background:transparent;padding:10px 10px;font-size:13px;font-weight:750;color:#25342f;border-radius:9px;cursor:pointer;white-space:nowrap;position:relative}
.kka157-nav>button:hover{background:#f1f8f5}
.kka157-nav>button.active{color:var(--kka-green)}
.kka157-nav>button.active::after{content:"";position:absolute;left:10px;right:10px;bottom:1px;height:2px;border-radius:2px;background:var(--kka-green)}
.kka157-nav .mobile-auth-menu-item{display:none}
.kka157-actions{grid-column:3}
.kka157-actions,.kka157-actions .guest-actions,.kka157-actions .member-header-actions{display:flex;align-items:center;gap:9px}
.kka157-btn{min-height:38px;border-radius:9px;padding:0 16px;font-weight:850;font-size:13px;cursor:pointer;white-space:nowrap}
.kka157-btn.outline{background:#fff;color:var(--kka-green);border:1px solid #70a99a}
.kka157-btn.solid{background:var(--kka-green);color:#fff;border:1px solid var(--kka-green)}
.kka157-menu-toggle{display:none!important}

/* ---------- landing canvas ---------- */
.kka157-landing{width:min(100%,1440px);margin:0 auto!important;padding:12px 20px 24px!important;background:#fff!important;overflow:visible!important}

/* ---------- hero ---------- */
.kka157-hero{
  height:282px;display:grid;grid-template-columns:49% 51%;align-items:stretch;overflow:hidden;
  border:1px solid #e4ece9;border-radius:18px;background:linear-gradient(110deg,#fff 0%,#fbfefd 50%,#eaf6ff 100%);
}
.kka157-hero-copy{padding:26px 14px 22px 34px;display:flex;flex-direction:column;justify-content:center;min-width:0;position:relative;z-index:2}
.kka157-hero h1{margin:0;color:#111d19;font-size:35px;line-height:1.22;letter-spacing:-.35px;font-weight:900;white-space:nowrap}
.kka157-hero h1 strong{color:var(--kka-green);font-weight:900}
.kka157-hero-copy>p{margin:11px 0 14px;font-size:15px;line-height:1.55;color:#2a3a35;font-weight:650}
.kka157-proof-points{display:grid;grid-template-columns:repeat(4,max-content);gap:16px;align-items:start}
.kka157-proof-points span{font-size:10.5px;line-height:1.35;font-weight:850;color:#244138;white-space:nowrap}
.kka157-proof-points small{font-size:9px;font-weight:650;color:#687770;white-space:nowrap}
.kka157-hero-art{min-width:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;background:#f3faff}
.kka157-hero-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center bottom}
.kka157-anchor{height:1px;margin-top:-1px}

/* ---------- quick trial ---------- */
.kka157-trial{
  margin-top:-8px;position:relative;z-index:4;display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;align-items:center;
  padding:15px 20px;border-radius:16px;background:linear-gradient(100deg,#effaf6 0%,#f7fcfa 52%,#eaf8f4 100%);border:1px solid #cbe5dc;box-shadow:var(--kka-shadow)
}
.kka157-trial-intro{display:flex;align-items:center;gap:12px;min-width:0}
.kka157-book{font-size:30px;line-height:1}
.kka157-trial-intro h2{margin:0 0 2px;font-size:20px;line-height:1.2;color:#12382f;white-space:nowrap}
.kka157-trial-intro p{margin:0;font-size:11px;color:#5f6f69;white-space:nowrap}
.kka157-trial-controls{display:grid;grid-template-columns:minmax(210px,1fr) minmax(210px,1fr) minmax(300px,1.15fr);column-gap:15px;row-gap:4px;align-items:end;min-width:0}
.kka157-trial-controls label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:12px;font-weight:850;color:#344940}
.kka157-trial-controls select{width:100%;min-width:0;height:44px;border:1px solid #b9d3ca;border-radius:9px;background:#fff;padding:0 13px;color:#152520;font-size:13px;font-weight:750;outline:none;text-overflow:ellipsis}
.kka157-trial-controls select:focus{border-color:var(--kka-green);box-shadow:0 0 0 3px rgba(0,108,79,.10)}
.kka157-trial-controls select:disabled{background:#edf0ef;color:#a0a8a5;border-color:#d8dfdc;cursor:not-allowed;opacity:.55}
.kka157-trial-button{height:44px;border:0;border-radius:9px;background:linear-gradient(90deg,#047457,#108e6e);color:#fff;font-size:14px;font-weight:900;cursor:pointer;white-space:nowrap;box-shadow:0 6px 14px rgba(0,108,79,.15)}
.kka157-trial-button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;filter:grayscale(.2)}
.kka157-cascade-helper{grid-column:1/3;margin:1px 0 0;color:#7b8783;font-size:9.5px;white-space:nowrap}
.kka157-trial-status{grid-column:3;margin:1px 0 0;color:#596863;font-size:9.5px;min-height:13px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- sections / entrance ---------- */
.kka157-section{padding-top:20px}
.kka157-section-title h2,.kka157-info-block h2{margin:0 0 11px;color:#172722;font-size:20px;line-height:1.2}
.kka157-entrance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kka157-exam-card{height:188px;position:relative;overflow:hidden;border:1px solid #e1e8e5;border-radius:14px;background:#fff;box-shadow:0 4px 13px rgba(14,52,43,.045)}
.kka157-exam-card.red{background:linear-gradient(135deg,#fff1ee,#fff)}
.kka157-exam-card.blue{background:linear-gradient(135deg,#edf5ff,#fff)}
.kka157-exam-card.purple{background:linear-gradient(135deg,#f4efff,#fff)}
.kka157-exam-copy{position:relative;z-index:2;width:49%;height:100%;padding:14px 0 13px 15px;display:flex;flex-direction:column;align-items:flex-start;overflow:visible}
.kka157-exam-copy small{font-size:10.5px;font-weight:850;color:#56655f;white-space:nowrap}
.kka157-exam-copy strong{margin:4px 0 6px;font-size:30px;line-height:1;font-weight:900;white-space:nowrap}
.kka157-exam-card.red strong{color:#d72929}.kka157-exam-card.blue strong{color:#174eb8}.kka157-exam-card.purple strong{color:#613abb}
.kka157-exam-copy p{margin:0 0 auto;font-size:10px;line-height:1.45;color:#3e4e48;white-space:nowrap}
.kka157-exam-copy button{width:max-content!important;max-width:100%;flex:0 0 auto;align-self:flex-start;border:1px solid currentColor;border-radius:7px;background:#fff;padding:6px 8px;font-size:9.5px;font-weight:850;cursor:pointer;white-space:nowrap}
.kka157-exam-card.red button{color:#d72929}.kka157-exam-card.blue button{color:#174eb8}.kka157-exam-card.purple button{color:#613abb}
.kka157-exam-card>img{position:absolute;right:0;top:0;width:53%;height:100%;display:block;object-fit:cover;object-position:right center;opacity:.76;filter:saturate(.68) brightness(1.12)}
.kka157-exam-card.university{background:linear-gradient(135deg,#faf9f5,#fff)}
.kka157-exam-card.university .kka157-exam-copy{width:54%;z-index:2}
.kka157-exam-card.university .kka157-exam-copy strong{font-size:21px;line-height:1.15;color:#1e2925;white-space:nowrap}
.kka157-coming{display:inline-flex;background:#fff1b9;border:1px solid #5f884e;color:#3c6030;border-radius:7px;padding:5px 9px;font-size:9.5px;font-weight:900;white-space:nowrap}
.kka157-grad-icon{position:absolute;right:5px;bottom:0;width:45%;height:100%;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.kka157-grad-icon img{max-width:100%;max-height:94%;display:block;object-fit:contain;object-position:center bottom}
.kka157-picker{margin-top:14px}

/* ---------- info ---------- */
.kka157-info-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:16px;padding-top:22px}
.kka157-info-block{min-width:0}
.kka157-info-block h2{font-size:18px;margin-bottom:9px;white-space:nowrap}
.kka157-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kka157-steps article{min-height:80px;border:1px solid #e2e9e6;border-radius:12px;background:#fff;padding:11px 9px;display:flex;gap:9px;align-items:flex-start}
.kka157-steps i{font-style:normal;flex:0 0 28px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--kka-green);color:#fff;font-size:13px;font-weight:900}
.kka157-steps b{font-size:10.5px;white-space:nowrap}
.kka157-steps p{margin:3px 0 0;color:#65746f;font-size:8.8px;line-height:1.45}
.kka157-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kka157-benefits article{min-height:80px;border:1px solid #e3eae7;border-radius:12px;background:#fff;padding:9px 6px;text-align:center}
.kka157-benefits span{font-size:21px}.kka157-benefits b{display:block;margin-top:4px;font-size:10px;white-space:nowrap}.kka157-benefits small{display:block;margin-top:2px;color:#68756f;font-size:8.2px;white-space:nowrap}

/* ---------- full trial / footer ---------- */
.kka157-trial7{margin-top:21px;display:grid;grid-template-columns:minmax(0,1fr) auto 104px;align-items:center;gap:15px;padding:14px 20px;border:1px solid #dcebe5;border-radius:14px;background:linear-gradient(90deg,#effaf5,#f5fbf9)}
.kka157-trial7-copy{display:flex;align-items:center;gap:15px}.kka157-trophy{font-size:44px}.kka157-trial7 h2{margin:0;font-size:18px;white-space:nowrap}.kka157-trial7 p{margin:3px 0 0;color:#56665f;font-size:10.5px;white-space:nowrap}.kka157-trial7-btn{height:42px;padding:0 28px;border:2px solid #0b6a50;border-radius:8px;background:var(--kka-yellow);color:#15392f;font-size:12.5px;font-weight:900;cursor:pointer;white-space:nowrap}.kka157-treasure{font-size:46px;text-align:center}
.kka157-footer{margin-top:12px;min-height:58px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:9px 17px;border-radius:12px;background:#00583f;color:#fff}
.kka157-footer-brand{display:flex;align-items:center;gap:8px}.kka157-footer-brand img{width:38px;height:38px;object-fit:contain}.kka157-footer-brand div{display:flex;flex-direction:column;line-height:1}.kka157-footer-brand b{font-size:12px}.kka157-footer-brand small{font-size:8.5px;margin-top:2px}.kka157-footer nav{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}.kka157-footer nav button{border:0;background:transparent;color:#fff;padding:7px;font-size:10px;cursor:pointer}.kka157-footer>small{font-size:8px;color:#c9ded7;white-space:nowrap}.kka157-mobile-sticky{display:none}
.kka153-auth-modal{z-index:300!important}
body.kka-guest .commercial-footer{display:none!important}
body.kka-guest #kka-staging-132{display:none!important}

/* ============================================================
   iPad / tablet locked state — 601..960 px
   ============================================================ */
@media (min-width:601px) and (max-width:960px){
  .kka157-header{height:60px;padding:0 14px;grid-template-columns:auto 1fr auto;gap:10px}
  .kka157-brand{grid-column:1;min-width:132px;gap:7px}.kka157-brand img{width:38px;height:38px}.kka157-brand strong{font-size:16px}.kka157-brand small{font-size:9px}
  .kka157-actions{display:none}.kka157-menu-toggle{display:flex!important;grid-column:3;grid-row:1;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:38px;height:38px;border:0;background:#fff;border-radius:9px;cursor:pointer}.kka157-menu-toggle span{width:21px;height:2px;border-radius:2px;background:#17352c}
  .kka157-nav{position:absolute;top:58px;right:12px;width:min(300px,calc(100vw - 24px));display:none;flex-direction:column;align-items:stretch;background:#fff;border:1px solid #dce8e3;border-radius:13px;box-shadow:0 18px 44px rgba(13,49,40,.18);padding:9px;z-index:160}.kka157-nav.open{display:flex}.kka157-nav>button{text-align:left;padding:11px 12px}.kka157-nav>button.active::after{display:none}.kka157-nav .mobile-auth-menu-item{display:flex;gap:8px;align-items:center}.kka157-nav .mobile-register-menu-item{background:#eef8f4;color:var(--kka-green)}
  .kka157-landing{padding:9px 10px 16px!important}
  .kka157-hero{height:228px;grid-template-columns:54% 46%;border-radius:14px}.kka157-hero-copy{padding:17px 8px 14px 16px}.kka157-hero h1{font-size:22px;line-height:1.23;white-space:normal}.kka157-hero-copy>p{font-size:11px;line-height:1.45;margin:7px 0 9px}.kka157-proof-points{grid-template-columns:repeat(2,max-content);gap:4px 11px}.kka157-proof-points span{font-size:8.8px}.kka157-proof-points small{font-size:7.5px}.kka157-hero-art{background:#f3faff}.kka157-hero-art img{object-fit:contain;object-position:center bottom}
  .kka157-trial{margin-top:-4px;grid-template-columns:1fr;padding:12px 13px;gap:8px;border-radius:13px}.kka157-trial-intro{gap:9px}.kka157-book{font-size:25px}.kka157-trial-intro h2{font-size:16px}.kka157-trial-intro p{font-size:9.5px}.kka157-trial-controls{grid-template-columns:1fr 1fr;gap:7px 9px}.kka157-trial-controls label{font-size:10px;gap:4px}.kka157-trial-controls select{height:39px;font-size:11px;padding:0 9px}.kka157-trial-button{grid-column:1/3;height:39px;font-size:11.5px}.kka157-cascade-helper{grid-column:1/2;font-size:8px}.kka157-trial-status{grid-column:1/3;font-size:8px}
  .kka157-section{padding-top:16px}.kka157-section-title h2{font-size:17px;margin-bottom:9px}.kka157-entrance-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.kka157-exam-card{height:150px;border-radius:10px}.kka157-exam-copy{width:51%;padding:8px 0 8px 8px}.kka157-exam-copy small{font-size:7px}.kka157-exam-copy strong{font-size:20px;margin:3px 0 4px}.kka157-exam-copy p{display:none}.kka157-exam-copy button{font-size:7px;padding:4px 5px}.kka157-exam-card>img{width:52%;opacity:.8;filter:saturate(.72) brightness(1.1)}.kka157-exam-card.university .kka157-exam-copy{width:55%}.kka157-exam-card.university .kka157-exam-copy strong{font-size:12.5px;white-space:normal;line-height:1.12}.kka157-coming{font-size:7px;padding:3px 5px}.kka157-grad-icon{width:47%;right:1px}.kka157-grad-icon img{max-height:88%}
  .kka157-info-grid{grid-template-columns:1fr;gap:12px;padding-top:16px}.kka157-info-block h2{font-size:15px;margin-bottom:8px}.kka157-steps article{min-height:66px;padding:8px 7px;gap:7px}.kka157-steps i{flex-basis:24px;width:24px;height:24px;font-size:11px}.kka157-steps b{font-size:8.5px}.kka157-steps p{font-size:7px}.kka157-benefits article{min-height:66px;padding:7px 4px}.kka157-benefits span{font-size:18px}.kka157-benefits b{font-size:8.4px}.kka157-benefits small{font-size:6.8px}
  .kka157-trial7{margin-top:15px;grid-template-columns:1fr auto 66px;gap:9px;padding:10px 12px}.kka157-trophy{font-size:34px}.kka157-trial7 h2{font-size:14px}.kka157-trial7 p{font-size:8px}.kka157-trial7-btn{height:35px;padding:0 15px;font-size:9.5px}.kka157-treasure{font-size:33px}
  .kka157-footer{margin-top:9px;min-height:50px;grid-template-columns:auto 1fr;padding:8px 10px}.kka157-footer-brand img{width:32px;height:32px}.kka157-footer>small{display:none}.kka157-footer nav{justify-content:flex-end}.kka157-footer nav button{font-size:8px;padding:5px}
}

/* ============================================================
   Mobile locked state — <=600 px
   ============================================================ */
@media (max-width:600px){
  body.kka-guest{padding-bottom:76px}
  .kka157-header{height:58px;padding:0 12px;grid-template-columns:auto 1fr auto;gap:8px}.kka157-brand{grid-column:1;min-width:0;gap:6px}.kka157-brand img{width:36px;height:36px}.kka157-brand strong{font-size:14px}.kka157-brand small{font-size:8.5px}.kka157-actions{display:none}
  .kka157-menu-toggle{display:flex!important;grid-column:3;grid-row:1;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:36px;height:36px;border:0;background:#fff;border-radius:9px}.kka157-menu-toggle span{width:20px;height:2px;background:#17352c;border-radius:2px}
  .kka157-nav{position:absolute;top:56px;right:10px;width:calc(100vw - 20px);display:none;flex-direction:column;align-items:stretch;background:#fff;border:1px solid #dce8e3;border-radius:13px;box-shadow:0 18px 44px rgba(13,49,40,.18);padding:8px;z-index:170}.kka157-nav.open{display:flex}.kka157-nav>button{text-align:left;padding:10px 11px}.kka157-nav>button.active::after{display:none}.kka157-nav .mobile-auth-menu-item{display:flex;align-items:center;gap:8px}.kka157-nav .mobile-register-menu-item{background:#eef8f4;color:var(--kka-green)}
  .kka157-landing{padding:8px 8px 10px!important}
  .kka157-hero{height:auto;display:block;border-radius:12px}.kka157-hero-copy{padding:15px 13px 6px}.kka157-hero h1{font-size:21px;line-height:1.28;white-space:normal}.kka157-hero-copy>p{font-size:10.5px;line-height:1.45;margin:7px 0 8px}.kka157-proof-points{grid-template-columns:1fr 1fr;gap:4px 8px}.kka157-proof-points span{font-size:8.7px;white-space:normal}.kka157-proof-points small{font-size:7.3px;white-space:normal}.kka157-hero-art{height:136px;min-height:136px;background:#f3faff}.kka157-hero-art img{width:100%;height:100%;object-fit:contain;object-position:center bottom}
  .kka157-trial{margin-top:-1px;grid-template-columns:1fr;gap:8px;padding:12px;border-radius:12px}.kka157-trial-intro{gap:8px}.kka157-book{font-size:24px}.kka157-trial-intro h2{font-size:15px}.kka157-trial-intro p{font-size:9.5px}.kka157-trial-controls{grid-template-columns:1fr;gap:7px}.kka157-trial-controls label,.kka157-trial-button,.kka157-cascade-helper,.kka157-trial-status{grid-column:1}.kka157-trial-controls label{font-size:10px}.kka157-trial-controls select,.kka157-trial-button{height:42px;font-size:11.5px}.kka157-cascade-helper{font-size:8px;text-align:left;white-space:normal}.kka157-trial-status{font-size:8px;text-align:center;white-space:normal}
  .kka157-section{padding-top:16px}.kka157-section-title h2{font-size:16px;margin-bottom:8px}.kka157-entrance-grid{display:grid;grid-template-columns:1fr;gap:7px}
  .kka157-exam-card,.kka157-exam-card.university{min-height:58px;height:auto;display:grid!important;grid-template-columns:44px 1fr!important;align-items:center;border-radius:10px;overflow:hidden}
  .kka157-exam-card>img{display:block;position:relative;grid-column:1;grid-row:1;width:44px;height:56px;object-fit:cover;object-position:center;border-radius:8px;opacity:1;filter:none;margin-left:4px}
  .kka157-exam-copy,.kka157-exam-card.university .kka157-exam-copy{grid-column:2;grid-row:1;width:auto;height:auto;padding:8px 8px 8px 7px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 6px;background:none!important;position:relative}
  .kka157-exam-copy small,.kka157-exam-copy p{display:none}.kka157-exam-copy strong,.kka157-exam-card.university .kka157-exam-copy strong{grid-column:1;margin:0;font-size:13px!important;line-height:1.15;white-space:nowrap}.kka157-exam-copy button{grid-column:2;grid-row:1;margin:0!important;font-size:8px;padding:5px 7px}.kka157-coming{grid-column:2;grid-row:1;font-size:8px;padding:4px 7px}.kka157-grad-icon{display:flex!important;position:relative;grid-column:1;grid-row:1;right:auto;bottom:auto;width:44px;height:56px;align-items:center;justify-content:center;margin-left:4px}.kka157-grad-icon img{max-width:44px;max-height:54px;object-fit:contain}
  .kka157-picker{margin-top:9px}
  .kka157-info-grid{grid-template-columns:1fr;padding-top:16px;gap:10px}.kka157-info-block h2{font-size:15px;margin-bottom:7px}.kka157-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.kka157-steps article{min-height:78px;padding:7px 4px;display:block;text-align:center}.kka157-steps i{width:24px;height:24px;margin:0 auto 4px;font-size:11px}.kka157-steps b{font-size:8.3px;white-space:normal}.kka157-steps p{font-size:6.8px;line-height:1.35}.kka157-info-block:nth-child(2),.kka157-benefits{display:none}
  .kka157-trial7{margin-top:13px;grid-template-columns:1fr;padding:11px;gap:7px;text-align:center}.kka157-trial7-copy{justify-content:center;gap:8px}.kka157-trophy{font-size:31px}.kka157-trial7 h2{font-size:14px}.kka157-trial7 p{font-size:8.3px;white-space:normal}.kka157-trial7-btn{width:100%;height:37px;font-size:10.5px}.kka157-treasure{display:none}
  .kka157-footer{margin-top:8px;min-height:45px;grid-template-columns:1fr auto;padding:7px 9px;border-radius:10px}.kka157-footer-brand img{width:30px;height:30px}.kka157-footer-brand b{font-size:9px}.kka157-footer-brand small{font-size:7px}.kka157-footer nav{display:none}.kka157-footer>small{display:none}
  .kka157-mobile-sticky{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;position:fixed;left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));z-index:190;border:0;border-radius:13px;background:#006746;color:#fff;padding:10px 11px 9px 14px;text-align:left;box-shadow:0 10px 30px rgba(0,60,42,.27);cursor:pointer}.kka157-mobile-sticky span{font-size:12.5px;font-weight:900}.kka157-mobile-sticky small{font-size:8.5px;opacity:.86}.kka157-mobile-sticky i{grid-column:2;grid-row:1/3;width:34px;height:34px;border-radius:50%;background:#fff;color:#0c5e47;display:grid;place-items:center;font-style:normal;font-size:24px}
  .kka153-auth-dialog{max-height:calc(100dvh - 20px)!important}
}

/* Build 159 brand reset: neutralize legacy !important brand sizing from older shells. */
.kka157-header .kka157-brand{
  width:118px!important;min-width:118px!important;max-width:118px!important;
  height:58px!important;overflow:visible!important;justify-content:flex-start!important;
}
.kka157-header .kka157-brand img{
  width:94px!important;height:58px!important;max-width:94px!important;
  object-fit:contain!important;object-position:left center!important;
}
.kka157-header .kka157-brand>span{display:none!important}
.kka157-footer .kka157-footer-brand img{object-fit:contain!important}

@media (min-width:601px) and (max-width:960px){
  .kka157-header .kka157-brand{width:86px!important;min-width:86px!important;max-width:86px!important;height:56px!important}
  .kka157-header .kka157-brand img{width:72px!important;height:50px!important;max-width:72px!important}
}
@media (max-width:600px){
  .kka157-header .kka157-brand{width:74px!important;min-width:74px!important;max-width:74px!important;height:52px!important}
  .kka157-header .kka157-brand img{width:62px!important;height:46px!important;max-width:62px!important}
  .kka157-exam-card>img{object-position:right center!important}
}


/* ============================================================
   Build 008.6.168 — screen isolation + responsive recovery
   Never allow the locked Public shell to coexist with member/app
   screens. This fixes the live mobile/iPad "public + dashboard"
   merge caused by display:block!important on the landing shell.
   ============================================================ */
.screen.hidden,
.kka157-landing.hidden{
  display:none!important;
}

/* On signed-in tablet/mobile the member app already owns its own
   app bar and drawer. Hide the Public header so two navigations
   never stack on top of one another. Desktop keeps the member
   header actions (Upgrade / account / logout). */
@media (max-width:1024px){
  body.kka-authenticated #publicHeader{
    display:none!important;
  }
}

/* Public header must remain exactly the locked logo-left/menu-right
   composition when signed out. */
@media (min-width:601px) and (max-width:960px){
  body.kka-guest #publicHeader{
    display:grid!important;
    grid-template-columns:auto 1fr auto!important;
  }
  body.kka-guest #publicHeader .kka157-brand{
    grid-column:1!important;
    justify-self:start!important;
  }
  body.kka-guest #publicHeader .kka157-menu-toggle{
    grid-column:3!important;
    justify-self:end!important;
  }
}
@media (max-width:600px){
  body.kka-guest #publicHeader{
    display:grid!important;
    grid-template-columns:auto 1fr auto!important;
  }
  body.kka-guest #publicHeader .kka157-brand{
    grid-column:1!important;
    justify-self:start!important;
  }
  body.kka-guest #publicHeader .kka157-menu-toggle{
    grid-column:3!important;
    justify-self:end!important;
  }
  body.kka-guest #landingScreen{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

/* Build 008.6.168 — locked visual balance recovery */
@media(min-width:961px){.kka157-landing{width:min(calc(100% - 96px),1312px)!important;padding:12px 0 24px!important}.kka157-hero{height:292px!important;grid-template-columns:48% 52%!important}.kka157-hero-art{background:#eef8ff!important}.kka157-hero-art img{object-fit:contain!important;object-position:center bottom!important;transform:scale(.98);transform-origin:center bottom}.kka157-trial,.kka157-entrance-grid,.kka157-info-grid,.kka157-trial7,.kka157-footer{width:100%!important}}
.kka157-exam-card.red{background:linear-gradient(135deg,#ffe8e2 0%,#fff8f5 54%,#fff 100%)!important}.kka157-exam-card.blue{background:linear-gradient(135deg,#e1efff 0%,#f5f9ff 54%,#fff 100%)!important}.kka157-exam-card.purple{background:linear-gradient(135deg,#eee4ff 0%,#faf7ff 54%,#fff 100%)!important}.kka157-exam-card.university{background:linear-gradient(135deg,#fff6d9 0%,#fffdf3 58%,#fff 100%)!important}.kka157-exam-card>img{opacity:1!important;filter:none!important;object-position:right center!important}.kka157-grad-icon img{filter:saturate(1.08) contrast(1.02)!important;opacity:1!important}.kka157-footer-meta{display:flex!important;flex-direction:column!important;gap:2px!important;align-items:flex-end!important}.kka157-footer-meta b{color:#d9f4e9;font-weight:850}.kka153-auth-modal .kka153-auth-tabs{display:none!important}@media(max-width:960px){.kka157-footer-meta{display:none!important}}

/* ============================================================
   Build 008.6.168 — PUBLIC HERO/TRIAL MASTER ALIGNMENT
   Requested recovery: public content follows the same left/right
   rails as the header logo and Sign up action; quick trial overlaps
   the hero like the approved public mockup; 7-day CTA icons balance.
   ============================================================ */
@media (min-width:961px){
  .kka157-header{
    width:100%!important;
    max-width:none!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .kka157-landing{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:12px 20px 24px!important;
  }
  .kka157-hero{
    width:100%!important;
    height:286px!important;
    grid-template-columns:48.5% 51.5%!important;
    border-radius:16px!important;
  }
  .kka157-hero-copy{padding:24px 24px 52px 34px!important}
  .kka157-hero h1{font-size:clamp(30px,2.15vw,36px)!important;line-height:1.2!important}
  .kka157-hero-copy>p{font-size:14px!important;margin:10px 0 12px!important}
  .kka157-hero-art img{
    object-fit:contain!important;
    object-position:center bottom!important;
    transform:none!important;
  }
  .kka157-trial{
    width:calc(100% - 4px)!important;
    margin:-44px 2px 0!important;
    grid-template-columns:250px minmax(0,1fr)!important;
    gap:18px!important;
    padding:12px 18px!important;
    border-radius:16px!important;
    box-shadow:0 10px 26px rgba(14,55,45,.10)!important;
  }
  .kka157-trial-intro h2{font-size:18px!important}
  .kka157-trial-controls{grid-template-columns:minmax(190px,1fr) minmax(190px,1fr) minmax(280px,1.12fr)!important;column-gap:15px!important}
  .kka157-trial-controls select,.kka157-trial-button{height:42px!important}
  .kka157-section{padding-top:18px!important}
  .kka157-entrance-grid,.kka157-info-grid,.kka157-trial7,.kka157-footer{width:100%!important}
  .kka157-trial7{
    grid-template-columns:minmax(0,1fr) auto 64px!important;
    padding:14px 20px!important;
    gap:18px!important;
  }
  .kka157-trophy,.kka157-treasure{
    width:52px!important;
    height:52px!important;
    display:grid!important;
    place-items:center!important;
    font-size:40px!important;
    line-height:1!important;
  }
  .kka157-trial7-copy{gap:14px!important}
}

/* Keep the two 7-day trial icons visually equivalent on all sizes. */
.kka157-trophy,.kka157-treasure{line-height:1}
@media (min-width:601px) and (max-width:960px){
  .kka157-trophy,.kka157-treasure{width:40px!important;height:40px!important;display:grid!important;place-items:center!important;font-size:31px!important}
}
@media (max-width:600px){
  .kka157-trophy{width:36px!important;height:36px!important;display:grid!important;place-items:center!important;font-size:28px!important}
}


/* ============================================================
   Build 008.6.168 — PUBLIC REFERENCE MATCH LOCK
   Visual target: user-approved public screenshot (923px reference).
   Logo asset is intentionally NOT changed. This layer wins over the
   legacy 601–960 tablet composition so 923px renders the approved
   desktop shell instead of a hamburger/tablet layout.
   ============================================================ */
.kka157-header,.kka157-landing,
.kka157-header button,.kka157-landing button,.kka157-landing select{
  font-family:"Noto Sans Thai","Noto Sans Thai UI",Tahoma,"Segoe UI",sans-serif!important;
}

@media (min-width:820px){
  body.kka-guest{background:#fff!important;color:#0d201b!important}
  body.kka-guest>.shell,body.kka-guest .shell{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}

  /* Header: full-width rail, compact like the approved reference. */
  body.kka-guest #publicHeader.kka157-header{
    display:grid!important;width:100%!important;max-width:none!important;height:58px!important;
    margin:0!important;padding:0 18px!important;grid-template-columns:108px minmax(0,1fr) auto!important;
    gap:16px!important;border-bottom:1px solid #e7efec!important;background:#fff!important;
    align-items:center!important;
  }
  body.kka-guest #publicHeader .kka157-brand{grid-column:1!important;justify-self:start!important}
  body.kka-guest #publicHeader .kka157-menu-toggle{display:none!important}
  body.kka-guest #publicHeader .kka157-nav{
    grid-column:2!important;position:static!important;display:flex!important;flex-direction:row!important;
    width:auto!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;
    justify-content:center!important;align-items:center!important;gap:2px!important;
  }
  body.kka-guest #publicHeader .kka157-nav>button{
    display:block!important;padding:10px 9px!important;border-radius:0!important;background:transparent!important;
    color:#17251f!important;font-size:12px!important;line-height:1.2!important;font-weight:700!important;letter-spacing:0!important;
  }
  body.kka-guest #publicHeader .kka157-nav>button.active{color:#086d55!important}
  body.kka-guest #publicHeader .kka157-nav>button.active::after{left:8px!important;right:8px!important;bottom:1px!important;height:2px!important;background:#0a7a5f!important}
  body.kka-guest #publicHeader .kka157-nav .mobile-auth-menu-item{display:none!important}
  body.kka-guest #publicHeader .kka157-actions{display:flex!important;grid-column:3!important;justify-self:end!important}
  body.kka-guest #publicHeader .guest-actions{display:flex!important;gap:8px!important}
  body.kka-guest #publicHeader .kka157-btn{height:32px!important;min-height:32px!important;padding:0 14px!important;border-radius:9px!important;font-size:11.5px!important;font-weight:800!important}

  /* Public canvas uses the same outside rail as header actions. Hero itself is full-bleed, as in reference. */
  body.kka-guest #landingScreen.kka157-landing{
    display:block!important;width:100%!important;max-width:none!important;margin:0!important;
    padding:0 14px 24px!important;background:#fff!important;overflow:visible!important;
  }
  body.kka-guest #publicHeroSection.kka157-hero{
    width:calc(100% + 28px)!important;height:236px!important;margin:0 -14px!important;
    display:grid!important;grid-template-columns:46% 54%!important;align-items:stretch!important;
    overflow:hidden!important;border:0!important;border-radius:0!important;box-shadow:none!important;
    background:linear-gradient(100deg,#ffffff 0%,#fcfefe 42%,#eef8ff 68%,#eef8ff 100%)!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    padding:24px 14px 42px 45px!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{
    margin:0!important;font-size:clamp(27px,3.0vw,33px)!important;line-height:1.26!important;letter-spacing:-.25px!important;
    font-weight:800!important;color:#111d19!important;white-space:normal!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1 strong{color:#08795c!important;font-weight:800!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{
    margin:11px 0 12px!important;font-size:13px!important;line-height:1.45!important;font-weight:500!important;color:#17251f!important;
    white-space:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points{
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:15px!important;margin:0!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points span{
    display:inline-flex!important;align-items:center!important;gap:5px!important;font-size:9.5px!important;line-height:1!important;
    color:#213f36!important;font-weight:650!important;white-space:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points i{
    width:13px!important;height:13px!important;border-radius:50%!important;background:#08795c!important;color:#fff!important;
    display:inline-grid!important;place-items:center!important;font-style:normal!important;font-size:8px!important;font-weight:900!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points small{display:none!important}
  body.kka-guest #publicHeroSection .kka157-hero-art{
    min-width:0!important;height:236px!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;
    overflow:hidden!important;background:transparent!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-art img{
    width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;object-position:right bottom!important;
    transform:none!important;filter:none!important;
  }

  /* Approved floating quick-trial card. */
  body.kka-guest #trialSection.kka157-trial{
    width:100%!important;height:98px!important;min-height:98px!important;margin:-43px 0 0!important;padding:8px 20px!important;
    position:relative!important;z-index:5!important;display:grid!important;grid-template-columns:174px minmax(0,1fr)!important;
    align-items:center!important;gap:16px!important;border:1px solid #d7ece4!important;border-radius:15px!important;
    background:linear-gradient(96deg,#effaf7 0%,#f7fcfa 52%,#eff9f6 100%)!important;
    box-shadow:0 7px 18px rgba(24,77,63,.07)!important;
  }
  body.kka-guest #trialSection .kka157-trial-intro{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}
  body.kka-guest #trialSection .kka157-book{font-size:29px!important;line-height:1!important}
  body.kka-guest #trialSection .kka157-trial-intro h2{
    margin:0 0 2px!important;font-size:16px!important;line-height:1.25!important;font-weight:800!important;color:#17392f!important;white-space:nowrap!important;
  }
  body.kka-guest #trialSection .kka157-trial-intro p{
    margin:0!important;font-size:9.5px!important;line-height:1.25!important;font-weight:500!important;color:#61736c!important;white-space:nowrap!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls{
    display:grid!important;grid-template-columns:120px 190px minmax(250px,1fr)!important;column-gap:15px!important;row-gap:3px!important;
    align-items:end!important;min-width:0!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls label{
    display:flex!important;flex-direction:column!important;gap:4px!important;min-width:0!important;font-size:9px!important;line-height:1.1!important;
    font-weight:600!important;color:#3a6659!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls select{
    width:100%!important;height:38px!important;padding:0 12px!important;border:1px solid #d5e2de!important;border-radius:9px!important;
    background:#fff!important;color:#17221e!important;font-size:11.5px!important;line-height:1!important;font-weight:700!important;box-shadow:0 2px 6px rgba(26,70,59,.04)!important;
  }
  body.kka-guest #trialSection .kka157-trial-button{
    grid-column:3!important;grid-row:1!important;align-self:end!important;width:100%!important;height:38px!important;margin:0!important;
    border:0!important;border-radius:999px!important;background:linear-gradient(90deg,#0b7b61,#07906e)!important;color:#fff!important;
    font-size:12.5px!important;font-weight:800!important;box-shadow:0 5px 12px rgba(0,108,79,.15)!important;
  }
  body.kka-guest #trialSection .kka157-trial-button span:first-child,
  body.kka-guest #trialSection .kka157-trial-button span:last-child{display:none!important}
  body.kka-guest #trialSection .kka157-trial-button span:nth-child(2)::after{content:"  →";font-size:18px!important;vertical-align:-1px!important}
  body.kka-guest #trialSection .kka157-cascade-helper{display:none!important}
  body.kka-guest #trialSection .kka157-trial-status{
    display:block!important;grid-column:3!important;grid-row:2!important;margin:0!important;min-height:9px!important;text-align:center!important;
    color:#17694f!important;font-size:8px!important;line-height:1!important;font-weight:650!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }

  /* Keep the rest of public content on the same 14px rails as the floating card. */
  body.kka-guest #entranceHubSection,
  body.kka-guest #howItWorksSection,
  body.kka-guest #plansSection,
  body.kka-guest .kka157-footer{width:100%!important;margin-left:0!important;margin-right:0!important}
}

/* Avoid a cramped pseudo-desktop nav on real iPad portrait. */
@media (min-width:601px) and (max-width:819px){
  body.kka-guest #publicHeroSection .kka157-proof-points i{font-style:normal}
}

/* Large desktop refinement: keep the reference proportions instead of stretching
   the hero artwork across ultra-wide monitors. Header and public content share
   the same centered rail, so logo / hero / sign-up remain visually aligned. */
@media (min-width:1101px){
  body.kka-guest #publicHeader.kka157-header,
  body.kka-guest #landingScreen.kka157-landing{
    width:min(100%,1280px)!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body.kka-guest #publicHeroSection.kka157-hero{
    height:clamp(276px,26.5vw,340px)!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-art{
    height:clamp(276px,26.5vw,340px)!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    padding-top:34px!important;
    padding-left:46px!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{
    font-size:clamp(31px,2.55vw,38px)!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{font-size:14px!important}
  body.kka-guest #publicHeroSection .kka157-proof-points span{font-size:10px!important}
  body.kka-guest #trialSection.kka157-trial{
    height:108px!important;
    min-height:108px!important;
    margin-top:-50px!important;
    grid-template-columns:210px minmax(0,1fr)!important;
    padding:10px 22px!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls{
    grid-template-columns:180px 220px minmax(360px,430px)!important;
    justify-content:space-between!important;
    column-gap:18px!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls select,
  body.kka-guest #trialSection .kka157-trial-button{height:42px!important}
  body.kka-guest #trialSection .kka157-trial-button{font-size:13px!important}
}

/* ============================================================
   Build 008.6.168 — PUBLIC HERO LOWER-LEFT SPACE CORRECTION
   Keep the approved 923px reference composition on wide desktop.
   The previous large-desktop rule expanded the hero up to 340px,
   creating excess blank space below the copy on the left. The
   artwork ratio remains balanced while the floating trial card
   returns to the same visual distance from the proof row as the
   approved reference.
   ============================================================ */
@media (min-width:1101px){
  body.kka-guest #publicHeroSection.kka157-hero,
  body.kka-guest #publicHeroSection .kka157-hero-art{
    height:296px!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    padding-top:30px!important;
    padding-bottom:38px!important;
  }
  body.kka-guest #trialSection.kka157-trial{
    margin-top:-50px!important;
  }
}

/* ============================================================
   Build 008.6.168 — COMPACT SHARP PUBLIC DESKTOP POLISH
   User lock:
   1) no dropdown chevrons in Public header;
   2) hero is shorter and denser without cutting either mascot;
   3) desktop typography is readable and kept on one line where intended.
   ============================================================ */

/* The two Public nav items are direct scroll actions, not dropdown menus. */
body.kka-guest #navChallengeBtn:not(.active)::after,
body.kka-guest #navLibraryBtn:not(.active)::after{
  content:none!important;
  display:none!important;
  margin:0!important;
}
body.kka-guest #navChallengeBtn.active::after,
body.kka-guest #navLibraryBtn.active::after{
  content:""!important;
  display:block!important;
  margin:0!important;
}

@media (min-width:1101px){
  /* Compact hero: remove unused lower-left space while keeping both mascots fully above the trial card. */
  body.kka-guest #publicHeroSection.kka157-hero,
  body.kka-guest #publicHeroSection .kka157-hero-art{
    height:262px!important;
  }
  body.kka-guest #publicHeroSection.kka157-hero{
    grid-template-columns:52% 48%!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    padding:28px 20px 48px 34px!important;
    justify-content:flex-start!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{
    font-size:clamp(32px,2.45vw,37px)!important;
    line-height:1.20!important;
    white-space:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{
    margin:10px 0 12px!important;
    font-size:14.5px!important;
    line-height:1.35!important;
    white-space:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points{
    gap:17px!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points span{
    font-size:10.7px!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-art{
    align-items:flex-start!important;
    justify-content:flex-end!important;
    overflow:hidden!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-art img{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:right top!important;
    padding:5px 0 31px 0!important;
    transform:none!important;
    opacity:1!important;
    filter:contrast(1.035) saturate(1.035)!important;
    image-rendering:auto!important;
  }

  body.kka-guest #trialSection.kka157-trial{
    height:94px!important;
    min-height:94px!important;
    margin-top:-31px!important;
    grid-template-columns:214px minmax(0,1fr)!important;
    padding:8px 20px!important;
  }
  body.kka-guest #trialSection .kka157-trial-intro h2{font-size:18px!important}
  body.kka-guest #trialSection .kka157-trial-intro p{font-size:10.5px!important}
  body.kka-guest #trialSection .kka157-trial-controls{
    grid-template-columns:180px 220px minmax(330px,1fr)!important;
    column-gap:18px!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls label{font-size:10px!important}
  body.kka-guest #trialSection .kka157-trial-controls select,
  body.kka-guest #trialSection .kka157-trial-button{height:40px!important}
  body.kka-guest #trialSection .kka157-trial-controls select{font-size:12px!important}
  body.kka-guest #trialSection .kka157-trial-button{font-size:13.5px!important}
  body.kka-guest #trialSection .kka157-trial-status{font-size:8.8px!important}

  /* Public content typography: increase the small text without forcing line wraps. */
  body.kka-guest .kka157-section-title h2{font-size:22px!important;margin-bottom:10px!important;white-space:nowrap!important}
  body.kka-guest .kka157-exam-card{height:194px!important}
  body.kka-guest .kka157-exam-copy small{font-size:11.5px!important}
  body.kka-guest .kka157-exam-copy strong{font-size:31px!important}
  body.kka-guest .kka157-exam-card.university .kka157-exam-copy strong{font-size:21px!important}
  body.kka-guest .kka157-exam-copy p{font-size:10.8px!important;line-height:1.40!important;white-space:nowrap!important}
  body.kka-guest .kka157-exam-copy button,
  body.kka-guest .kka157-coming{font-size:10.2px!important}

  body.kka-guest .kka157-info-grid{padding-top:20px!important;gap:18px!important}
  body.kka-guest .kka157-info-block h2{font-size:20px!important;margin-bottom:10px!important;white-space:nowrap!important}
  body.kka-guest .kka157-steps article{min-height:84px!important;padding:11px 10px!important}
  body.kka-guest .kka157-steps b{font-size:11.4px!important;white-space:nowrap!important}
  body.kka-guest .kka157-steps p{font-size:9.5px!important;line-height:1.35!important;white-space:nowrap!important}
  body.kka-guest .kka157-benefits article{min-height:84px!important;padding:10px 7px!important}
  body.kka-guest .kka157-benefits span{font-size:23px!important}
  body.kka-guest .kka157-benefits b{font-size:10.8px!important;white-space:nowrap!important}
  body.kka-guest .kka157-benefits small{font-size:9px!important;white-space:nowrap!important}

  body.kka-guest .kka157-trial7{margin-top:18px!important;padding:12px 18px!important}
  body.kka-guest .kka157-trial7 h2{font-size:19px!important;white-space:nowrap!important}
  body.kka-guest .kka157-trial7 p{font-size:11px!important;white-space:nowrap!important}
  body.kka-guest .kka157-trial7-btn{font-size:13px!important;white-space:nowrap!important}
  body.kka-guest .kka157-footer nav{flex-wrap:nowrap!important}
  body.kka-guest .kka157-footer nav button{font-size:10.5px!important;white-space:nowrap!important}
  body.kka-guest .kka157-footer>small{font-size:8.8px!important;white-space:nowrap!important}
}

/* ============================================================
   Build 008.6.168 — FRUIT MASCOT HERO + TRIAL PLACEHOLDER + STEP BALANCE
   User lock:
   - Hero follows the approved fruit mascot reference without excess lower-left whitespace.
   - Quick trial starts at placeholders and full Thai grade labels fit comfortably.
   - 3-step copy must remain inside each card and sit vertically balanced.
   ============================================================ */
@media (min-width:820px){
  body.kka-guest #publicHeroSection.kka157-hero{
    grid-template-columns:47.5% 52.5%!important;
    height:248px!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    padding:22px 18px 36px 42px!important;
    justify-content:center!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{
    font-size:clamp(27px,3vw,34px)!important;
    line-height:1.22!important;
    white-space:normal!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{
    margin:9px 0 11px!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-art{
    height:248px!important;
    background:#f6fbfd!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-art img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:right center!important;
    padding:0!important;
    filter:none!important;
  }
  body.kka-guest #trialSection.kka157-trial{
    margin-top:-28px!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls{
    grid-template-columns:minmax(205px,1fr) minmax(165px,.78fr) minmax(260px,1.3fr)!important;
    column-gap:14px!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls select{
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  body.kka-guest .kka157-steps article{
    min-height:86px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    align-items:center!important;
    gap:11px!important;
    padding:10px 12px!important;
    overflow:hidden!important;
  }
  body.kka-guest .kka157-steps i{
    width:34px!important;
    height:34px!important;
    flex-basis:34px!important;
    margin:0!important;
    align-self:center!important;
  }
  body.kka-guest .kka157-steps article>div{
    min-width:0!important;
    align-self:center!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }
  body.kka-guest .kka157-steps b{
    font-size:11.5px!important;
    line-height:1.3!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }
  body.kka-guest .kka157-steps p{
    margin:3px 0 0!important;
    font-size:9.5px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    max-width:100%!important;
  }
}

@media (min-width:1101px){
  body.kka-guest #publicHeroSection.kka157-hero,
  body.kka-guest #publicHeroSection .kka157-hero-art{
    height:258px!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    padding:22px 22px 38px 42px!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points{
    gap:15px!important;
  }
  body.kka-guest #trialSection.kka157-trial{
    margin-top:-30px!important;
    height:96px!important;
    min-height:96px!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls{
    grid-template-columns:minmax(220px,1.05fr) minmax(190px,.9fr) minmax(330px,1.45fr)!important;
  }
}

@media (min-width:601px) and (max-width:819px){
  body.kka-guest #publicHeroSection .kka157-hero-art img{
    object-fit:cover!important;
    object-position:66% center!important;
  }
  body.kka-guest .kka157-steps article{
    align-items:center!important;
    overflow:hidden!important;
  }
  body.kka-guest .kka157-steps article>div{min-width:0!important}
  body.kka-guest .kka157-steps p{white-space:normal!important;overflow-wrap:break-word!important}
}

@media (max-width:600px){
  body.kka-guest #publicHeroSection .kka157-hero-art img{
    object-fit:cover!important;
    object-position:64% center!important;
  }
  body.kka-guest .kka157-steps article{
    overflow:hidden!important;
  }
  body.kka-guest .kka157-steps article>div{min-width:0!important}
  body.kka-guest .kka157-steps b,
  body.kka-guest .kka157-steps p{
    white-space:normal!important;
    overflow-wrap:break-word!important;
  }
}

/* ============================================================
   Build 008.6.169 — CONTINUOUS HERO + NO OVERLAP + ENTRANCE RHYTHM
   Desktop visual lock from user reference:
   - Hero must read as one continuous wide visual, not two hard panels.
   - Hero copy sits higher with no excessive lower-left empty area.
   - Quick-trial card follows the hero instead of covering it.
   - Entrance section/title receives comfortable top breathing room.
   ============================================================ */
@media (min-width:900px){
  body.kka-guest #publicHeroSection.kka157-hero{
    position:relative!important;
    display:block!important;
    height:246px!important;
    min-height:246px!important;
    overflow:hidden!important;
    isolation:isolate!important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,1) 39%,
        rgba(255,255,255,.98) 45%,
        rgba(246,251,249,.88) 50%,
        rgba(239,249,246,.52) 55%,
        rgba(239,249,246,0) 62%),
      url("assets/hero-master-168.png?v=008.6.169") right center / auto 112% no-repeat,
      #f7fbfa!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    position:relative!important;
    z-index:2!important;
    width:52%!important;
    height:100%!important;
    box-sizing:border-box!important;
    padding:27px 18px 20px 42px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{
    margin:0!important;
    font-size:clamp(28px,2.3vw,36px)!important;
    line-height:1.18!important;
    letter-spacing:-.01em!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{
    margin:10px 0 11px!important;
    font-size:14px!important;
    line-height:1.35!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points{
    margin-top:0!important;
    gap:14px!important;
    flex-wrap:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points span{
    font-size:10.4px!important;
    white-space:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-art{
    display:none!important;
  }

  body.kka-guest #trialSection.kka157-trial{
    margin-top:0!important;
    height:92px!important;
    min-height:92px!important;
    border-radius:18px!important;
    box-shadow:0 10px 24px rgba(25,88,71,.07)!important;
  }

  body.kka-guest #entranceHubSection.kka157-section{
    padding-top:20px!important;
  }
  body.kka-guest #entranceHubSection .kka157-section-title h2{
    margin:0 0 12px!important;
    line-height:1.22!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-copy{
    padding-top:17px!important;
    padding-bottom:14px!important;
  }
}

@media (min-width:1400px){
  body.kka-guest #publicHeroSection.kka157-hero{
    height:252px!important;
    min-height:252px!important;
    background-size:auto 114%!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    padding-top:28px!important;
  }
}

/* Keep the tablet/mobile artwork behavior intact, but never let the trial panel cover it. */
@media (max-width:899px){
  body.kka-guest #trialSection.kka157-trial{
    margin-top:10px!important;
  }
}