:root {
    --navy:#0d2f63;
    --navy-deep:#082247;
    --teal:#0f9d86;
    --teal-deep:#087b6b;
    --gold:#d4a42a;
    --gold-deep:#c49317;
    --text:#173252;
    --muted:#71829a;
    --line:#d5e0ed;
    --line-soft:#d9e1eb;
    --soft:#f5f8fc;
    --white:#ffffff;
    --shadow:0 16px 42px rgba(10,37,74,.08);
    --max:1600px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Noto Sans Thai','Noto Sans',sans-serif;color:var(--text);background:transparent;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}

.register-page{position:relative;min-height:100vh;display:flex;flex-direction:column}
.page-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:
radial-gradient(circle at 88% 85%,rgba(15,157,134,.10),transparent 22%),
radial-gradient(circle at 82% 92%,rgba(13,47,99,.13),transparent 28%),
linear-gradient(180deg,#fbfdff 0%,#f4f8fc 100%)}

.topbar,.page-shell,.page-footer{position:relative;z-index:1}
.topbar{height:64px;background:#fff;border-bottom:1px solid #e0e8f2;padding:6px 18px}
.topbar-inner{width:100%;height:100%;margin:0;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px;min-width:0;justify-content:flex-start;flex:0 1 auto}
.brand img{width:48px;height:48px;object-fit:contain;display:block;flex:0 0 auto}
.brand span{display:grid;gap:4px;min-width:0}
.brand strong{display:inline-flex;line-height:1;font-size:1.05rem;font-weight:800;white-space:nowrap}
.brand strong b{color:var(--navy)}
.brand strong em{color:var(--teal);font-style:normal}
.brand strong i{color:var(--gold);font-style:normal}
.brand small{color:var(--muted);font-size:.72rem}
.topbar-actions{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.95rem;margin-left:auto;justify-content:flex-end;white-space:nowrap;flex:0 1 auto}
.topbar-actions a{padding:8px 16px;border:1px solid var(--navy);border-radius:999px;color:var(--navy);font-weight:700;background:#fff}

.page-shell{width:min(var(--max),100%);margin:0 auto;padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.alert-box{margin-bottom:18px;padding:16px 20px;border:1px solid rgba(206,63,63,.18);border-radius:18px;background:#fff8f8;box-shadow:var(--shadow)}
.alert-box strong{color:#b83232}
.alert-box ul{margin:8px 0 0 18px;padding:0;color:#963c3c}

.plans-wrap{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:20px 16px 18px;display:flex;flex-direction:column;flex:1}
.plans-heading{margin-bottom:16px}
.plans-heading span{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;background:#edf8f5;border:1px solid rgba(15,157,134,.14);color:var(--teal-deep);font-size:.78rem;font-weight:800;letter-spacing:.08em;margin-bottom:10px}
.plans-heading h1{margin:0;color:var(--navy);font-size:2rem;line-height:1.05}
.plan-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch}
.plan-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;padding:22px 17px 18px;border:1px solid var(--line-soft);border-radius:22px;background:#fff;box-shadow:0 4px 14px rgba(10,37,74,.03);transition:transform .24s ease, box-shadow .24s ease, background-color .24s ease, border-color .24s ease}
.plan-card:hover{transform:translateY(-8px);box-shadow:0 18px 38px rgba(10,37,74,.12);background:#fbfdff;border-color:#cdd8e6}
.plan-card.tone-premium{background:#f8fcfb;border-color:rgba(15,157,134,.28)}
.plan-card.tone-premium:hover{background:#eefaf7;border-color:rgba(15,157,134,.42)}
.plan-card.tone-elite{background:#fffdf8;border-color:rgba(212,164,42,.34)}
.plan-card.tone-elite:hover{background:#fffaf0;border-color:rgba(212,164,42,.46)}
.plan-topline{min-height:30px;display:flex;align-items:center}
.plan-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;min-height:26px;border-radius:999px;background:#f7edd0;color:#82661f;font-size:.72rem;font-weight:800;line-height:1;white-space:nowrap}
.plan-card.tone-premium .plan-badge{background:#e8f8f4;color:var(--teal-deep)}
.plan-card.tone-elite .plan-badge{background:#e9f8f1;color:var(--teal-deep)}
.plan-card h2{margin:16px 0 6px;color:var(--navy);font-size:1.45rem;line-height:1.08;min-height:3.1rem}
.plan-original{min-height:24px;color:#8e9db1;font-size:.88rem;display:flex;align-items:center;gap:4px;white-space:nowrap}
.plan-original del{color:#c86b6b}
.plan-price{margin-top:8px;color:var(--teal);font-size:1.95rem;font-weight:800;line-height:1.06;white-space:nowrap;min-height:2.2em;display:flex;align-items:flex-end}
.plan-summary{margin:14px 0 14px;min-height:96px;color:var(--muted);line-height:1.5;font-size:.93rem}
.plan-features{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:var(--text);font-size:.91rem;min-height:0}
.plan-features li{display:grid;grid-template-columns:18px 1fr;gap:7px;align-items:start;line-height:1.42}
.plan-features li::before{content:'✓';color:var(--teal);font-weight:800}
.plan-button{margin-top:auto;width:100%;min-height:48px;border:1px solid #cfd7e2;border-radius:999px;padding:12px 16px;background:#fff;color:var(--navy);font-weight:800;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease}
.plan-button:hover,.plan-button:focus-visible{transform:translateY(-1px);border-color:var(--navy);background:var(--navy);color:#fff;box-shadow:0 10px 22px rgba(13,47,99,.14);outline:none}
.plan-button.is-recommend:hover,.plan-button.is-recommend:focus-visible{border-color:var(--teal);background:var(--teal);color:#fff;box-shadow:0 10px 22px rgba(15,157,134,.18)}
.plan-button.is-best:hover,.plan-button.is-best:focus-visible{border-color:var(--gold-deep);background:var(--gold);color:#fff;box-shadow:0 10px 22px rgba(212,164,42,.2)}

.contact-row{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding-top:16px;color:var(--muted);font-size:.95rem;text-align:center;flex-wrap:wrap}
.contact-row span{color:var(--muted)}
.contact-row a{color:var(--navy);font-weight:800}
.contact-row .contact-qr{width:50px;height:50px;padding:4px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 7px 18px rgba(10,37,74,.08)}
.contact-row .contact-qr img{width:100%;height:100%;display:block;object-fit:contain;border-radius:8px}
.page-footer{text-align:center;color:var(--muted);font-size:.9rem;padding:10px 20px 22px;margin-top:auto}

.modal-backdrop{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(8,21,45,.46);backdrop-filter:blur(7px)}
.modal-backdrop.is-visible{display:flex}
.modal-panel,.success-modal{position:relative;width:min(760px,100%);max-height:92vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:28px;box-shadow:0 28px 72px rgba(6,20,44,.25);padding:28px 28px 24px}
.modal-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border:0;border-radius:50%;background:#eef4fb;color:var(--navy);font-size:1.7rem;cursor:pointer}
.modal-head{padding-right:46px}
.modal-kicker,.success-kicker{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;background:#edf8f5;color:var(--teal-deep);font-size:.78rem;font-weight:800;letter-spacing:.08em}
.modal-head h2,.success-modal h2{margin:14px 0 8px;color:var(--navy);font-size:2rem;line-height:1.06}
.modal-head h2 span{color:var(--teal)}
.modal-head p{margin:0;color:var(--muted)}
.modal-head p strong{color:var(--gold)}
.modal-form{margin-top:22px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.field{display:grid;gap:8px}
.field-full{grid-column:1/-1}
.field span{color:var(--navy);font-weight:700;font-size:.95rem}
.field input,.field textarea{width:100%;border:1px solid #c9d6e7;border-radius:15px;background:#f7faff;color:var(--text);padding:13px 14px;outline:none;transition:border-color .18s ease,box-shadow .18s ease}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus{border-color:rgba(15,157,134,.55);box-shadow:0 0 0 3px rgba(15,157,134,.12)}
.paid-only.is-hidden,.trial-note.is-hidden{display:none}
.trial-note{margin-top:18px;padding:16px 18px;border:1px solid rgba(15,157,134,.24);border-radius:18px;background:linear-gradient(180deg,#f0fbf8,#fbfffe)}
.trial-note strong{display:block;color:var(--teal-deep);margin-bottom:6px}
.trial-note p{margin:0;color:var(--muted);line-height:1.55}
.modal-actions,.success-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 20px;border-radius:999px;font-weight:800;cursor:pointer;text-decoration:none}
.primary-button{border:1px solid var(--navy);background:var(--navy);color:#fff}
.secondary-button{border:1px solid var(--line);background:#fff;color:var(--navy)}

.success-modal{text-align:center;width:min(660px,100%)}
.success-icon{width:72px;height:72px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--teal),var(--navy));color:#fff}
.success-icon svg{width:40px;fill:currentColor}
.success-modal>p{margin:0 auto;color:var(--muted);line-height:1.65;max-width:560px}
.credential-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:22px;text-align:left}
.credential-grid label{display:grid;gap:7px}
.credential-grid label>span{color:var(--navy);font-weight:800}
.credential-grid label>div{display:grid;grid-template-columns:1fr auto;gap:8px}
.credential-grid input{min-width:0;border:1px solid var(--line);border-radius:14px;background:#f7faff;padding:12px 13px;color:var(--navy);font-weight:800}
.credential-grid button{border:0;border-radius:12px;background:var(--teal);color:#fff;padding:0 14px;font-weight:700;cursor:pointer}
.access-note{margin-top:18px;padding:16px 18px;border:1px solid rgba(15,157,134,.22);border-radius:18px;background:#f3fbf8;text-align:left}
.access-note strong{display:block;color:var(--teal-deep);margin-bottom:5px}
.access-note p{margin:0;color:var(--muted);line-height:1.55}
.success-actions{justify-content:center}

@media(max-width:1500px){
    .page-shell{padding-left:16px;padding-right:16px}
    .plan-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
    .plan-card{padding:20px 18px 18px;min-height:632px}
    .plan-card h2{font-size:1.36rem}
    .plan-price{font-size:1.82rem}
}
@media(max-width:1380px){
    .plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .plan-card{min-height:580px}
    .plan-card h2{min-height:auto}
    .plan-summary{min-height:88px}
    .plan-features{min-height:118px}
}
@media(max-width:900px){
    .topbar{padding:10px 16px}
    .topbar-inner{gap:16px}
    .page-shell{padding:18px 16px 16px}
    .plans-wrap{padding:18px 16px 16px}
    .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    .plan-card{min-height:548px;padding:18px 16px 16px}
    .plan-price{font-size:1.72rem}
}
@media(max-width:640px){
    .topbar{padding:10px 12px}
    .topbar-inner{align-items:center;gap:10px}
    .brand{gap:9px;min-width:0}
    .brand img{width:54px}
    .brand span{min-width:0}
    .brand strong{font-size:.96rem;white-space:nowrap}
    .brand small{font-size:.7rem;white-space:nowrap}
    .topbar-actions{gap:8px;font-size:.78rem}
    .topbar-actions span{display:none}
    .topbar-actions a{padding:8px 13px;font-size:.8rem}
    .page-shell{padding:14px 10px 14px}
    .plans-wrap{min-height:auto;padding:16px 14px 14px;border-radius:20px}
    .plans-heading{margin-bottom:14px}
    .plans-heading span{font-size:.7rem;padding:7px 12px;margin-bottom:8px}
    .plans-heading h1{font-size:1.45rem}
    .plan-grid{grid-template-columns:1fr;gap:14px}
    .plan-card{min-height:auto;width:100%;padding:18px 16px 16px;border-radius:18px;overflow:hidden}
    .plan-card h2{margin-top:12px;font-size:1.45rem;min-height:auto;overflow-wrap:anywhere}
    .plan-original{white-space:normal;min-height:0}
    .plan-price{font-size:1.8rem;white-space:normal;min-height:0;display:block;overflow-wrap:anywhere}
    .plan-summary{min-height:0;margin:14px 0 12px;font-size:.9rem;line-height:1.5;overflow-wrap:anywhere}
    .plan-features{gap:9px;font-size:.88rem;min-height:0}
    .plan-features li{grid-template-columns:16px minmax(0,1fr);gap:6px;line-height:1.42;overflow-wrap:anywhere}
    .plan-button{margin-top:18px;min-height:44px;font-size:.92rem;white-space:normal}
    .contact-row{margin-top:14px;gap:6px;font-size:.86rem;justify-content:center}
    .modal-backdrop{padding:10px}
    .modal-panel,.success-modal{padding:24px 16px 18px;border-radius:22px}
    .modal-head h2,.success-modal h2{font-size:1.55rem}
    .form-grid,.credential-grid{grid-template-columns:1fr}
    .modal-actions,.success-actions{flex-direction:column}
    .primary-button,.secondary-button{width:100%}
    .page-footer{padding:10px 16px 18px;font-size:.82rem}
}

.plan-grid{grid-auto-rows:1fr}.plan-card{height:100%}.plan-features{min-height:0!important}.plan-card .plan-button{margin-top:auto}

.plan-grid .plan-card{min-height:0!important;height:100%!important}.plan-grid .plan-features{min-height:0!important}

@media (min-width:1200px) and (orientation:landscape){
    html,body{height:100%;min-height:0;overflow:hidden}
    .register-page{height:100dvh;min-height:0;overflow:hidden}
    .topbar{flex:0 0 64px}
    .page-shell{min-height:0;padding:12px 18px 8px;overflow:hidden}
    .plans-wrap{height:100%;min-height:0;padding:15px 14px 10px;overflow:hidden}
    .plans-heading{margin-bottom:11px}
    .plans-heading span{padding:6px 12px;margin-bottom:7px}
    .plans-heading h1{font-size:1.7rem}
    .plan-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr);flex:1;min-height:0;gap:10px}
    .plan-card{min-height:0!important;height:100%!important;padding:15px 14px 13px;border-radius:19px}
    .plan-topline{min-height:24px}.plan-badge{min-height:22px;padding:5px 9px;font-size:.67rem}
    .plan-card h2{min-height:0;margin:11px 0 5px;font-size:1.28rem}
    .plan-original{min-height:20px;font-size:.78rem}
    .plan-price{min-height:1.7em;margin-top:5px;font-size:1.68rem}
    .plan-summary{display:-webkit-box;min-height:0;margin:9px 0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:.82rem;line-height:1.42}
    .plan-features{min-height:0!important;gap:6px;font-size:.8rem}.plan-features li{line-height:1.34}
    .plan-button{min-height:40px;margin-top:auto;padding:9px 12px;font-size:.82rem}
    .contact-row{flex:0 0 43px;margin:0;padding-top:7px;font-size:.84rem}.contact-row .contact-qr{width:38px;height:38px;border-radius:10px}
    .page-footer{display:none}
}

@media (min-width:1200px) and (orientation:landscape) and (max-height:800px){
    .page-shell{padding-top:8px}.plans-wrap{padding-top:11px}.plans-heading{display:flex;align-items:center;gap:12px;margin-bottom:8px}.plans-heading span{margin:0}.plans-heading h1{font-size:1.45rem}
    .plan-card{padding:11px 12px 10px}.plan-card h2{font-size:1.08rem}.plan-price{font-size:1.4rem}.plan-summary{margin:6px 0;font-size:.73rem;-webkit-line-clamp:2}.plan-features{gap:4px;font-size:.72rem}.plan-button{min-height:36px;padding:7px 9px}.contact-row{flex-basis:36px}.contact-row .contact-qr{width:31px;height:31px}
}

/* Register revision 3.2 — unified 52px header and full-width footer */
.topbar{height:52px!important;padding:4px 14px!important;flex:0 0 52px!important}.brand img{width:40px!important;height:40px!important}.brand strong{font-size:1rem!important}.brand small{font-size:.64rem!important}.topbar-actions{font-size:.82rem!important}.topbar-actions a{padding:6px 13px!important}
.page-footer{width:100%!important;min-height:30px!important;margin:0!important;padding:6px 16px!important;display:grid!important;place-items:center!important;border-top:1px solid #dce6ef!important;background:rgba(255,255,255,.94)!important;font-size:.76rem!important;flex:0 0 30px!important}
@media (min-width:1200px) and (orientation:landscape){.topbar{flex-basis:52px!important}.page-shell{padding-top:8px!important}.plans-wrap{padding-top:11px!important}.page-footer{display:grid!important}.contact-row{flex-basis:34px!important}}
@media(max-width:640px){.topbar{height:52px!important;padding:4px 9px!important}.brand img{width:40px!important;height:40px!important}.brand strong{font-size:.88rem!important}.brand small{font-size:.58rem!important}.page-footer{font-size:.7rem!important;padding:6px 10px!important}}