/* 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.174 — 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.174") 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;
  }
}

/* ============================================================
   Build 008.6.174 — HERO FIT + FULL-BLEED ENTRANCE CARDS + COMPACT TRIAL
   User visual lock:
   - Hero stays inside the public canvas; fruit mascots are vivid and fully visible.
   - Entrance cards use one continuous image across the entire card.
   - Trial selects are shorter; fixed labels are +2px larger.
   ============================================================ */
body.kka-guest #publicHeroSection.kka157-hero{
  width:100%!important;
  max-width:100%!important;
  contain:paint;
}

@media (min-width:900px){
  body.kka-guest #publicHeroSection.kka157-hero{
    height:226px!important;
    min-height:226px!important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,1) 40%,
        rgba(255,255,255,.96) 44%,
        rgba(255,255,255,.72) 47%,
        rgba(255,255,255,.22) 50%,
        rgba(255,255,255,0) 53%),
      url("assets/hero-master-170.png?v=008.6.174") right center / auto 100% no-repeat,
      #f6fbfa!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    width:49%!important;
    height:100%!important;
    padding:18px 14px 12px 32px!important;
    justify-content:flex-start!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{
    font-size:clamp(29px,2.25vw,35px)!important;
    line-height:1.17!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{
    margin:8px 0 9px!important;
    font-size:13.5px!important;
    line-height:1.35!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points{
    gap:13px!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points span{
    font-size:10.7px!important;
  }

  body.kka-guest #trialSection.kka157-trial{
    height:82px!important;
    min-height:82px!important;
    padding:9px 18px!important;
    grid-template-columns:270px minmax(0,1fr)!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls{
    grid-template-columns:minmax(230px,1.08fr) minmax(210px,.96fr) minmax(330px,1.45fr)!important;
    column-gap:14px!important;
    row-gap:2px!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls label{
    gap:3px!important;
    font-size:14px!important;
    line-height:1.15!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls select,
  body.kka-guest #trialSection .kka157-trial-button{
    height:38px!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls select{
    padding:0 12px!important;
    font-size:13px!important;
  }
  body.kka-guest #trialSection .kka157-trial-button{
    font-size:13.5px!important;
  }
  body.kka-guest #trialSection .kka157-cascade-helper,
  body.kka-guest #trialSection .kka157-trial-status{
    font-size:8.7px!important;
    min-height:10px!important;
    line-height:1.1!important;
  }

  body.kka-guest #entranceHubSection .kka157-exam-card{
    height:188px!important;
    isolation:isolate!important;
    background:#fff!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card>img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    display:block!important;
    object-fit:cover!important;
    object-position:center center!important;
    opacity:1!important;
    filter:none!important;
    margin:0!important;
    border-radius:0!important;
    z-index:0!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 36%,rgba(255,255,255,.60) 49%,rgba(255,255,255,0) 68%);
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.red::before{
    background:linear-gradient(90deg,rgba(255,247,244,.98) 0%,rgba(255,247,244,.94) 36%,rgba(255,247,244,.58) 49%,rgba(255,247,244,0) 68%);
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.blue::before{
    background:linear-gradient(90deg,rgba(244,249,255,.98) 0%,rgba(244,249,255,.94) 36%,rgba(244,249,255,.58) 49%,rgba(244,249,255,0) 68%);
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.purple::before{
    background:linear-gradient(90deg,rgba(249,246,255,.98) 0%,rgba(249,246,255,.94) 36%,rgba(249,246,255,.58) 49%,rgba(249,246,255,0) 68%);
  }
  body.kka-guest #entranceHubSection .kka157-exam-copy,
  body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy{
    position:relative!important;
    z-index:2!important;
    width:52%!important;
    padding:17px 0 14px 15px!important;
    background:transparent!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy{
    width:56%!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.university>img{
    object-position:center center!important;
  }
}

@media (min-width:601px) and (max-width:899px){
  body.kka-guest #trialSection .kka157-trial-controls label{font-size:12px!important}
  body.kka-guest #trialSection .kka157-trial-controls select,
  body.kka-guest #trialSection .kka157-trial-button{height:36px!important}
  body.kka-guest #entranceHubSection .kka157-exam-card{isolation:isolate!important;background:#fff!important}
  body.kka-guest #entranceHubSection .kka157-exam-card>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;opacity:1!important;filter:none!important;z-index:0!important}
  body.kka-guest #entranceHubSection .kka157-exam-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.90) 40%,rgba(255,255,255,.25) 68%,transparent 78%)}
  body.kka-guest #entranceHubSection .kka157-exam-copy,body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy{position:relative!important;z-index:2!important;background:transparent!important}
}

@media (max-width:600px){
  body.kka-guest #trialSection .kka157-trial-controls label{font-size:12px!important}
  body.kka-guest #trialSection .kka157-trial-controls select,
  body.kka-guest #trialSection .kka157-trial-button{height:38px!important}
}

/* ============================================================
   Build 008.6.174 — PUBLIC HOME PROFESSIONAL RECOMPOSITION
   Reference lock: user-approved full-page mockup from 2026-08-23.
   Logo asset is intentionally unchanged. Build metadata stays visible.
   ============================================================ */
body.kka-guest{
  --kka-rail:1480px;
  --kka-page-pad:28px;
  --kka-card-radius:16px;
}
body.kka-guest .kka157-header{
  width:min(100%,var(--kka-rail))!important;
  height:70px!important;
  padding:0 var(--kka-page-pad)!important;
  border-bottom:1px solid #edf2f0!important;
  box-shadow:none!important;
}
body.kka-guest .kka157-header,
body.kka-guest .kka157-landing{
  font-family:"Leelawadee UI","Noto Sans Thai",Tahoma,system-ui,sans-serif!important;
}
body.kka-guest .kka157-nav{gap:16px!important}
body.kka-guest .kka157-nav>button{
  padding:11px 5px!important;
  font-size:14px!important;
  font-weight:700!important;
  color:#17231f!important;
}
body.kka-guest .kka157-nav>button.active{color:#006c4f!important}
body.kka-guest .kka157-nav>button.active::after{left:4px!important;right:4px!important;bottom:1px!important;height:2px!important}
body.kka-guest .kka157-actions{gap:10px!important}
body.kka-guest .kka157-btn{height:40px!important;min-height:40px!important;border-radius:10px!important;padding:0 17px!important;font-size:13px!important}

body.kka-guest #landingScreen.kka157-landing{
  width:min(calc(100% - (var(--kka-page-pad) * 2)),var(--kka-rail))!important;
  max-width:var(--kka-rail)!important;
  margin:0 auto!important;
  padding:0 0 16px!important;
  overflow:visible!important;
}

@media (min-width:961px){
  /* HERO: one continuous canvas. No split panel, no repeated/overlapping art. */
  body.kka-guest #publicHeroSection.kka157-hero{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:344px!important;
    min-height:344px!important;
    margin:0!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    isolation:isolate!important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.995) 0%,
        rgba(255,255,255,.985) 28%,
        rgba(255,255,255,.91) 36%,
        rgba(248,252,250,.67) 43%,
        rgba(242,250,247,.24) 49%,
        rgba(242,250,247,0) 55%),
      url("assets/hero-master-172.png?v=008.6.174") right center / auto 100% no-repeat,
      linear-gradient(180deg,#eff9ff 0%,#f4fbf6 70%,#e6f3d8 100%)!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-art{display:none!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    position:relative!important;
    z-index:2!important;
    width:43.5%!important;
    height:100%!important;
    padding:53px 10px 52px 16px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{
    margin:0!important;
    font-size:clamp(36px,3vw,46px)!important;
    line-height:1.18!important;
    letter-spacing:-.03em!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1 strong{
    color:#087a5d!important;
    font-weight:900!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{
    margin:17px 0 18px!important;
    font-size:17px!important;
    line-height:1.4!important;
    font-weight:650!important;
    color:#1a2824!important;
    white-space:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points{
    display:flex!important;
    align-items:center!important;
    gap:22px!important;
    margin:0!important;
    flex-wrap:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points span{
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    color:#173c31!important;
    font-size:12px!important;
    line-height:1.2!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points i{
    width:18px!important;height:18px!important;flex:0 0 18px!important;
    display:grid!important;place-items:center!important;
    border-radius:50%!important;background:#0a8365!important;color:#fff!important;
    font-style:normal!important;font-size:11px!important;font-weight:900!important;
  }

  /* QUICK TRIAL: single floating professional panel, aligned to page rails. */
  body.kka-guest #trialSection.kka157-trial{
    width:calc(100% - 10px)!important;
    height:112px!important;
    min-height:112px!important;
    margin:-14px auto 0!important;
    padding:16px 22px!important;
    display:grid!important;
    grid-template-columns:300px minmax(0,1fr)!important;
    gap:22px!important;
    align-items:center!important;
    border:1px solid #d7e7e1!important;
    border-radius:18px!important;
    background:rgba(249,253,251,.97)!important;
    box-shadow:0 12px 30px rgba(16,70,56,.10)!important;
    backdrop-filter:blur(2px)!important;
  }
  body.kka-guest #trialSection .kka157-trial-intro{gap:14px!important}
  body.kka-guest #trialSection .kka157-book{
    width:52px!important;height:52px!important;display:grid!important;place-items:center!important;
    border-radius:50%!important;background:#e8f5ef!important;font-size:29px!important;
  }
  body.kka-guest #trialSection .kka157-trial-intro h2{
    margin:0 0 4px!important;font-size:23px!important;line-height:1.1!important;font-weight:900!important;color:#123a30!important;
  }
  body.kka-guest #trialSection .kka157-trial-intro p{
    margin:0!important;font-size:12px!important;line-height:1.25!important;color:#4c625a!important;font-weight:600!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls{
    display:grid!important;
    grid-template-columns:minmax(240px,1fr) minmax(240px,1fr) minmax(350px,1.35fr)!important;
    column-gap:28px!important;
    row-gap:4px!important;
    align-items:end!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls label{
    gap:7px!important;font-size:14px!important;line-height:1!important;font-weight:850!important;color:#285046!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls select,
  body.kka-guest #trialSection .kka157-trial-button{
    height:46px!important;min-height:46px!important;border-radius:10px!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls select{
    border:1px solid #d2dfda!important;background:#fff!important;padding:0 15px!important;
    color:#17241f!important;font-size:14px!important;font-weight:750!important;
  }
  body.kka-guest #trialSection .kka157-trial-button{
    border:0!important;background:linear-gradient(90deg,#0a7b5d,#0b8b68)!important;
    color:#fff!important;font-size:17px!important;font-weight:900!important;box-shadow:0 8px 16px rgba(5,112,83,.16)!important;
  }
  body.kka-guest #trialSection .kka157-trial-button>span[aria-hidden="true"]{display:none!important}
  body.kka-guest #trialSection .kka157-cascade-helper{
    grid-column:1/3!important;margin:0!important;font-size:9px!important;line-height:1!important;color:#75847f!important;
  }
  body.kka-guest #trialSection .kka157-trial-status{
    grid-column:3!important;margin:0!important;min-height:10px!important;font-size:9px!important;line-height:1!important;text-align:center!important;
  }
  body.kka-guest #trialSection .kka157-trial-status:empty::after{
    content:"ฟรี! ไม่ต้องสมัครสมาชิก";color:#285046;font-weight:800;
  }

  /* ENTRANCE: larger heading and four equal, single-piece image cards. */
  body.kka-guest #entranceHubSection.kka157-section{padding-top:18px!important}
  body.kka-guest #entranceHubSection .kka157-section-title h2{
    margin:0 0 10px!important;font-size:25px!important;line-height:1.15!important;font-weight:900!important;letter-spacing:-.02em!important;
  }
  body.kka-guest #entranceHubSection .kka157-entrance-grid{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card,
  body.kka-guest #entranceHubSection .kka157-exam-card.university{
    position:relative!important;height:218px!important;min-height:218px!important;overflow:hidden!important;
    border:1px solid rgba(17,77,61,.12)!important;border-radius:15px!important;background:#fff!important;
    box-shadow:0 6px 17px rgba(18,61,50,.08)!important;isolation:isolate!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card>img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;
    display:block!important;object-fit:cover!important;object-position:center center!important;
    opacity:1!important;filter:saturate(1.03) contrast(1.015)!important;border-radius:0!important;margin:0!important;z-index:0!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card::before{
    content:""!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
    background:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.96) 34%,rgba(255,255,255,.82) 45%,rgba(255,255,255,.28) 58%,rgba(255,255,255,0) 72%)!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.red::before{background:linear-gradient(90deg,rgba(255,245,241,.99) 0%,rgba(255,245,241,.96) 34%,rgba(255,245,241,.80) 45%,rgba(255,245,241,.25) 59%,transparent 73%)!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.blue::before{background:linear-gradient(90deg,rgba(242,248,255,.99) 0%,rgba(242,248,255,.96) 34%,rgba(242,248,255,.80) 45%,rgba(242,248,255,.24) 59%,transparent 73%)!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.purple::before{background:linear-gradient(90deg,rgba(248,244,255,.99) 0%,rgba(248,244,255,.96) 34%,rgba(248,244,255,.80) 45%,rgba(248,244,255,.24) 59%,transparent 73%)!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.university::before{background:linear-gradient(90deg,rgba(255,251,232,.99) 0%,rgba(255,251,232,.96) 38%,rgba(255,251,232,.79) 49%,rgba(255,251,232,.20) 63%,transparent 76%)!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy,
  body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy{
    position:relative!important;z-index:2!important;width:57%!important;height:100%!important;
    padding:18px 0 16px 18px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;background:transparent!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-copy small{
    font-size:12px!important;line-height:1.1!important;font-weight:850!important;color:#33453f!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-copy strong,
  body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy strong{
    margin:5px 0 7px!important;font-size:36px!important;line-height:1!important;font-weight:950!important;letter-spacing:-.02em!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy strong{
    font-size:27px!important;line-height:1.05!important;color:#17231f!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-copy p{
    margin:0 0 auto!important;font-size:11.5px!important;line-height:1.45!important;font-weight:650!important;color:#2e3d38!important;white-space:normal!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-copy button,
  body.kka-guest #entranceHubSection .kka157-coming{
    min-height:34px!important;padding:0 12px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
    border-radius:8px!important;font-size:10.5px!important;font-weight:850!important;background:rgba(255,255,255,.93)!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.red>img{object-position:center center!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.blue>img,
  body.kka-guest #entranceHubSection .kka157-exam-card.purple>img{object-position:center center!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.university>img{object-position:center center!important}

  /* INFO: compact, readable and aligned. */
  body.kka-guest #howItWorksSection.kka157-info-grid{
    display:grid!important;grid-template-columns:1.12fr .88fr!important;gap:18px!important;padding-top:17px!important;
  }
  body.kka-guest #howItWorksSection .kka157-info-block h2{
    margin:0 0 9px!important;font-size:20px!important;line-height:1.15!important;font-weight:900!important;
  }
  body.kka-guest #howItWorksSection .kka157-steps{gap:9px!important}
  body.kka-guest #howItWorksSection .kka157-steps article{
    min-height:94px!important;padding:13px 12px!important;border-radius:13px!important;align-items:flex-start!important;gap:11px!important;
  }
  body.kka-guest #howItWorksSection .kka157-steps i{width:31px!important;height:31px!important;flex:0 0 31px!important;font-size:14px!important}
  body.kka-guest #howItWorksSection .kka157-steps b{font-size:11.5px!important;line-height:1.25!important;font-weight:900!important;white-space:normal!important}
  body.kka-guest #howItWorksSection .kka157-steps p{margin:5px 0 0!important;font-size:9.4px!important;line-height:1.45!important;color:#53665f!important}
  body.kka-guest #howItWorksSection .kka157-benefits{gap:8px!important}
  body.kka-guest #howItWorksSection .kka157-benefits article{
    min-height:94px!important;padding:11px 6px!important;border-radius:13px!important;justify-content:center!important;
  }
  body.kka-guest #howItWorksSection .kka157-benefits span{font-size:25px!important}
  body.kka-guest #howItWorksSection .kka157-benefits b{font-size:11px!important;line-height:1.2!important;white-space:nowrap!important}
  body.kka-guest #howItWorksSection .kka157-benefits small{font-size:8.7px!important;line-height:1.2!important;white-space:nowrap!important}

  /* 7-day CTA and footer: same rhythm as reference, build remains visible. */
  body.kka-guest #plansSection.kka157-trial7{
    min-height:74px!important;margin-top:12px!important;padding:9px 14px!important;border-radius:13px!important;
    grid-template-columns:minmax(0,1fr) auto 50px!important;gap:15px!important;align-items:center!important;
  }
  body.kka-guest #plansSection .kka157-trophy{font-size:35px!important}
  body.kka-guest #plansSection h2{font-size:19px!important;line-height:1.15!important;margin:0 0 4px!important;font-weight:900!important}
  body.kka-guest #plansSection p{font-size:10px!important;line-height:1.25!important;margin:0!important}
  body.kka-guest #plansSection .kka157-trial7-btn{height:44px!important;min-width:235px!important;border-radius:9px!important;font-size:12px!important;font-weight:900!important}
  body.kka-guest #plansSection .kka157-treasure{font-size:34px!important;text-align:center!important}

  body.kka-guest .kka157-footer{
    min-height:54px!important;margin-top:9px!important;padding:8px 16px!important;border-radius:13px 13px 0 0!important;
    grid-template-columns:auto 1fr auto!important;gap:22px!important;background:#00694f!important;
  }
  body.kka-guest .kka157-footer-brand img{width:36px!important;height:36px!important}
  body.kka-guest .kka157-footer-brand b{font-size:11px!important}.kka157-footer-brand small{font-size:9px!important}
  body.kka-guest .kka157-footer nav{gap:16px!important;justify-content:center!important}
  body.kka-guest .kka157-footer nav button{font-size:9.5px!important}
  body.kka-guest .kka157-footer-meta{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:1px!important;font-size:9px!important;line-height:1.2!important;white-space:nowrap!important}
  body.kka-guest .kka157-footer-meta b{display:block!important;color:#e4fff5!important;font-size:9.5px!important}
}

/* Desktop tuning by width: prevent oversized copy and preserve one-piece composition. */
@media (min-width:961px) and (max-width:1180px){
  body.kka-guest{--kka-page-pad:20px}
  body.kka-guest #publicHeroSection.kka157-hero{height:300px!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy{width:48%!important;padding-left:18px!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{font-size:31px!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{font-size:13px!important}
  body.kka-guest #publicHeroSection .kka157-proof-points{gap:10px!important}
  body.kka-guest #publicHeroSection .kka157-proof-points span{font-size:9.5px!important}
  body.kka-guest #trialSection.kka157-trial{grid-template-columns:230px minmax(0,1fr)!important}
  body.kka-guest #trialSection .kka157-trial-controls{grid-template-columns:1fr 1fr 1.2fr!important;column-gap:12px!important}
  body.kka-guest #entranceHubSection .kka157-exam-card{height:190px!important;min-height:190px!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy{padding-left:12px!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy strong{font-size:30px!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy strong{font-size:21px!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy p{font-size:9.5px!important}
}

/* Tablet: keep hierarchy while moving to two-column cards. */
@media (min-width:601px) and (max-width:960px){
  body.kka-guest #landingScreen.kka157-landing{width:calc(100% - 28px)!important;padding:0 0 14px!important}
  body.kka-guest #publicHeroSection.kka157-hero{height:auto!important;border-radius:14px!important;overflow:hidden!important;background:#f7fbfa!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy{padding:25px 24px 15px!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{font-size:30px!important;line-height:1.2!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{font-size:13px!important;margin:10px 0!important}
  body.kka-guest #publicHeroSection .kka157-proof-points{display:flex!important;gap:12px!important;flex-wrap:wrap!important}
  body.kka-guest #publicHeroSection .kka157-proof-points span{font-size:10px!important}
  body.kka-guest #publicHeroSection .kka157-hero-art{display:block!important;height:250px!important;background:#eff8ff!important}
  body.kka-guest #publicHeroSection .kka157-hero-art img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center bottom!important}
  body.kka-guest #trialSection.kka157-trial{margin:10px 0 0!important;height:auto!important;min-height:0!important;padding:14px!important;grid-template-columns:1fr!important;gap:12px!important}
  body.kka-guest #trialSection .kka157-trial-controls{grid-template-columns:1fr 1fr!important;gap:10px!important}
  body.kka-guest #trialSection .kka157-trial-button{grid-column:1/3!important}
  body.kka-guest #trialSection .kka157-trial-status{grid-column:1/3!important}
  body.kka-guest #entranceHubSection .kka157-entrance-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  body.kka-guest #entranceHubSection .kka157-exam-card{height:190px!important;min-height:190px!important}
  body.kka-guest #entranceHubSection .kka157-exam-card>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;opacity:1!important;filter:none!important;z-index:0!important}
  body.kka-guest #entranceHubSection .kka157-exam-card::before{content:""!important;position:absolute!important;inset:0!important;z-index:1!important;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.87) 47%,transparent 74%)!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy{position:relative!important;z-index:2!important;width:58%!important;height:100%!important;padding:14px!important;background:transparent!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy small{display:block!important;font-size:10px!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy strong{font-size:30px!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy p{display:block!important;font-size:9px!important;white-space:normal!important}
  body.kka-guest #howItWorksSection.kka157-info-grid{grid-template-columns:1fr!important}
}

/* Mobile: retain usable single-column experience; public desktop design never overflows. */
@media (max-width:600px){
  body.kka-guest #landingScreen.kka157-landing{width:calc(100% - 16px)!important;margin:0 auto!important;padding:0 0 84px!important}
  body.kka-guest #publicHeroSection.kka157-hero{border-radius:13px!important;overflow:hidden!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy{padding:16px 14px 10px!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{font-size:23px!important;line-height:1.22!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{font-size:10.5px!important;margin:8px 0!important}
  body.kka-guest #publicHeroSection .kka157-hero-art{height:160px!important}
  body.kka-guest #publicHeroSection .kka157-hero-art img{object-fit:cover!important;object-position:center bottom!important}
  body.kka-guest #entranceHubSection .kka157-section-title h2{font-size:18px!important}
}

/* Build 008.6.174 — final desktop fit after visual QA. */
@media (min-width:961px){
  body.kka-guest #publicHeroSection.kka157-hero{
    height:324px!important;min-height:324px!important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.995) 0%,
        rgba(255,255,255,.985) 24%,
        rgba(255,255,255,.92) 32%,
        rgba(249,252,250,.74) 39%,
        rgba(245,251,248,.40) 45%,
        rgba(245,251,248,.10) 50%,
        rgba(245,251,248,0) 54%),
      url("assets/hero-master-172.png?v=008.6.174") right center / auto 100% no-repeat,
      linear-gradient(180deg,#eef8ff 0%,#f5fbf7 68%,#e7f4dc 100%)!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{padding-top:42px!important;padding-bottom:44px!important}
  body.kka-guest #trialSection.kka157-trial{height:104px!important;min-height:104px!important;padding-top:13px!important;padding-bottom:13px!important}
  body.kka-guest #trialSection .kka157-trial-button:disabled{
    opacity:.78!important;filter:none!important;color:#fff!important;
    background:linear-gradient(90deg,#77b6a6,#83beae)!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card,
  body.kka-guest #entranceHubSection .kka157-exam-card.university{height:204px!important;min-height:204px!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.university{
    background:linear-gradient(135deg,#fff9de 0%,#fffdf3 58%,#fff 100%)!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.university::before{
    background:linear-gradient(90deg,rgba(255,251,232,.98) 0%,rgba(255,251,232,.92) 56%,rgba(255,251,232,.32) 76%,transparent 90%)!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.university>img{
    inset:auto 14px 0 auto!important;width:41%!important;height:92%!important;object-fit:contain!important;object-position:center bottom!important;
    filter:saturate(1.05) contrast(1.02)!important;
  }
  body.kka-guest #howItWorksSection .kka157-steps article,
  body.kka-guest #howItWorksSection .kka157-benefits article{min-height:86px!important}
  body.kka-guest #plansSection.kka157-trial7{min-height:68px!important}
}

/* Build 008.6.174 — QA refinements: seamless hero entry + university art safety. */
@media (min-width:961px){
  body.kka-guest #publicHeroSection.kka157-hero{
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.995) 0%,
        rgba(255,255,255,.975) 22%,
        rgba(255,255,255,.88) 30%,
        rgba(249,252,250,.66) 37%,
        rgba(243,250,247,.31) 43%,
        rgba(243,250,247,.08) 48%,
        rgba(243,250,247,0) 53%),
      url("assets/hero-master-172.png?v=008.6.174") right bottom / auto 118% no-repeat,
      linear-gradient(180deg,#eef8ff 0%,#f5fbf7 66%,#e5f2d9 100%)!important;
  }
  body.kka-guest #trialSection .kka157-trial-button:disabled{opacity:.9!important;background:linear-gradient(90deg,#5ea893,#69b49e)!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.university::before{display:none!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.university>img{
    z-index:1!important;opacity:1!important;filter:saturate(1.18) contrast(1.06)!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy{z-index:2!important}
}
@media (min-width:601px) and (max-width:960px){
  body.kka-guest #entranceHubSection .kka157-exam-card.university{
    background:linear-gradient(135deg,#fff9de 0%,#fffdf3 62%,#fff 100%)!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.university::before{display:none!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.university>img{
    position:absolute!important;inset:auto 12px 0 auto!important;width:42%!important;height:92%!important;
    object-fit:contain!important;object-position:center bottom!important;z-index:1!important;opacity:1!important;
    filter:saturate(1.15) contrast(1.05)!important;margin:0!important;border-radius:0!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy{z-index:2!important;width:58%!important}
}

/* ============================================================
   Build 008.6.174 — PIXEL-RHYTHM MATCH TO APPROVED PUBLIC REFERENCE
   Desktop reference: 1536×1024. Logo asset is intentionally unchanged.
   This block is the final visual authority for the signed-out public home.
   ============================================================ */
@media (min-width:961px){
  body.kka-guest{
    --kka172-pad:32px;
    --kka172-card-gap:16px;
    background:#fff!important;
  }

  /* Header: full-width rail like the approved reference. */
  body.kka-guest #publicHeader.kka157-header{
    width:100%!important;
    max-width:none!important;
    height:72px!important;
    margin:0!important;
    padding:0 var(--kka172-pad)!important;
    grid-template-columns:118px 1fr auto!important;
    gap:18px!important;
    border-bottom:1px solid #e8efec!important;
    background:#fff!important;
  }
  body.kka-guest #publicHeader .kka157-brand{
    width:118px!important;min-width:118px!important;max-width:118px!important;height:66px!important;
    align-self:center!important;
  }
  body.kka-guest #publicHeader .kka157-brand img{
    width:94px!important;height:62px!important;max-width:94px!important;
    object-fit:contain!important;object-position:left center!important;
  }
  body.kka-guest #publicHeader .kka157-nav{gap:24px!important}
  body.kka-guest #publicHeader .kka157-nav>button{
    padding:18px 0 16px!important;
    border-radius:0!important;
    font-size:14px!important;
    font-weight:850!important;
    color:#13231f!important;
  }
  body.kka-guest #publicHeader .kka157-nav>button:hover{background:transparent!important;color:#006c4f!important}
  body.kka-guest #publicHeader .kka157-nav>button.active::after{left:0!important;right:0!important;bottom:8px!important;height:2px!important}
  body.kka-guest #publicHeader .kka157-actions{gap:10px!important}
  body.kka-guest #publicHeader .kka157-btn{
    height:40px!important;min-height:40px!important;padding:0 18px!important;border-radius:10px!important;
    font-size:13px!important;font-weight:900!important;
  }

  /* Landing itself is full width; the approved reference hero is edge-to-edge. */
  body.kka-guest #landingScreen.kka157-landing{
    width:100%!important;max-width:none!important;margin:0!important;padding:0 0 14px!important;overflow:visible!important;
  }

  /* Hero: one continuous landscape, with the same text/art balance as reference. */
  body.kka-guest #publicHeroSection.kka157-hero{
    position:relative!important;
    width:100%!important;
    height:336px!important;min-height:336px!important;
    margin:0!important;
    display:block!important;
    overflow:hidden!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;
    isolation:isolate!important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.995) 0%,
        rgba(255,255,255,.975) 23%,
        rgba(255,255,255,.91) 31%,
        rgba(255,255,255,.72) 38%,
        rgba(255,255,255,.38) 44%,
        rgba(255,255,255,.10) 49%,
        rgba(255,255,255,0) 53%),
      url("assets/hero-master-172.png?v=008.6.174") right bottom / auto 119% no-repeat,
      url("assets/hero-backdrop-172.jpg?v=008.6.174") center bottom / cover no-repeat!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-art{display:none!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    position:relative!important;z-index:3!important;
    width:43%!important;height:100%!important;
    padding:38px 8px 48px 48px!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{
    margin:0!important;
    font-family:"Leelawadee UI","Noto Sans Thai",Tahoma,system-ui,sans-serif!important;
    font-size:42px!important;line-height:1.23!important;letter-spacing:-.03em!important;font-weight:900!important;
    color:#101d19!important;white-space:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1 strong{color:#087b5d!important;font-weight:900!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{
    margin:13px 0 17px!important;font-size:16px!important;line-height:1.4!important;font-weight:700!important;color:#17251f!important;white-space:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points{
    display:flex!important;align-items:center!important;gap:20px!important;flex-wrap:nowrap!important;margin:0!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points span{
    display:inline-flex!important;align-items:center!important;gap:7px!important;
    font-size:11.5px!important;line-height:1.2!important;font-weight:850!important;color:#17382e!important;white-space:nowrap!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points i{
    width:18px!important;height:18px!important;flex:0 0 18px!important;border-radius:50%!important;
    display:grid!important;place-items:center!important;background:#098263!important;color:#fff!important;font-size:11px!important;font-style:normal!important;
  }

  /* Shared reference rail for every section below hero. */
  body.kka-guest #trialSection,
  body.kka-guest #entranceHubSection,
  body.kka-guest #howItWorksSection,
  body.kka-guest #plansSection,
  body.kka-guest .kka157-footer{
    width:calc(100% - (var(--kka172-pad) * 2))!important;
    max-width:none!important;
    margin-left:auto!important;margin-right:auto!important;
  }

  /* Quick trial panel. */
  body.kka-guest #trialSection.kka157-trial{
    height:108px!important;min-height:108px!important;
    margin-top:0!important;
    padding:15px 24px!important;
    display:grid!important;grid-template-columns:300px minmax(0,1fr)!important;gap:26px!important;align-items:center!important;
    border:1px solid #d3e5de!important;border-radius:18px!important;
    background:rgba(249,253,251,.98)!important;
    box-shadow:0 12px 28px rgba(23,77,63,.11)!important;
  }
  body.kka-guest #trialSection .kka157-trial-intro{gap:15px!important}
  body.kka-guest #trialSection .kka157-book{
    width:58px!important;height:58px!important;flex:0 0 58px!important;border-radius:50%!important;
    display:grid!important;place-items:center!important;background:#e7f4ee!important;font-size:31px!important;line-height:1!important;
  }
  body.kka-guest #trialSection .kka157-trial-intro h2{
    margin:0 0 5px!important;font-size:23px!important;line-height:1.05!important;font-weight:900!important;color:#133b30!important;white-space:nowrap!important;
  }
  body.kka-guest #trialSection .kka157-trial-intro p{margin:0!important;font-size:12px!important;line-height:1.25!important;font-weight:650!important;color:#50655e!important;white-space:nowrap!important}
  body.kka-guest #trialSection .kka157-trial-controls{
    display:grid!important;
    grid-template-columns:minmax(270px,1fr) minmax(270px,1fr) minmax(360px,1.32fr)!important;
    column-gap:30px!important;row-gap:4px!important;align-items:end!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls label{gap:7px!important;font-size:13px!important;line-height:1!important;font-weight:900!important;color:#285045!important}
  body.kka-guest #trialSection .kka157-trial-controls select,
  body.kka-guest #trialSection .kka157-trial-button{height:48px!important;min-height:48px!important;border-radius:10px!important}
  body.kka-guest #trialSection .kka157-trial-controls select{
    border:1px solid #d1ddd8!important;background:#fff!important;padding:0 15px!important;color:#17231f!important;font-size:14px!important;font-weight:800!important;
  }
  body.kka-guest #trialSection .kka157-trial-button{
    border:0!important;background:linear-gradient(90deg,#087d5d,#098d69)!important;color:#fff!important;
    font-size:18px!important;font-weight:900!important;box-shadow:0 7px 16px rgba(3,109,80,.15)!important;
  }
  body.kka-guest #trialSection .kka157-trial-button:disabled{opacity:.78!important;background:linear-gradient(90deg,#79b9a8,#88c2b2)!important;color:#fff!important;filter:none!important}
  body.kka-guest #trialSection .kka157-trial-button>span[aria-hidden="true"]{display:none!important}
  body.kka-guest #trialSection .kka157-cascade-helper{grid-column:1/3!important;margin:0!important;font-size:9px!important;line-height:1!important;color:#73827d!important}
  body.kka-guest #trialSection .kka157-trial-status{grid-column:3!important;margin:0!important;min-height:10px!important;font-size:9.5px!important;line-height:1!important;text-align:center!important;color:#294d42!important}
  body.kka-guest #trialSection .kka157-trial-status:empty::after{content:"ฟรี! ไม่ต้องสมัครสมาชิก"!important;font-weight:850!important}

  /* Entrance section: same card proportions/artwork as approved reference. */
  body.kka-guest #entranceHubSection.kka157-section{padding-top:14px!important}
  body.kka-guest #entranceHubSection .kka157-section-title h2{
    margin:0 0 10px!important;font-size:22px!important;line-height:1.15!important;font-weight:950!important;letter-spacing:-.02em!important;color:#13211d!important;
  }
  body.kka-guest #entranceHubSection .kka157-entrance-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}
  body.kka-guest #entranceHubSection .kka157-exam-card,
  body.kka-guest #entranceHubSection .kka157-exam-card.university{
    position:relative!important;height:220px!important;min-height:220px!important;overflow:hidden!important;
    border:1px solid rgba(27,84,68,.12)!important;border-radius:14px!important;background:#fff!important;
    box-shadow:0 7px 18px rgba(18,61,50,.08)!important;isolation:isolate!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card>img,
  body.kka-guest #entranceHubSection .kka157-exam-card.university>img{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;
    display:block!important;object-fit:cover!important;object-position:center center!important;margin:0!important;border-radius:0!important;
    opacity:1!important;filter:saturate(1.04) contrast(1.02)!important;z-index:0!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card::before,
  body.kka-guest #entranceHubSection .kka157-exam-card.university::before{
    content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:1!important;pointer-events:none!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.red::before{background:linear-gradient(90deg,rgba(255,244,240,.99) 0%,rgba(255,244,240,.96) 33%,rgba(255,244,240,.78) 46%,rgba(255,244,240,.18) 61%,transparent 75%)!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.blue::before{background:linear-gradient(90deg,rgba(239,247,255,.99) 0%,rgba(239,247,255,.96) 33%,rgba(239,247,255,.78) 46%,rgba(239,247,255,.18) 61%,transparent 75%)!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.purple::before{background:linear-gradient(90deg,rgba(246,241,255,.99) 0%,rgba(246,241,255,.96) 33%,rgba(246,241,255,.78) 46%,rgba(246,241,255,.18) 61%,transparent 75%)!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.university::before{background:linear-gradient(90deg,rgba(255,249,225,.99) 0%,rgba(255,249,225,.96) 38%,rgba(255,249,225,.76) 52%,rgba(255,249,225,.14) 67%,transparent 80%)!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy,
  body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy{
    position:relative!important;z-index:2!important;width:55%!important;height:100%!important;
    padding:18px 0 16px 20px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;background:transparent!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-copy small{display:block!important;font-size:11.5px!important;line-height:1.2!important;font-weight:900!important;color:#313f3a!important;white-space:nowrap!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy strong{
    margin:6px 0 8px!important;font-size:36px!important;line-height:1!important;font-weight:950!important;letter-spacing:-.02em!important;white-space:nowrap!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy strong{font-size:27px!important;line-height:1.08!important;color:#17231f!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy p{margin:0 0 auto!important;font-size:11.5px!important;line-height:1.45!important;font-weight:650!important;color:#293933!important;white-space:nowrap!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy button,
  body.kka-guest #entranceHubSection .kka157-coming{
    min-height:34px!important;padding:0 12px!important;border-radius:7px!important;font-size:10.5px!important;font-weight:900!important;background:rgba(255,255,255,.94)!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;
  }

  /* Bottom information area. */
  body.kka-guest #howItWorksSection.kka157-info-grid{
    display:grid!important;grid-template-columns:1.12fr .88fr!important;gap:24px!important;padding-top:15px!important;
  }
  body.kka-guest #howItWorksSection .kka157-info-block h2{
    margin:0 0 10px!important;font-size:20px!important;line-height:1.15!important;font-weight:950!important;color:#17231f!important;white-space:nowrap!important;
  }
  body.kka-guest #howItWorksSection .kka157-steps{gap:10px!important}
  body.kka-guest #howItWorksSection .kka157-steps article{
    min-height:98px!important;padding:13px 12px!important;border:1px solid #dde7e3!important;border-radius:13px!important;background:#fff!important;
    display:flex!important;align-items:flex-start!important;gap:11px!important;
  }
  body.kka-guest #howItWorksSection .kka157-steps i{width:32px!important;height:32px!important;flex:0 0 32px!important;font-size:15px!important;background:#067b5b!important}
  body.kka-guest #howItWorksSection .kka157-steps b{font-size:12px!important;line-height:1.25!important;font-weight:950!important;white-space:nowrap!important}
  body.kka-guest #howItWorksSection .kka157-steps p{margin:5px 0 0!important;font-size:9.8px!important;line-height:1.45!important;color:#52645e!important}
  body.kka-guest #howItWorksSection .kka157-benefits{gap:9px!important}
  body.kka-guest #howItWorksSection .kka157-benefits article{
    min-height:98px!important;padding:11px 7px!important;border:1px solid #dde7e3!important;border-radius:13px!important;background:#fff!important;display:flex!important;flex-direction:column!important;justify-content:center!important;
  }
  body.kka-guest #howItWorksSection .kka157-benefits span{font-size:26px!important;line-height:1!important}
  body.kka-guest #howItWorksSection .kka157-benefits b{margin-top:7px!important;font-size:11.5px!important;line-height:1.2!important;font-weight:950!important;white-space:nowrap!important}
  body.kka-guest #howItWorksSection .kka157-benefits small{margin-top:3px!important;font-size:9px!important;line-height:1.2!important;white-space:nowrap!important}

  /* 7-day strip and footer. */
  body.kka-guest #plansSection.kka157-trial7{
    min-height:72px!important;margin-top:12px!important;padding:9px 14px!important;border-radius:13px!important;
    grid-template-columns:minmax(0,1fr) auto 48px!important;gap:16px!important;align-items:center!important;background:#fff!important;
  }
  body.kka-guest #plansSection .kka157-trial7-copy{gap:15px!important}
  body.kka-guest #plansSection .kka157-trophy{font-size:34px!important}
  body.kka-guest #plansSection h2{margin:0 0 4px!important;font-size:19px!important;line-height:1.15!important;font-weight:950!important}
  body.kka-guest #plansSection p{margin:0!important;font-size:10px!important;line-height:1.25!important}
  body.kka-guest #plansSection .kka157-trial7-btn{height:45px!important;min-width:225px!important;padding:0 18px!important;border-radius:9px!important;font-size:12px!important;font-weight:950!important}
  body.kka-guest #plansSection .kka157-treasure{font-size:34px!important}

  body.kka-guest .kka157-footer{
    min-height:55px!important;margin-top:8px!important;padding:8px 18px!important;border-radius:13px 13px 0 0!important;
    display:grid!important;grid-template-columns:auto 1fr auto!important;gap:22px!important;align-items:center!important;background:#00694f!important;
  }
  body.kka-guest .kka157-footer-brand img{width:37px!important;height:37px!important;object-fit:contain!important}
  body.kka-guest .kka157-footer-brand b{font-size:11px!important}.kka157-footer-brand small{font-size:9px!important}
  body.kka-guest .kka157-footer nav{gap:18px!important;justify-content:center!important}
  body.kka-guest .kka157-footer nav button{font-size:9.5px!important}
  body.kka-guest .kka157-footer-meta{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:1px!important;font-size:9px!important;line-height:1.2!important;white-space:nowrap!important}
  body.kka-guest .kka157-footer-meta b{display:block!important;font-size:9.5px!important;color:#e7fff6!important}
}

/* Keep the already-stable tablet/mobile behavior from Build 171, but use the corrected art assets. */
@media (min-width:601px) and (max-width:960px){
  body.kka-guest #publicHeroSection .kka157-hero-art img{content:url("assets/hero-master-172.png?v=008.6.174")!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.university>img{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
}
@media (max-width:600px){
  body.kka-guest #publicHeroSection .kka157-hero-art img{content:url("assets/hero-master-172.png?v=008.6.174")!important}
}

/* Build 008.6.174 — final visual QA nudge against the approved 1536 reference. */
@media (min-width:961px){
  body.kka-guest #publicHeroSection.kka157-hero{
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.94) 0%,
        rgba(255,255,255,.90) 18%,
        rgba(255,255,255,.78) 28%,
        rgba(255,255,255,.52) 36%,
        rgba(255,255,255,.24) 43%,
        rgba(255,255,255,.05) 49%,
        rgba(255,255,255,0) 53%),
      url("assets/hero-master-172.png?v=008.6.174") right bottom / auto 109% no-repeat,
      url("assets/hero-backdrop-172.jpg?v=008.6.174") center bottom / cover no-repeat!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    justify-content:flex-start!important;
    padding-top:40px!important;
    padding-bottom:28px!important;
  }
  body.kka-guest #entranceHubSection.kka157-section{padding-top:9px!important}
  body.kka-guest #entranceHubSection .kka157-section-title h2{margin-bottom:8px!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.university>img{
    inset:auto -3% 0 auto!important;width:108%!important;height:108%!important;
    object-fit:cover!important;object-position:right bottom!important;transform:none!important;
  }
  body.kka-guest #plansSection.kka157-trial7{min-height:62px!important;height:62px!important;margin-top:8px!important;padding-top:6px!important;padding-bottom:6px!important}
  body.kka-guest #plansSection .kka157-trial7-btn{height:43px!important}
}

