:root { --ink:#111a34; --green:#155dff; --green-dark:#102b70; --lime:#ffc400; --cream:#f5f9ff; --paper:#ffffff; --peach:#fff1d2; --sky:#e3f6f1; --coral:#00b990; --muted:#64718a; --line:rgba(17,26,52,.15); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans Thai","DM Sans",Tahoma,sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
.announcement { min-height:42px; display:flex; align-items:center; justify-content:center; gap:34px; padding:7px 24px; color:#f5ffe6; background:var(--green-dark); font-size:14px; font-weight:600; }
.announcement p { margin:0; }.announcement a { text-decoration:underline; text-underline-offset:3px; }.announcement a span { margin-left:5px; }.spark { color:var(--lime); margin-right:7px; }
.site-header { position:sticky; top:0; z-index:10; height:80px; display:flex; align-items:center; padding:0 clamp(22px,5vw,80px); background:rgba(255,255,255,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:800; letter-spacing:0; }.brand-mark,.app-logo { display:block; flex:none; object-fit:contain; }.brand-mark { width:60px; height:60px; }.main-nav { display:flex; align-items:center; gap:clamp(20px,3vw,46px); margin-left:auto; margin-right:clamp(22px,4vw,65px); font-size:15px; font-weight:600; }.main-nav a:hover { color:var(--green); }.header-cta,.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:16px; border-radius:6px; font-weight:700; transition:transform .2s ease,background .2s ease; }.header-cta { padding:12px 17px; color:white; background:var(--green); font-size:14px; }.header-cta:hover,.primary-button:hover { background:var(--green-dark); transform:translateY(-2px); }.menu-toggle { display:none; }
@media (max-width:1100px) and (min-width:701px) { .site-header { padding-right:22px; padding-left:22px; }.main-nav { gap:14px; margin-right:0; font-size:12px; }.main-nav a { white-space:nowrap; }.header-cta { display:none; } }
@keyframes home-rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes home-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@media (prefers-reduced-motion:no-preference) { html.motion-ready .motion-section { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }.motion-section.is-visible { opacity:1 !important; transform:translateY(0) !important; }.hero-intro .hero-copy { animation:home-rise .7s ease both; }.hero-intro .app-overview { animation:home-rise .7s .16s ease both; }.feature-card,.repay-qr-card,.preparation-list li { transition:transform .24s ease,box-shadow .24s ease; }.feature-card:hover { transform:translateY(-6px); box-shadow:0 17px 28px rgba(17,26,52,.1); }.repay-qr-card:hover { transform:translateY(-4px); }.preparation-list li:hover { transform:translateX(6px); }.download-art .app-logo { animation:home-float 4.8s ease-in-out infinite; }.quote-bubble { animation:home-float 5.5s .3s ease-in-out infinite; } }
.hero { position:relative; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:30px; min-height:650px; padding:76px clamp(22px,10vw,160px) 74px; overflow:hidden; background:var(--cream); }.hero-copy { position:relative; z-index:2; max-width:620px; }.eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:18px; color:var(--green-dark); font-size:14px; font-weight:800; }.dot { display:inline-block; width:11px; height:11px; border-radius:50%; background:var(--lime); }.dot.coral { background:var(--coral); }.dot.light { background:var(--lime); }.hero h1,.section h2,.calculator-section h2,.download-section h2 { margin:0; font-size:clamp(45px,5.1vw,76px); line-height:1.1; letter-spacing:0; font-weight:800; }.hero h1 em { color:var(--green); font-style:normal; }.hero-summary { max-width:520px; margin:25px 0 30px; color:var(--muted); font-size:18px; line-height:1.75; }.hero-actions { display:flex; align-items:center; gap:25px; }.primary-button { padding:16px 22px; color:white; background:var(--green); }.text-button { font-size:15px; font-weight:700; text-decoration:underline; text-underline-offset:5px; }.text-button span { margin-left:9px; color:var(--green); }.trust-row { display:flex; gap:23px; margin-top:47px; }.trust-row div { display:flex; flex-direction:column; gap:2px; padding-right:22px; border-right:1px solid var(--line); }.trust-row div:last-child { border:0; }.trust-row b { font-size:16px; }.trust-row span { color:var(--muted); font-size:12px; }
.hero.hero-intro { grid-template-columns:1fr; justify-items:center; align-content:center; min-height:610px; gap:38px; padding-top:78px; padding-bottom:56px; color:white; background:#0b6f63; border:0; box-shadow:none; text-align:center; }.hero-intro .hero-copy { max-width:760px; }.hero-intro .eyebrow { justify-content:center; color:#d9f5ef; }.hero-intro .eyebrow .dot { background:#ffc928; }.hero-intro h1 { color:white; font-size:clamp(50px,5vw,74px); line-height:1.05; }.hero-intro h1 em { color:#ffc928; font-style:normal; }.hero-intro .hero-summary { max-width:650px; margin-right:auto; margin-bottom:0; margin-left:auto; color:#d9f5ef; font-size:18px; }.hero-disclosure { justify-content:center; margin-top:28px; padding-top:0; border-top:0; color:#ffffff; font-size:14px; font-weight:700; }.hero-disclosure span { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:#17304d; background:#ffc928; font-size:12px; }.app-overview { display:grid; grid-template-columns:220px minmax(0,1fr); width:min(100%,1050px); padding-top:22px; border-top:1px solid rgba(255,255,255,.34); text-align:left; }.app-overview-head { display:flex; align-items:center; gap:11px; }.overview-logo { width:72px; height:72px; border-radius:14px; font-size:27px; }.app-overview-head b,.app-overview-head small { display:block; }.app-overview-head b { color:white; font-size:22px; }.app-overview-head small { margin-top:3px; color:#bce7df; font-size:11px; font-weight:700; }.overview-items { display:grid; grid-template-columns:repeat(3,1fr); }.overview-items div { display:flex; align-items:center; gap:12px; min-width:0; padding:4px 20px; border-left:1px solid rgba(255,255,255,.26); }.overview-items span { color:#ffc928; font:700 11px "DM Sans",sans-serif; }.overview-items b { color:white; font-size:13px; line-height:1.4; }
@media (max-width:700px) { .hero.hero-intro { grid-template-columns:1fr; justify-items:stretch; min-height:0; gap:32px; padding-top:56px; padding-bottom:34px; text-align:left; }.hero-intro .hero-copy { min-width:0; max-width:100%; }.hero-intro .eyebrow { justify-content:flex-start; }.hero.hero-intro h1 { font-size:42px; line-height:1.1; overflow-wrap:anywhere; }.hero-intro .hero-summary { min-width:0; max-width:100%; margin-left:0; color:#d9f5ef; font-size:15px; line-height:1.7; overflow-wrap:anywhere; word-break:break-all; }.hero-disclosure { justify-content:flex-start; margin-top:23px; font-size:12px; }.app-overview { grid-template-columns:1fr; width:auto; padding-top:20px; }.overview-items { grid-template-columns:1fr; margin-top:19px; border-top:1px solid rgba(255,255,255,.26); }.overview-items div { padding:11px 0; border-bottom:1px solid rgba(255,255,255,.26); border-left:0; }.overview-logo { width:60px; height:60px; border-radius:13px; font-size:25px; }.app-overview-head b { font-size:19px; } }
.hero-art { position:relative; height:490px; min-width:0; }.sun-disc { position:absolute; width:390px; height:390px; right:5%; top:35px; border-radius:50%; background:#dbe7ff; }.leaf { position:absolute; z-index:1; background:var(--green); border-radius:100% 0 100% 0; transform:rotate(28deg); }.leaf-one { left:11%; top:94px; width:70px; height:108px; }.leaf-two { right:0; bottom:44px; width:58px; height:87px; background:var(--coral); transform:rotate(145deg); }.doodle { position:absolute; z-index:4; font-size:34px; color:var(--coral); }.doodle-one { right:4%; top:36px; }.doodle-two { left:11%; bottom:10px; color:var(--green); }
.phone-shell { position:absolute; z-index:3; left:50%; top:0; width:248px; height:500px; padding:8px; border:5px solid #111a34; border-radius:38px; background:#111a34; box-shadow:0 25px 0 rgba(17,26,52,.13); transform:translateX(-50%) rotate(5deg); }.phone-speaker { position:absolute; top:11px; left:50%; z-index:4; width:72px; height:16px; border-radius:0 0 11px 11px; background:#111a34; transform:translateX(-50%); }.phone-screen { height:100%; overflow:hidden; padding:26px 15px 12px; border-radius:27px; background:#ffffff; }.app-top { display:flex; align-items:center; gap:7px; font-size:10px; font-weight:700; }.app-top img { width:21px; height:21px; border-radius:7px; }.app-top b { margin-left:auto; letter-spacing:1px; }.balance-panel { margin-top:19px; padding:15px; color:white; border-radius:14px; background:var(--green); }.balance-panel small,.balance-panel div span { font-size:9px; opacity:.85; }.balance-panel strong { display:block; margin:2px 0 10px; font:700 29px/1 "DM Sans",sans-serif; }.balance-panel div { display:flex; justify-content:space-between; padding-top:9px; border-top:1px solid rgba(255,255,255,.22); }.balance-panel div b { font-size:9px; color:var(--lime); }.quick-title { display:flex; justify-content:space-between; margin:18px 2px 10px; font-size:11px; font-weight:800; }.quick-title small { color:var(--green); font-size:9px; }.quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }.quick-actions div { display:grid; justify-items:center; gap:5px; padding:9px 2px; border-radius:11px; background:#edf4ff; color:#344568; font-size:8px; }.quick-actions i { display:grid; place-items:center; width:24px; height:24px; color:var(--green); border-radius:8px; background:#e1ebff; font-size:15px; font-style:normal; font-weight:800; }.quick-actions .icon-calendar { font-size:18px; }.notice { display:flex; align-items:center; gap:7px; margin-top:18px; padding:10px; border-radius:12px; background:#fff4d4; }.notice i { display:grid; place-items:center; flex:none; width:19px; height:19px; color:white; border-radius:50%; background:var(--coral); font-size:11px; font-style:normal; }.notice b,.notice small { display:block; line-height:1.4; }.notice b { font-size:8px; }.notice small { color:var(--muted); font-size:7px; }.screen-nav { display:flex; justify-content:space-around; margin-top:17px; padding-top:10px; border-top:1px solid #e3e9f4; color:#80908b; font-size:14px; }.screen-nav .active { color:var(--green); }.mini-card { position:absolute; z-index:5; border:1px solid rgba(17,26,52,.08); border-radius:11px; background:rgba(255,255,255,.94); box-shadow:0 12px 25px rgba(17,26,52,.12); }.balance-card { left:0; top:64px; padding:11px 13px; transform:rotate(-6deg); }.balance-card span,.balance-card small { display:block; font-size:9px; color:var(--muted); }.balance-card strong { display:block; margin:2px 0; color:var(--green); font:700 22px "DM Sans",sans-serif; }.repay-card { right:0; bottom:66px; display:flex; align-items:center; gap:8px; max-width:180px; padding:11px; transform:rotate(-5deg); }.repay-card i { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; color:white; background:var(--green); font-style:normal; }.repay-card span,.repay-card strong { display:block; line-height:1.4; }.repay-card span { font-size:8px; color:var(--muted); }.repay-card strong { font-size:9px; }
.intro-band { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:28px clamp(22px,10vw,160px); color:#17304d; background:#fff1c9; }.intro-band p { margin:0; font-size:18px; }.intro-band strong { color:#0c6e63; }.intro-marks { display:flex; align-items:center; gap:12px; color:#28546a; font-size:12px; }.intro-marks i { width:4px; height:4px; border-radius:50%; background:#0c9f88; }

.about-intro { padding:92px clamp(22px,10vw,160px) 72px; background:#fff; }.about-intro-label { display:flex; align-items:center; gap:9px; color:#0c6e63; font-size:13px; font-weight:800; }.about-intro-label .dot { width:10px; height:10px; background:#ffc928; }.about-intro-layout { display:grid; grid-template-columns:1.04fr .76fr; gap:clamp(48px,10vw,160px); align-items:end; margin-top:22px; }.about-intro h2 { max-width:620px; margin:0; color:var(--ink); font-family:"DM Sans","Noto Sans Thai",sans-serif; font-size:clamp(34px,3.7vw,54px); line-height:1.08; font-weight:800; }.about-intro h2 em { color:#0c9f88; font-style:normal; }.about-company-title>strong { display:block; max-width:300px; margin-top:23px; color:#19324c; font-size:18px; line-height:1.45; }.about-intro-copy { max-width:470px; color:#526681; font-size:16px; line-height:1.8; }.about-intro-copy p { margin:0; }.about-intro-copy p + p { margin-top:16px; }.company-emphasis { display:block; margin-bottom:10px; color:#163956; font-family:"DM Sans","Noto Sans Thai",sans-serif; font-size:18px; line-height:1.45; font-weight:800; }.about-intro + .intro-band { margin-top:0; }

.pico-license { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.08fr); gap:clamp(44px,8vw,130px); padding:94px clamp(22px,10vw,160px); background:#f2f8f7; }.pico-license-photo { align-self:start; padding:10px; border:1px solid #b8d8d1; background:#fff; box-shadow:0 18px 38px rgba(17,26,52,.09); }.pico-license-photo img { display:block; width:100%; height:auto; }.pico-license-content { max-width:650px; }.pico-license-label { display:flex; align-items:center; gap:9px; color:#0c6e63; font-size:13px; font-weight:800; }.pico-license-label .dot { width:10px; height:10px; background:#ffc928; }.pico-license h2 { margin:20px 0 0; color:#17304d; font-size:clamp(38px,4vw,58px); line-height:1.08; font-weight:800; }.pico-license h2 em { color:#0c9f88; font-style:normal; }.pico-license-intro { max-width:510px; margin:18px 0 26px; color:#59708a; font-size:16px; line-height:1.7; }.pico-license-list { margin:0; border-top:1px solid #b8d8d1; }.pico-license-list div { display:grid; grid-template-columns:180px minmax(0,1fr); gap:22px; padding:17px 0; border-bottom:1px solid #b8d8d1; }.pico-license-list dt { color:#678093; font-size:13px; }.pico-license-list dd { margin:0; color:#203850; font-size:14px; font-weight:800; line-height:1.55; overflow-wrap:anywhere; }.pico-license-list dd span { display:block; margin-top:4px; color:#59708a; font-size:13px; font-weight:600; }
@media (max-width:700px) { .pico-license { grid-template-columns:1fr; gap:34px; padding-top:62px; padding-bottom:62px; }.pico-license-photo { width:min(100%,480px); margin:0 auto; padding:7px; }.pico-license h2 { font-size:38px; }.pico-license-intro { font-size:15px; }.pico-license-list div { grid-template-columns:1fr; gap:5px; padding:14px 0; }.pico-license-list dd { font-size:13px; } }
@media (max-width:700px) { .about-intro { padding-top:60px; padding-bottom:54px; }.about-intro-layout { grid-template-columns:1fr; gap:22px; margin-top:17px; }.about-intro h2 { font-size:34px; }.about-company-title>strong { margin-top:17px; font-size:16px; }.about-intro-copy { min-width:0; font-size:15px; line-height:1.75; overflow-wrap:anywhere; word-break:break-all; }.company-emphasis { font-size:16px; } }

.hero.hero-intro { background:#0b6f63 url("./public/assets/bangkok-temple-hero.jpg") center 55% / cover no-repeat; }
.hero.hero-intro::before { content:""; position:absolute; inset:0; z-index:0; background:rgba(3,54,51,.72); }
.hero-intro .hero-copy,.hero-intro .app-overview { position:relative; z-index:1; }
.section { padding:100px clamp(22px,10vw,160px); }.section-heading { margin-bottom:47px; }.split-heading { display:grid; grid-template-columns:1.1fr .75fr; align-items:end; gap:80px; }.section h2,.calculator-section h2,.download-section h2 { font-size:clamp(34px,3.4vw,52px); }.split-heading p,.centered p,.faq-intro p { margin:0; color:var(--muted); font-size:16px; line-height:1.75; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.feature-card { position:relative; min-height:320px; padding:25px; border-radius:8px; overflow:hidden; }.feature-card.lime { background:#fff1c9; }.feature-card.peach { background:#edf4ff; }.feature-card.blue { background:#e1f8f1; }.feature-number { color:rgba(17,26,52,.55); font:700 13px "DM Sans",sans-serif; }.feature-icon { display:grid; place-items:center; width:66px; height:66px; margin:40px 0 22px; border-radius:50%; color:var(--ink); background:rgba(255,255,255,.78); font-size:34px; font-family:"DM Sans",sans-serif; font-weight:700; }.calendar-icon { font-size:46px; }.heart-icon { color:var(--coral); font-size:29px; }.feature-card h3 { margin:0 0 7px; font-size:21px; }.feature-card p { max-width:280px; margin:0; color:#52617d; font-size:14px; line-height:1.7; }.card-arrow { position:absolute; right:24px; bottom:22px; font-size:24px; }
.how-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(40px,8vw,120px); padding-top:46px; background:#f3f6fb; }.how-art { position:relative; height:510px; overflow:hidden; border-radius:8px; background:#fff0c8; }.paper-shape { position:absolute; border-radius:50%; }.shape-a { width:440px; height:440px; right:-130px; top:-80px; background:#eaf1ff; }.shape-b { width:330px; height:330px; bottom:-170px; left:-70px; background:#cdeee5; }.how-icon { position:absolute; right:65px; top:64px; color:var(--coral); font-size:63px; }.how-copy-graphic { position:absolute; left:11%; bottom:10%; }.how-copy-graphic span,.how-copy-graphic strong { display:block; }.how-copy-graphic span { margin-bottom:7px; font-size:17px; font-weight:700; }.how-copy-graphic strong { font-size:clamp(55px,5vw,76px); line-height:.92; }.how-copy-graphic i { display:grid; place-items:center; width:57px; height:57px; margin-top:27px; border-radius:50%; color:white; background:var(--green); font-size:26px; font-style:normal; }.steps { display:grid; gap:20px; padding:0; margin:35px 0 26px; list-style:none; }.steps li { display:flex; gap:17px; }.steps b { display:grid; place-items:center; flex:none; width:31px; height:31px; margin-top:2px; border:1px solid rgba(17,26,52,.32); border-radius:50%; color:var(--green); font:700 13px "DM Sans",sans-serif; }.steps h3 { margin:0 0 3px; font-size:17px; }.steps p { margin:0; color:var(--muted); font-size:14px; }.inline-link { color:var(--green); font-size:15px; font-weight:800; text-decoration:underline; text-underline-offset:6px; }.inline-link span { margin-left:10px; }
.calculator-section { display:grid; grid-template-columns:1fr .85fr; align-items:center; gap:clamp(50px,10vw,160px); padding:100px clamp(22px,10vw,160px); background:var(--paper); }.calculator-copy>p { max-width:570px; margin:22px 0; color:var(--muted); font-size:16px; line-height:1.75; }.calculator-note { display:flex; align-items:flex-start; gap:9px; max-width:500px; padding:14px 0; color:#64718a; border-top:1px solid var(--line); font-size:12px; }.calculator-note span { display:grid; place-items:center; flex:none; width:17px; height:17px; border:1px solid var(--green); border-radius:50%; color:var(--green); font:700 11px "DM Sans",sans-serif; }.calculator-card { padding:32px; border:1px solid var(--line); border-radius:8px; background:white; box-shadow:10px 10px 0 #dce8ff; }.calculator-card label { display:block; color:var(--muted); font-size:14px; }.calculator-card output { display:block; margin:4px 0 18px; color:var(--green); font:700 42px "DM Sans",sans-serif; }.calculator-card input { width:100%; accent-color:var(--green); }.range-labels { display:flex; justify-content:space-between; color:var(--muted); font:12px "DM Sans",sans-serif; }.term-selector { margin-top:29px; padding-top:25px; border-top:1px solid var(--line); }.term-selector>span { display:block; margin-bottom:12px; font-size:14px; font-weight:700; }.term-selector div { display:flex; gap:8px; }.term { flex:1; padding:9px 4px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:white; font-size:13px; cursor:pointer; }.term.active { color:white; border-color:var(--green); background:var(--green); }.calc-result { display:flex; justify-content:space-between; align-items:end; gap:14px; margin-top:28px; padding:17px; border-radius:6px; background:var(--cream); }.calc-result span,.calc-result strong { display:block; }.calc-result span { color:var(--muted); font-size:12px; }.calc-result strong { margin-top:2px; font:700 23px "DM Sans",sans-serif; }.calc-result small { max-width:116px; color:var(--muted); font-size:10px; text-align:right; }
.preparation-section { display:grid; grid-template-columns:.88fr 1fr; align-items:center; gap:clamp(50px,10vw,160px); padding:100px clamp(22px,10vw,160px); background:var(--paper); }.preparation-copy>p { max-width:570px; margin:22px 0; color:var(--muted); font-size:16px; line-height:1.75; }.preparation-note { display:flex; align-items:flex-start; gap:9px; max-width:500px; padding:14px 0; color:#64718a; border-top:1px solid var(--line); font-size:12px; }.preparation-note span { display:grid; place-items:center; flex:none; width:17px; height:17px; border:1px solid var(--green); border-radius:50%; color:var(--green); font:700 11px "DM Sans",sans-serif; }.preparation-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }.preparation-list li { display:grid; grid-template-columns:60px 1fr; gap:18px; padding:25px 0; border-bottom:1px solid var(--line); }.preparation-list b { color:#0c9f88; font:700 13px "DM Sans",sans-serif; }.preparation-list h3 { margin:0 0 6px; color:var(--ink); font-size:19px; }.preparation-list p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.preparation-section h2 { margin:0; color:var(--ink); font-size:clamp(34px,3.4vw,52px); line-height:1.1; font-weight:800; }
@media (max-width:700px) { .preparation-section { grid-template-columns:1fr; gap:30px; padding:67px 22px; }.preparation-copy>p { font-size:15px; }.preparation-list li { grid-template-columns:45px 1fr; gap:12px; padding:19px 0; }.preparation-list h3 { font-size:17px; } }
.repayment-section { background:#f3f6fb; }.centered { max-width:700px; margin-right:auto; margin-left:auto; text-align:center; }.centered .eyebrow { justify-content:center; }.centered p { margin-top:17px; }.repay-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:45px; border:1px solid var(--line); background:var(--line); }.repay-card { min-height:220px; padding:31px; background:#ffffff; }.repay-icon { display:grid; place-items:center; width:45px; height:45px; margin-bottom:28px; border-radius:50%; font-size:24px; font-family:"DM Sans",sans-serif; font-weight:800; }.qr { color:white; background:var(--green); }.bank { color:var(--ink); background:var(--lime); }.counter { color:white; background:var(--coral); font-size:14px; }.repay-card h3 { margin:0 0 7px; font-size:19px; }.repay-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.75; }
.repay-qr-card { display:grid; grid-template-columns:58px minmax(0,1fr) minmax(220px,.8fr); align-items:center; gap:22px; max-width:820px; margin:44px auto 0; padding:28px 31px; border:1px solid #c9dce2; background:#fff; box-shadow:8px 8px 0 #d7ece9; }.repay-qr-card .repay-icon { width:58px; height:58px; margin:0; font-size:31px; }.repay-qr-card h3 { margin:0 0 5px; color:var(--ink); font-size:20px; }.repay-qr-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }.repay-qr-note { padding-left:22px; border-left:1px solid #c9dce2; color:#31586a !important; font-size:13px !important; }
@media (max-width:700px) { .repay-qr-card { grid-template-columns:50px 1fr; gap:14px; margin-top:30px; padding:22px; box-shadow:6px 6px 0 #d7ece9; }.repay-qr-card .repay-icon { width:50px; height:50px; font-size:26px; }.repay-qr-card h3 { font-size:18px; }.repay-qr-card .repay-qr-note { grid-column:1 / -1; padding:15px 0 0; border-top:1px solid #c9dce2; border-left:0; } }
.faq-section { display:grid; grid-template-columns:.7fr 1.1fr; gap:clamp(50px,10vw,160px); }.faq-intro p { max-width:350px; margin:16px 0 28px; }.secondary-button { padding:12px 15px; border:1px solid var(--green); color:var(--green); font-size:14px; }.secondary-button:hover { color:white; background:var(--green); }.faq-list { border-top:1px solid var(--line); }.faq-list details { border-bottom:1px solid var(--line); }.faq-list summary { display:flex; justify-content:space-between; gap:22px; padding:19px 0; font-size:17px; font-weight:700; cursor:pointer; list-style:none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { color:var(--green); font-size:24px; font-weight:400; transition:transform .2s; }.faq-list details[open] summary span { transform:rotate(45deg); }.faq-list p { max-width:620px; margin:0 0 22px; color:var(--muted); font-size:14px; line-height:1.8; }
.contact-section { display:grid; grid-template-columns:.7fr 1.1fr; gap:clamp(50px,10vw,160px); align-items:start; padding:82px clamp(22px,10vw,160px); background:#e1f8f1; }.contact-section h2 { margin:15px 0 0; color:var(--ink); font-size:clamp(34px,3.4vw,52px); line-height:1.1; }.contact-intro p { max-width:390px; margin:16px 0 0; color:#52617d; font-size:16px; line-height:1.75; }.contact-details { margin:0; border-top:1px solid rgba(17,26,52,.18); }.contact-details div { display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; padding:21px 0; border-bottom:1px solid rgba(17,26,52,.18); }.contact-details dt { color:#52617d; font-size:14px; }.contact-details dd { margin:0; color:var(--ink); font-family:"DM Sans","Noto Sans Thai",sans-serif; font-size:15px; font-weight:700; line-height:1.55; overflow-wrap:anywhere; }.contact-details a { color:var(--green); text-decoration:underline; text-underline-offset:4px; }
.download-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:470px; padding:70px clamp(22px,10vw,160px); color:#eff4ff; background:var(--green-dark); overflow:hidden; }.download-section h2 { color:white; }.download-section p { max-width:410px; margin:19px 0 24px; color:#c9d8ff; font-size:16px; }.coming-soon { display:inline-flex; margin-top:18px; padding:7px 12px; border:1px solid rgba(255,255,255,.58); border-radius:4px; color:#ffc928; background:rgba(255,255,255,.08); font-size:15px; font-weight:800; }.download-art { position:relative; height:330px; }.arch { position:absolute; right:-8%; bottom:-52%; width:460px; height:460px; border:46px solid #00b990; border-radius:50%; }.download-art .app-logo { position:absolute; z-index:2; right:20%; top:50px; width:180px; height:180px; border-radius:45px; box-shadow:0 20px 0 rgba(0,0,0,.12); font-size:88px; }.quote-bubble { position:absolute; z-index:3; top:25px; right:2%; min-width:123px; padding:14px; color:var(--ink); border-radius:5px; background:#fff0c8; font-size:15px; font-weight:600; transform:rotate(5deg); }.quote-bubble strong { font-size:18px; }.quote-bubble span { position:absolute; right:10px; bottom:5px; color:var(--coral); font-size:20px; }
footer { padding:48px clamp(22px,10vw,160px) 22px; background:#111a34; color:#e7efff; }.footer-main { display:grid; grid-template-columns:1fr 1.1fr .8fr; gap:40px; align-items:start; padding-bottom:40px; }.footer-brand { color:white; }.footer-main>p { margin:0; color:#bbc8e2; font-size:13px; line-height:1.8; }.footer-links { display:grid; gap:7px; font-size:13px; }.footer-contact { display:grid; gap:7px; color:#bbc8e2; font-size:13px; line-height:1.6; }.footer-contact strong { color:white; font-family:"DM Sans","Noto Sans Thai",sans-serif; font-size:14px; overflow-wrap:anywhere; }.footer-contact a { color:#d7e8ff; overflow-wrap:anywhere; }.footer-contact a:hover,.footer-bottom a:hover { color:var(--lime); }.footer-bottom { display:flex; justify-content:space-between; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); color:#a8b8d5; font-size:11px; }.footer-bottom div { display:flex; gap:20px; }
@media (max-width:900px) { .site-header { height:70px; }.main-nav { gap:19px; margin-right:20px; }.header-cta { padding:10px 12px; }.hero { grid-template-columns:1fr .8fr; padding-top:62px; }.hero-art { height:455px; }.phone-shell { width:220px; height:442px; }.sun-disc { width:340px; height:340px; }.trust-row { gap:13px; }.split-heading,.calculator-section,.faq-section { gap:45px; }.section,.calculator-section { padding-top:78px; padding-bottom:78px; }.download-section { padding-top:58px; padding-bottom:58px; } }
@media (max-width:700px) { .announcement { justify-content:space-between; gap:10px; padding:8px 17px; font-size:11px; }.announcement p { max-width:250px; }.site-header { padding:0 20px; }.brand { font-size:19px; }.brand-mark { width:42px; height:42px; }.menu-toggle { display:grid; place-content:center; gap:5px; width:35px; height:35px; margin-left:auto; padding:0; border:0; background:transparent; cursor:pointer; }.menu-toggle i { display:block; width:21px; height:2px; background:var(--ink); transition:transform .2s; }.menu-toggle.is-open i:first-child { transform:translateY(3.5px) rotate(45deg); }.menu-toggle.is-open i:last-child { transform:translateY(-3.5px) rotate(-45deg); }.main-nav { position:absolute; top:69px; right:0; left:0; display:none; flex-direction:column; align-items:stretch; gap:0; margin:0; padding:10px 20px 18px; background:var(--paper); border-bottom:1px solid var(--line); }.main-nav.open { display:flex; }.main-nav a { padding:12px 0; border-bottom:1px solid rgba(17,26,52,.09); }.header-cta { display:none; }.hero { grid-template-columns:1fr; min-height:0; gap:23px; padding:54px 22px 26px; }.hero h1 { font-size:47px; }.hero-summary { margin:18px 0 22px; font-size:16px; }.hero-actions { gap:18px; }.primary-button { padding:14px 16px; font-size:14px; }.text-button { font-size:13px; }.trust-row { margin-top:33px; }.hero-art { width:min(100%,420px); height:435px; margin:auto; }.phone-shell { top:5px; width:211px; height:426px; }.sun-disc { width:310px; height:310px; top:53px; right:10px; }.balance-card { left:0; top:74px; }.repay-card { right:-5px; bottom:51px; }.intro-band { display:block; padding:23px 22px; }.intro-marks { flex-wrap:wrap; margin-top:13px; font-size:10px; }.section { padding:67px 22px; }.split-heading,.how-section,.calculator-section,.faq-section,.contact-section,.download-section { display:grid; grid-template-columns:1fr; gap:28px; }.split-heading { margin-bottom:32px; }.split-heading p { font-size:14px; }.feature-grid { grid-template-columns:1fr; gap:10px; }.feature-card { min-height:235px; }.feature-icon { margin:25px 0 17px; }.how-section { padding-top:22px; padding-bottom:67px; }.how-art { height:320px; }.shape-a { width:300px; height:300px; }.shape-b { width:240px; height:240px; }.how-icon { top:35px; right:45px; font-size:43px; }.how-copy-graphic strong { font-size:54px; }.how-copy-graphic i { width:45px; height:45px; margin-top:17px; }.calculator-section { padding:67px 22px; }.calculator-card { padding:23px 19px; box-shadow:6px 6px 0 #dce8ff; }.repay-grid { grid-template-columns:1fr; }.repay-card { min-height:0; padding:23px; }.repay-icon { margin-bottom:15px; }.faq-section { gap:32px; }.faq-list summary { font-size:15px; }.contact-section { gap:28px; padding:67px 22px; }.contact-intro p { font-size:15px; }.contact-details div { grid-template-columns:1fr; gap:5px; padding:16px 0; }.contact-details dd { font-size:14px; }.download-section { min-height:0; padding:58px 22px 0; }.download-art { height:256px; }.download-art .app-logo { top:44px; right:22%; width:132px; height:132px; border-radius:34px; font-size:66px; }.arch { width:330px; height:330px; border-width:36px; right:-18%; }.quote-bubble { top:20px; right:0; min-width:110px; font-size:13px; }.footer-main { grid-template-columns:1fr; gap:23px; }.footer-bottom { display:block; font-size:10px; }.footer-bottom div { margin-top:12px; gap:13px; } }

/* The supplied logo includes transparent padding, so its display box is larger than the visible mark. */
.site-header {
  height: 104px;
}

.brand-mark {
  width: 88px;
  height: 88px;
}

@media (max-width: 900px) {
  .site-header {
    height: 92px;
  }

  .brand-mark {
    width: 76px;
    height: 76px;
  }
}

@media (max-width: 700px) {
  .site-header {
    height: 84px;
  }

  .brand-mark {
    width: 66px;
    height: 66px;
  }

  .main-nav {
    top: 83px;
  }
}