/* Build 008.6.174 — reference rail/seam correction. */
@media (min-width:961px){
  body.kka-guest #publicHeroSection.kka157-hero{
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.94) 0%,
        rgba(255,255,255,.88) 18%,
        rgba(255,255,255,.72) 28%,
        rgba(255,255,255,.42) 36%,
        rgba(255,255,255,.16) 43%,
        rgba(255,255,255,.03) 49%,
        rgba(255,255,255,0) 53%),
      url("assets/hero-master-172.png?v=008.6.174") right bottom / auto 106% no-repeat,
      url("assets/hero-scenery-172.svg?v=008.6.174") center bottom / 100% 100% no-repeat!important;
  }
  body.kka-guest #trialSection.kka157-trial{
    width:calc(100% - (var(--kka172-pad) * 2))!important;
    margin-left:auto!important;margin-right:auto!important;
  }
  body.kka-guest #entranceHubSection.kka157-section{padding-top:6px!important}
  body.kka-guest #entranceHubSection .kka157-section-title h2{margin-bottom:6px!important}
}

/* Build 008.6.174 — approved-detail lock: hero scale, nav cue, CTA and book icon. */
@media (min-width:961px){
  body.kka-guest #publicHeroSection.kka157-hero{
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.94) 0%,
        rgba(255,255,255,.88) 18%,
        rgba(255,255,255,.72) 28%,
        rgba(255,255,255,.42) 36%,
        rgba(255,255,255,.16) 43%,
        rgba(255,255,255,.03) 49%,
        rgba(255,255,255,0) 53%),
      url("assets/hero-master-172.png?v=008.6.174") right bottom / auto 101% no-repeat,
      url("assets/hero-scenery-172.svg?v=008.6.174") center bottom / 100% 100% no-repeat!important;
  }
  body.kka-guest #navLibraryBtn b::after{
    content:"⌄";display:inline-block;margin-left:5px;font-size:12px;line-height:1;transform:translateY(-1px);color:#667a72;
  }
  body.kka-guest #trialSection .kka157-book{
    font-size:0!important;background:#0a7e5f!important;position:relative!important;
  }
  body.kka-guest #trialSection .kka157-book::before{
    content:"";display:block;width:34px;height:34px;background:url("assets/open-book-172.svg?v=008.6.174") center/contain no-repeat;
  }
  body.kka-guest #trialSection .kka157-trial-button:disabled{
    opacity:1!important;background:linear-gradient(90deg,#087d5d,#098d69)!important;color:#fff!important;
  }
}
@media (min-width:961px){
  body.kka-guest #publicHeroSection.kka157-hero{
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.94) 0%,
        rgba(255,255,255,.88) 18%,
        rgba(255,255,255,.72) 28%,
        rgba(255,255,255,.42) 36%,
        rgba(255,255,255,.16) 43%,
        rgba(255,255,255,.03) 49%,
        rgba(255,255,255,0) 53%),
      url("assets/hero-master-172.png?v=008.6.174") right bottom / auto 106% no-repeat,
      url("assets/hero-scenery-172.svg?v=008.6.174") center bottom / 100% 100% no-repeat!important;
  }
}

/* ============================================================
   Build 008.6.174 — LOCKED PUBLIC MASTER REFERENCE
   Reference: user-approved Public Desktop image locked 2026-08-23.
   Non-negotiables: current logo unchanged; P.1 uses younger child;
   hero reads as one continuous artwork, never split into panels.
   ============================================================ */
@media (min-width:961px){
  body.kka-guest{
    --kka173-pad:32px;
  }
  body.kka-guest #publicHeroSection.kka157-hero{
    height:336px!important;
    min-height:336px!important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.78) 0%,
        rgba(255,255,255,.64) 17%,
        rgba(255,255,255,.48) 28%,
        rgba(255,255,255,.25) 38%,
        rgba(255,255,255,.08) 45%,
        rgba(255,255,255,0) 52%),
      url("assets/hero-master-173.png?v=008.6.174") center bottom / 100% 100% no-repeat!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-art{display:none!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    width:43.5%!important;
    height:100%!important;
    padding:36px 6px 28px 48px!important;
    justify-content:center!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy h1{
    font-size:42px!important;
    line-height:1.22!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy>p{
    margin:13px 0 17px!important;
    font-size:16px!important;
  }
  body.kka-guest #publicHeroSection .kka157-proof-points{gap:20px!important}
  body.kka-guest #publicHeroSection .kka157-proof-points span{font-size:11.5px!important}

  /* Keep the approved 32px content rail under the edge-to-edge hero. */
  body.kka-guest #trialSection,
  body.kka-guest #entranceHubSection,
  body.kka-guest #howItWorksSection,
  body.kka-guest #plansSection,
  body.kka-guest .kka157-footer{
    width:calc(100% - (var(--kka173-pad) * 2))!important;
  }

  /* Locked reference: P.1 must clearly read as a young child. */
  body.kka-guest #entranceHubSection .kka157-exam-card.red>img{
    object-fit:cover!important;
    object-position:center center!important;
    filter:saturate(1.08) contrast(1.025)!important;
  }
}

/* Tablet/mobile retain the responsive structure but use the same locked artwork. */
@media (min-width:601px) and (max-width:960px){
  body.kka-guest #publicHeroSection .kka157-hero-art img{content:url("assets/hero-master-173.png?v=008.6.174")!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.red>img{object-position:center center!important}
}
@media (max-width:600px){
  body.kka-guest #publicHeroSection .kka157-hero-art img{content:url("assets/hero-master-173.png?v=008.6.174")!important}
  body.kka-guest #entranceHubSection .kka157-exam-card.red>img{object-position:center center!important}
}

/* ============================================================
   Build 008.6.174 — FINAL LOCKED DESKTOP COMPOSITION
   Pixel target: user-locked Public Reference (2026-08-23).
   Keep the current logo and current build label only.
   ============================================================ */
@media (min-width:961px){
  body.kka-guest{
    --kka173-rail:32px;
    background:#fff!important;
  }

  /* Header proportions from the locked reference. */
  body.kka-guest .kka157-header{
    min-height:72px!important;
    height:72px!important;
    padding:0 var(--kka173-rail)!important;
    border-bottom:1px solid #e7efec!important;
    box-shadow:none!important;
  }
  body.kka-guest .kka157-nav{gap:30px!important}
  body.kka-guest .kka157-nav button{font-size:14px!important;font-weight:850!important}
  body.kka-guest .kka157-actions .kka157-btn{min-height:39px!important;height:39px!important;padding:0 18px!important;font-size:13px!important}

  /* Hero is deliberately one rasterized master from the approved reference.
     The semantic HTML copy remains in the DOM but is visually hidden on desktop,
     avoiding any seam between text background and illustration. */
  body.kka-guest #publicHeroSection.kka157-hero{
    width:100%!important;
    height:333px!important;
    min-height:333px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
    background:url("assets/hero-master-173.png?v=008.6.174") center center / 100% 100% no-repeat!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{
    position:absolute!important;
    inset:0!important;
    width:45%!important;
    padding:0!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-art{display:none!important}

  /* Practice selector: same visual rail and density as approved reference. */
  body.kka-guest #trialSection.kka157-trial{
    width:calc(100% - (var(--kka173-rail) * 2))!important;
    min-height:108px!important;
    height:108px!important;
    margin:0 auto!important;
    padding:14px 28px!important;
    grid-template-columns:280px minmax(0,1fr)!important;
    gap:24px!important;
    border-radius:16px!important;
    border:1px solid #d9e7e2!important;
    background:linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%)!important;
    box-shadow:0 8px 22px rgba(27,84,66,.10)!important;
  }
  body.kka-guest #trialSection .kka157-trial-intro{gap:14px!important;align-items:center!important}
  body.kka-guest #trialSection .kka157-book{
    width:52px!important;height:52px!important;min-width:52px!important;
    border-radius:50%!important;background:#087d5e!important;color:#fff!important;
  }
  body.kka-guest #trialSection .kka157-trial-intro h2{font-size:22px!important;line-height:1.15!important;font-weight:950!important;margin:0 0 5px!important}
  body.kka-guest #trialSection .kka157-trial-intro p{font-size:12.5px!important;line-height:1.2!important;white-space:nowrap!important}
  body.kka-guest #trialSection .kka157-trial-controls{
    grid-template-columns:minmax(230px,1fr) minmax(230px,1fr) minmax(330px,1.35fr)!important;
    column-gap:28px!important;row-gap:4px!important;align-items:end!important;
  }
  body.kka-guest #trialSection .kka157-trial-controls label{font-size:13.5px!important;font-weight:900!important;gap:7px!important}
  body.kka-guest #trialSection .kka157-trial-controls select,
  body.kka-guest #trialSection .kka157-trial-button{height:48px!important;min-height:48px!important;border-radius:10px!important;font-size:14px!important;font-weight:900!important}
  body.kka-guest #trialSection .kka157-trial-button{font-size:18px!important}
  body.kka-guest #trialSection .kka157-trial-status{font-size:10px!important;font-weight:800!important}

  /* Entrance title and four cards use the approved reference card artwork itself.
     This guarantees the P.1 child remains the younger child and all four cards
     keep exactly the approved typography, proportions and imagery. */
  body.kka-guest #entranceHubSection.kka157-section{
    width:calc(100% - (var(--kka173-rail) * 2))!important;
    padding:9px 0 0!important;
    margin:0 auto!important;
  }
  body.kka-guest #entranceHubSection .kka157-section-title h2{
    margin:0 0 8px!important;
    font-size:22px!important;
    line-height:1.2!important;
    font-weight:950!important;
  }
  body.kka-guest #entranceHubSection .kka157-entrance-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card,
  body.kka-guest #entranceHubSection .kka157-exam-card.university{
    position:relative!important;
    height:220px!important;
    min-height:220px!important;
    border:0!important;
    border-radius:14px!important;
    background:transparent!important;
    box-shadow:0 5px 16px rgba(37,61,53,.10)!important;
    overflow:hidden!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-card::before,
  body.kka-guest #entranceHubSection .kka157-exam-card.university::before{display:none!important}
  body.kka-guest #entranceHubSection .kka157-exam-card>img,
  body.kka-guest #entranceHubSection .kka157-exam-card.university>img{
    position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;
    object-fit:fill!important;object-position:center!important;
    opacity:1!important;filter:none!important;z-index:0!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-copy,
  body.kka-guest #entranceHubSection .kka157-exam-card.university .kka157-exam-copy{
    position:absolute!important;inset:0!important;z-index:2!important;
    padding:0!important;opacity:0!important;pointer-events:none!important;
  }
  body.kka-guest #entranceHubSection .kka157-exam-copy button{
    position:absolute!important;left:18px!important;bottom:16px!important;
    width:116px!important;height:36px!important;min-height:36px!important;
    opacity:0!important;pointer-events:auto!important;
  }

  /* Lower blocks: scale typography and spacing up to the approved reference. */
  body.kka-guest #howItWorksSection.kka157-info-grid{
    width:calc(100% - (var(--kka173-rail) * 2))!important;
    margin:10px auto 0!important;
    gap:18px!important;
  }
  body.kka-guest #howItWorksSection .kka157-info-block h2{font-size:20px!important;line-height:1.2!important;margin:0 0 9px!important;font-weight:950!important}
  body.kka-guest #howItWorksSection .kka157-steps{gap:10px!important}
  body.kka-guest #howItWorksSection .kka157-steps article{min-height:92px!important;padding:13px 14px!important;border-radius:12px!important}
  body.kka-guest #howItWorksSection .kka157-steps i{width:34px!important;height:34px!important;flex:0 0 34px!important;font-size:16px!important}
  body.kka-guest #howItWorksSection .kka157-steps b{font-size:12.7px!important}
  body.kka-guest #howItWorksSection .kka157-steps p{font-size:10.5px!important;line-height:1.38!important}
  body.kka-guest #howItWorksSection .kka157-benefits{gap:10px!important}
  body.kka-guest #howItWorksSection .kka157-benefits article{min-height:92px!important;padding:12px 8px!important;border-radius:12px!important}
  body.kka-guest #howItWorksSection .kka157-benefits span{font-size:27px!important}
  body.kka-guest #howItWorksSection .kka157-benefits b{font-size:12.2px!important}
  body.kka-guest #howItWorksSection .kka157-benefits small{font-size:9.5px!important}

  body.kka-guest #plansSection.kka157-trial7{
    width:calc(100% - (var(--kka173-rail) * 2))!important;
    min-height:68px!important;height:68px!important;
    margin:8px auto 0!important;padding:7px 10px!important;
  }
  body.kka-guest #plansSection .kka157-trial7-copy h2{font-size:20px!important;line-height:1.15!important}
  body.kka-guest #plansSection .kka157-trial7-copy p{font-size:10.5px!important}
  body.kka-guest #plansSection .kka157-trial7-btn{height:44px!important;min-width:220px!important;font-size:13px!important}

  body.kka-guest .kka157-footer{
    width:calc(100% - (var(--kka173-rail) * 2))!important;
    min-height:60px!important;height:60px!important;
    margin:0 auto!important;padding:8px 20px!important;border-radius:12px 12px 0 0!important;
  }
  body.kka-guest .kka157-footer nav button{font-size:10.5px!important}
  body.kka-guest .kka157-footer-meta{font-size:9.5px!important}
}

/* Responsive: use real HTML copy and locked young-child artwork instead of the
   desktop screenshot composition, while keeping the same visual identity. */
@media (max-width:960px){
  body.kka-guest #publicHeroSection .kka157-hero-copy{opacity:1!important}
  body.kka-guest #publicHeroSection .kka157-hero-art{display:block!important}
  body.kka-guest #publicHeroSection .kka157-hero-art img{content:url("assets/hero-master-173.png?v=008.6.174")!important}
  body.kka-guest #entranceHubSection .kka157-exam-card>img,
  body.kka-guest #entranceHubSection .kka157-exam-card.university>img{object-fit:fill!important;object-position:center!important;filter:none!important;opacity:1!important}
  body.kka-guest #entranceHubSection .kka157-exam-card::before,
  body.kka-guest #entranceHubSection .kka157-exam-card.university::before{display:none!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy{opacity:0!important;pointer-events:none!important}
  body.kka-guest #entranceHubSection .kka157-exam-copy button{opacity:0!important;pointer-events:auto!important;position:absolute!important;left:16px!important;bottom:14px!important;width:118px!important;height:36px!important}
}

/* Build 008.6.174 — responsive art isolation: never reuse the desktop
   text-embedded hero master inside the tablet/mobile art panel. */
@media (min-width:601px) and (max-width:960px){
  body.kka-guest #publicHeroSection.kka157-hero{
    background:linear-gradient(180deg,#f8fcfb 0%,#f1f8f5 100%)!important;
  }
  body.kka-guest #publicHeroSection .kka157-hero-copy{opacity:1!important}
  body.kka-guest #publicHeroSection .kka157-hero-art{display:block!important;overflow:hidden!important}
  body.kka-guest #publicHeroSection .kka157-hero-art img{
    content:url("assets/hero-art-responsive-173.png?v=008.6.174")!important;
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:42% center!important;
  }
}
@media (max-width:600px){
  body.kka-guest #publicHeroSection.kka157-hero{background:#f8fcfb!important}
  body.kka-guest #publicHeroSection .kka157-hero-copy{opacity:1!important}
  body.kka-guest #publicHeroSection .kka157-hero-art{display:block!important;overflow:hidden!important}
  body.kka-guest #publicHeroSection .kka157-hero-art img{
    content:url("assets/hero-art-responsive-173.png?v=008.6.174")!important;
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:44% center!important;
  }
}

/* ============================================================
   Build 008.6.174 — BROWSER ZOOM-OUT STABILITY LOCK
   Problem fixed: browser zoom below 100% makes the CSS viewport wider.
   The approved Public layout was therefore stretching past its 1484px
   master width while fixed-height cards stayed short, so artwork/text
   appeared squeezed or cropped.

   The approved desktop canvas is now capped at 1484 CSS pixels and centered
   only when the effective viewport becomes wider than the master. At normal
   widths (including 100% zoom) the locked 173 composition is untouched.
   ============================================================ */
@media (min-width:1485px){
  body.kka-guest{
    --kka174-public-master-width:1484px;
    background:#fff!important;
  }

  body.kka-guest #publicHeader.kka157-header,
  body.kka-guest #landingScreen.kka157-landing{
    width:var(--kka174-public-master-width)!important;
    max-width:var(--kka174-public-master-width)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* Keep every approved inner rail/card dimension driven by the 1484px
     master canvas instead of the enlarged CSS viewport produced by zoom-out. */
  body.kka-guest #publicHeroSection.kka157-hero{
    width:100%!important;
    max-width:100%!important;
  }
}