@font-face { font-family:"Sarabun"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/sarabun-400-thai.woff2") format("woff2"); unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family:"Sarabun"; font-style:normal; font-weight:400; font-display:swap; src:url("/fonts/sarabun-400-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Sarabun"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/sarabun-500-thai.woff2") format("woff2"); unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family:"Sarabun"; font-style:normal; font-weight:500; font-display:swap; src:url("/fonts/sarabun-500-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Sarabun"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/sarabun-600-thai.woff2") format("woff2"); unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family:"Sarabun"; font-style:normal; font-weight:600; font-display:swap; src:url("/fonts/sarabun-600-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Sarabun"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/sarabun-700-thai.woff2") format("woff2"); unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family:"Sarabun"; font-style:normal; font-weight:700; font-display:swap; src:url("/fonts/sarabun-700-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

h1:focus {
    outline: none;
}

:root { --ink:#17211c; --muted:#536159; --line:#dde3df; --paper:#f2f3ed; --green:#155f3e; --acid:#d8ff65; --font-ui:"Sarabun","Leelawadee UI",Tahoma,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--paper); font-synthesis:none; }
body { margin:0; color:var(--ink); font-family:var(--font-ui); background:var(--paper); text-rendering:optimizeLegibility; }
button,a,input,select { font:inherit; }
h1,h2,p { margin-top:0; }
.marketing-page { min-height:100vh; overflow-x:clip; background:var(--paper); }
.marketing-nav { height:72px; max-width:1240px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ced5cf; }
.marketing-nav a { color:var(--ink); text-decoration:none; font-size:12px; font-weight:800; }
.marketing-brand { display:flex; align-items:center; gap:10px; letter-spacing:.12em; }
.marketing-brand img { display:block; width:34px; height:34px; object-fit:contain; }
.hero { max-width:1240px; margin:auto; padding:80px 28px 76px; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:80px; }
.eyebrow { margin:0 0 7px; color:#536159; font:700 10px/1.2 Arial,sans-serif; letter-spacing:.15em; }
.hero h1 { max-width:760px; margin:0 0 24px; font:700 clamp(44px,4.6vw,64px)/1.14 var(--font-ui); letter-spacing:-.025em; }
.hero-lead { max-width:660px; margin-bottom:28px; color:#5f6b64; font-size:17px; line-height:1.75; }
.hero-cta { display:inline-block; padding:14px 19px; border-radius:8px; color:#17231d; background:var(--acid); box-shadow:0 8px 24px #65821628; text-decoration:none; font-size:13px; font-weight:900; }
.hero-actions,.sample-actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.secondary-cta { display:inline-block; padding:13px 0 11px; border-bottom:2px solid #8b9890; color:var(--ink); text-decoration:none; font-size:12px; font-weight:900; }
.hero-cta:active,.secondary-cta:active { transform:translateY(1px); }
.risk-card { padding:26px; border:1px solid #3b5146; border-radius:14px; color:#eef4ef; background:#17271f; box-shadow:22px 28px 0 var(--acid); }
.risk-top { display:flex; align-items:end; justify-content:space-between; margin-bottom:22px; color:#b3c0b8; font-size:11px; }
.risk-top strong { color:var(--acid); font:700 46px/1 Georgia,serif; }.risk-top small { font-size:13px; color:#92a098; }
.risk-line { display:grid; grid-template-columns:44px 1fr; gap:9px; padding:14px 0; border-top:1px solid #35483f; }
.risk-line b { grid-row:1/3; align-self:start; padding:4px; border-radius:20px; text-align:center; font-size:9px; }.risk-line span { font-size:11px; }.risk-line em { color:#92a098; font-size:9px; font-style:normal; }
.risk-line.danger b { color:#ffc6c1; background:#65312f; }.risk-line.warn b { color:#ffe4a5; background:#604c23; }.risk-line.ok b { color:#c4f1d6; background:#26533b; }
.risk-card>p { margin:16px 0 0; color:#91a198; font-size:9px; text-align:center; }
.proof-strip { display:grid; grid-template-columns:repeat(4,1fr); max-width:1240px; margin:auto; border-top:1px solid #cbd2cd; border-bottom:1px solid #cbd2cd; }
.proof-strip span { padding:20px; border-right:1px solid #cbd2cd; text-align:center; color:#5e6962; font-size:11px; font-weight:700; }.proof-strip span:last-child { border:0; }
.editorial { position:relative; max-width:1240px; margin:0 auto; padding:64px 28px 0; }
.editorial-image { display:block; width:100%; height:auto; border:1px solid var(--line); }
.editorial-panel { position:absolute; left:64px; bottom:0; width:min(400px,42%); padding:34px 32px; border:1px solid var(--line); border-bottom:0; background:var(--paper); }
.editorial-panel h2 { margin:0 0 12px; font:700 clamp(28px,3vw,40px)/1.14 Georgia,"Noto Serif Thai",serif; letter-spacing:-.03em; }
.editorial-panel p:last-child { margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.public-pricing { max-width:1240px; margin:0 auto; padding:100px 28px 20px; }
.pricing-heading { padding:28px 0 36px; display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; border-top:1px solid #aeb9b2; }
.pricing-heading h2,.public-faq h2 { margin:0; font:700 clamp(34px,4vw,52px)/1.04 Georgia,"Noto Serif Thai",serif; letter-spacing:-.035em; }
.pricing-heading>p { max-width:610px; margin:4px 0 0; color:#5f6d65; font-size:15px; line-height:1.8; }
.pricing-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #9eaaa3; border-left:1px solid #9eaaa3; background:#f7f8f3; }
.pricing-grid article { min-height:390px; padding:30px 28px; display:flex; flex-direction:column; border-right:1px solid #9eaaa3; border-bottom:1px solid #9eaaa3; }
.pricing-grid article.preferred { color:#eff4f0; background:#17271f; box-shadow:inset 0 5px 0 var(--acid); }
.pricing-grid article.volume { background:#e7eee8; box-shadow:inset 0 5px 0 var(--green); }
.pricing-grid article>small { color:#56645c; font:700 9px/1.2 Arial,sans-serif; letter-spacing:.15em; }.pricing-grid article.preferred>small { color:var(--acid); }
.pricing-grid .plan-tag { min-height:24px; margin:14px 0 -38px; color:var(--green); font-size:10px; font-weight:800; line-height:1.35; }
.pricing-grid h3 { margin:54px 0 12px; font:700 24px/1.15 Georgia,"Noto Serif Thai",serif; }
.pricing-grid strong { font:700 40px/1 Georgia,serif; }.pricing-grid strong span { font:700 12px/1 "Noto Sans Thai",sans-serif; }
.pricing-grid p { margin:9px 0 25px; color:#59675f; font-size:10px; }.pricing-grid article.preferred p { color:#aebbb3; }
.pricing-grid ul { margin:0 0 30px; padding:0; list-style:none; color:#56645c; font-size:11px; line-height:1.75; }.pricing-grid article.preferred ul { color:#c0ccc4; }.pricing-grid li { padding:7px 0; border-top:1px solid #d9dfdb; }.pricing-grid article.preferred li { border-color:#34483e; }
.pricing-grid a { margin-top:auto; padding:12px 0 8px; border-bottom:2px solid currentColor; color:var(--green); text-decoration:none; font-size:11px; font-weight:900; }.pricing-grid article.preferred a { color:var(--acid); }
/* The two plan actions stack in every card at every width, so the free snapshot keeps
   its underlined primary treatment and the formal quotation reads as a quieter framed
   second step. The frame is drawn from currentColor so the same rule holds on the dark
   preferred card without restating either palette. */
.pricing-grid .plan-actions { margin-top:auto; display:grid; gap:11px; }
.pricing-grid .plan-actions>a { margin-top:0; }
.pricing-grid .plan-quote-cta { min-height:44px; padding:9px 14px; display:flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb,currentColor 38%,transparent); border-radius:8px; line-height:1.5; text-align:center; }
.pricing-grid .plan-quote-cta:hover { transform:translateY(-3px); border-color:transparent; color:#f5f7f3; background:var(--green); box-shadow:0 10px 24px rgb(31 68 49 / .16); }
.pricing-grid article.preferred .plan-quote-cta:hover { color:#17271f; background:var(--acid); }
.pricing-grid .plan-quote-cta:active { transform:translateY(1px); }
.pricing-grid .plan-quote-cta:focus-visible { outline:3px solid color-mix(in srgb,var(--green) 42%,transparent); outline-offset:3px; }
.pricing-note { margin:15px 0 0; color:#536159; font-size:9px; text-align:right; }
.volume-case { max-width:1184px; margin:72px auto 24px; display:grid; grid-template-columns:1.08fr .92fr; border:1px solid #aeb9b2; background:#edf1ec; }
.volume-case-media { min-height:100%; overflow:hidden; border-right:1px solid #aeb9b2; background:#dfe6e0; }
.volume-case-media img { display:block; width:100%; height:100%; min-height:560px; object-fit:cover; object-position:center; filter:saturate(.86) contrast(1.04); }
.volume-case-copy { padding:clamp(36px,5vw,66px); display:flex; flex-direction:column; justify-content:center; }
.volume-case-copy h2 { max-width:620px; margin:0 0 18px; font:700 clamp(34px,3.8vw,52px)/1.22 var(--font-ui); letter-spacing:-.032em; }
.volume-case-copy>p { max-width:58ch; margin:0 0 30px; color:#506058; font-size:14px; line-height:1.85; }
.volume-math { margin:0 0 30px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #9fac9f; border-bottom:1px solid #9fac9f; }
.volume-math div { padding:18px 16px 18px 0; }
.volume-math div+div { padding-left:16px; border-left:1px solid #b7c2bb; }
.volume-math dt { color:#5b6961; font-size:10px; font-weight:700; line-height:1.5; }
.volume-math dd { margin:7px 0 0; color:#153c2a; font-size:18px; font-weight:800; line-height:1.35; white-space:nowrap; }
.volume-terms { margin-bottom:30px; display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.volume-terms p { margin:0; }
.volume-terms strong,.volume-terms span { display:block; }
.volume-terms strong { margin-bottom:7px; color:#213f30; font-size:12px; }
.volume-terms span { color:#5a6860; font-size:11px; line-height:1.75; }
.volume-actions { display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; }
.volume-quote-cta { align-self:flex-start; padding:14px 20px; border:1px solid var(--green); border-radius:8px; color:var(--green); text-align:center; text-decoration:none; font-size:12px; font-weight:900; transition:transform .26s cubic-bezier(.16,1,.3,1),background-color .26s ease,color .26s ease; }
.volume-quote-cta:hover { transform:translateY(-3px); color:#f5f7f3; background:var(--green); }
.volume-quote-cta:active { transform:translateY(1px); }
.volume-quote-cta:focus-visible { outline:3px solid color-mix(in srgb,var(--green) 42%,transparent); outline-offset:4px; }
.volume-cta { align-self:flex-start; min-width:196px; padding:14px 20px; border-radius:8px; color:#f5f7f3; background:var(--green); box-shadow:0 9px 22px rgb(21 95 62 / .18); text-align:center; text-decoration:none; font-size:12px; font-weight:900; white-space:nowrap; transition:transform .26s cubic-bezier(.16,1,.3,1),box-shadow .26s ease,background-color .26s ease; }
.volume-cta:hover { transform:translateY(-3px); background:#104b32; box-shadow:0 13px 28px rgb(21 95 62 / .22); }
.volume-cta:active { transform:translateY(1px); }
.volume-cta:focus-visible { outline:3px solid color-mix(in srgb,var(--green) 42%,transparent); outline-offset:4px; }
.guide-discovery { max-width:1184px; margin:86px auto 26px; padding:52px 0 0; display:grid; grid-template-columns:minmax(260px,.74fr) minmax(0,1.26fr); gap:clamp(46px,8vw,108px); border-top:1px solid #9eaaa3; }
.guide-discovery-intro { padding-left:clamp(0px,2vw,24px); }
.guide-discovery-intro h2 { max-width:470px; margin:0 0 18px; font:700 clamp(34px,3.8vw,50px)/1.24 var(--font-ui); letter-spacing:-.03em; }
.guide-discovery-intro p { max-width:47ch; margin:0 0 27px; color:#536159; font-size:14px; line-height:1.9; }
.guide-discovery-hub { display:inline-block; padding:12px 0 8px; border-bottom:2px solid var(--green); color:var(--green); text-decoration:none; font-size:12px; font-weight:900; line-height:1.55; white-space:nowrap; transition:transform .26s cubic-bezier(.16,1,.3,1),color .26s ease; }
.guide-discovery-links { display:grid; border-top:1px solid #b5c0b9; }
.guide-discovery-links a { min-height:114px; padding:22px 54px 22px 0; position:relative; display:grid; align-content:center; gap:6px; border-bottom:1px solid #b5c0b9; color:var(--ink); text-decoration:none; transition:padding-left .26s cubic-bezier(.16,1,.3,1),color .26s ease,background-color .26s ease; }
.guide-discovery-links a::after { content:"↗"; position:absolute; right:4px; top:50%; color:#6c7b72; font-size:19px; line-height:1; transform:translateY(-50%); transition:transform .26s cubic-bezier(.16,1,.3,1),color .26s ease; }
.guide-discovery-links span { font-size:17px; font-weight:800; line-height:1.55; }
.guide-discovery-links small { max-width:58ch; color:#66736b; font-size:11px; font-weight:500; line-height:1.8; }
.guide-discovery-hub:hover { transform:translateX(3px); color:#0e4930; }
.guide-discovery-links a:hover { padding-left:12px; color:var(--green); background:#e9eee8; }
.guide-discovery-links a:hover::after { color:var(--green); transform:translate(3px,-50%); }
.guide-discovery-hub:focus-visible,.guide-discovery-links a:focus-visible { outline:3px solid color-mix(in srgb,var(--green) 40%,transparent); outline-offset:4px; }
.snapshot { max-width:1060px; margin:90px auto; padding:0 28px; display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; }
.snapshot h2 { margin-bottom:14px; font:700 38px/1.16 Georgia,"Noto Serif Thai",serif; letter-spacing:-.02em; }.snapshot-lede>p:last-child { color:#536159; line-height:1.75; }
.start-route > .hero,.start-route > .proof-strip,.start-route > .editorial,.start-route > .public-pricing,.start-route > .volume-case { display:none; }
.start-route .snapshot { min-height:auto; margin:0 auto; padding-top:clamp(54px,7vh,82px); padding-bottom:clamp(54px,9vh,110px); align-items:start; }
.start-route .snapshot h1 { max-width:430px; margin:0 0 16px; font:700 clamp(42px,5vw,64px)/1.08 var(--font-ui); letter-spacing:-.03em; }
/* The description closes the lede block, so its metrics are pinned here instead of
   inherited from the root-route rule above, and the 26px rhythm to the supporting
   items comes from .start-intent-outcomes alone. */
.start-route .snapshot-lede > p:not(.eyebrow) { max-width:410px; margin-bottom:0; color:var(--ink); font-size:15px; line-height:1.6; }
.start-intent-outcomes { max-width:430px; margin:26px 0 0; padding:0; list-style:none; border-top:1px solid #c6d0ca; }
.start-intent-outcomes li { padding:12px 0 12px 20px; border-bottom:1px solid #c6d0ca; color:#3f5147; font-size:12px; font-weight:600; line-height:1.55; position:relative; }
.start-intent-outcomes li::before { content:""; position:absolute; left:0; top:20px; width:8px; height:2px; background:var(--green); }
.start-review-visual { display:block; width:100%; max-width:430px; height:auto; margin:28px 0 0; border:1px solid #c8d1cb; object-fit:cover; aspect-ratio:4/3; }
/* The review photo is intentionally pale, so the figure carries a restrained
   contrast lift and a ruled caption instead of reading as an empty rectangle. */
.start-review-figure { max-width:430px; margin:0; }
.start-review-figure .start-review-visual { border-color:#aab5ae; background-color:#e8ece6; filter:contrast(1.06) saturate(.92) brightness(.985); }
.start-review-figure figcaption { margin-top:11px; padding-top:10px; border-top:1px solid #c6d0ca; color:#5c6a62; font-size:11px; line-height:1.9; }
.start-review-figure figcaption b { color:#3f5147; font-weight:800; }
.start-form-jump { display:none; }
/* Every figure in this panel comes from the payment plan catalogue, so the requested
   pack is restated on /start without a second copy of the published price. */
.quote-request { margin:26px 0 0; padding:22px 24px; display:grid; gap:13px; border:1px solid #b9c5bd; border-radius:12px; background:#f1f5f0; }
.quote-request>small { color:#68766e; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.quote-request>strong { color:#153c2a; font-size:19px; line-height:1.4; }
.quote-request dl { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 20px; }
.quote-request dt { color:#5b6961; font-size:10px; font-weight:700; line-height:1.5; }
.quote-request dd { margin:6px 0 0; color:#153c2a; font-size:16px; font-weight:800; line-height:1.4; }
.quote-request>p { margin:0; color:#506058; font-size:11px; line-height:1.85; }
.start-assurance { max-width:1060px; margin:-54px auto 74px; padding:26px 28px; display:grid; grid-template-columns:minmax(210px,.72fr) minmax(0,1.28fr); gap:48px; align-items:start; border-top:1px solid #c6d0ca; border-bottom:1px solid #c6d0ca; }
.start-assurance>div:first-child { display:grid; gap:7px; }.start-assurance small { color:#68766e; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.start-assurance strong { max-width:260px; font-size:18px; line-height:1.35; }
.start-assurance-facts { display:grid; grid-template-columns:1fr 1fr; gap:12px 28px; }.start-assurance-facts span { color:#536159; font-size:11px; line-height:1.65; }.start-assurance-facts a { grid-column:1/3; width:max-content; max-width:100%; padding:8px 0 6px; border-bottom:2px solid var(--green); color:var(--green); text-decoration:none; font-size:11px; font-weight:900; transition:transform .26s cubic-bezier(.16,1,.3,1),color .26s ease; }.start-assurance-facts a:hover { transform:translateX(3px); color:#0e4930; }.start-assurance-facts a:focus-visible { outline:3px solid color-mix(in srgb,var(--green) 35%,transparent); outline-offset:4px; }
.lead-form { scroll-margin-top:24px; padding:28px; display:grid; grid-template-columns:1fr 1fr; gap:16px; border:1px solid #cbd4ce; border-radius:12px; background:#fff; }
.lead-form label { display:grid; gap:6px; color:#5e6962; font-size:10px; font-weight:800; }
.lead-form input,.lead-form select { width:100%; padding:11px 12px; border:1px solid #d3d9d5; border-radius:7px; color:var(--ink); background:#fafbf9; font-size:12px; line-height:1.6; }
.lead-form-intro { grid-column:1/3; margin:0; padding:0 0 15px; display:grid; gap:5px; border-bottom:1px solid #d7ded9; }.lead-form-intro strong { color:#17271f; font-size:17px; line-height:1.45; }.lead-form-intro span { color:#637068; font-size:11px; line-height:1.7; }
.lead-form-primary { grid-column:1/3; }.lead-form-primary input { min-height:48px; border-color:#9caaa1; background:#fff; font-size:14px; }
.lead-optional { grid-column:1/3; padding:0 0 13px; border-bottom:1px solid #d7ded9; }.lead-optional summary { width:max-content; max-width:100%; color:#405248; font-size:11px; font-weight:800; line-height:1.7; cursor:pointer; list-style-position:outside; }.lead-optional summary small { color:#77837c; font-weight:500; }.lead-optional-grid { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }.lead-optional[open] summary { color:var(--green); }.lead-optional summary:focus-visible { outline:3px solid color-mix(in srgb,var(--green) 35%,transparent); outline-offset:4px; }
.lead-optional-upload .tor-file { margin-top:14px; }
/* Custom upload control: the real InputFile stays in the DOM as a transparent
   overlay so it keeps click, keyboard and accept behaviour, while the visible
   action and selection state are Thai text on generous line boxes. */
.lead-form .tor-file { grid-column:1/3; }
.tor-file { display:grid; gap:9px; padding:14px; border:1px dashed #aebbb3; border-radius:8px; background:#f4f7f4; }
.tor-file-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.tor-file-heading small,.tor-file-limit { color:#718077; font-size:10px; font-weight:500; line-height:1.75; }
.tor-file-control { position:relative; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tor-file input[type=file] { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; opacity:0; cursor:pointer; }
.tor-file-action { padding:9px 15px; border:1px solid #5f6f66; border-radius:7px; color:#17271f; background:#fff; font-size:11px; font-weight:900; line-height:1.75; white-space:nowrap; }
.tor-file-state { min-width:0; font-size:11px; font-weight:600; line-height:1.75; overflow-wrap:anywhere; }
.tor-file-state.empty { color:#718077; }
.tor-file-state.chosen { color:#17271f; }
.tor-file-control:hover .tor-file-action { border-color:#17271f; box-shadow:0 6px 16px rgb(31 68 49 / .12); }
.tor-file input[type=file]:active ~ .tor-file-action { border-color:#0e4930; background:var(--acid); }
.tor-file input[type=file]:focus-visible ~ .tor-file-action { outline:3px solid color-mix(in srgb,var(--green) 45%,transparent); outline-offset:3px; }
.lead-form .consent { grid-column:1/3; display:flex; align-items:flex-start; gap:8px; line-height:1.5; }.consent input { width:auto; margin-top:2px; }
.lead-submit { grid-column:1/3; padding:13px; border:0; border-radius:8px; color:#fff; background:#17271f; font-weight:900; line-height:1.45; cursor:pointer; }.lead-submit:active { transform:translateY(1px); }.lead-submit:disabled { opacity:.6; }
.lead-submit-note { grid-column:1/3; margin-top:-9px; color:#68756d; font-size:10px; line-height:1.6; text-align:center; }
.honey { position:absolute; left:-9999px; }.form-error,.validation-summary-errors { grid-column:1/3; margin:0; color:#a8332e; font-size:11px; }
.lead-success { padding:34px; border:1px solid #8caf99; border-radius:12px; background:#eef8f1; }.lead-success strong { font-size:22px; }.lead-success p { margin:10px 0 0; color:#52645a; }
.lead-success .tor-file { margin:18px 0 8px; border-color:#8caf99; background:#fff; }
.lead-success small { display:block; color:#607168; }.upload-button { width:100%; margin-top:14px; }
.queue-status { display:flex; align-items:center; gap:9px; margin-top:18px; padding:11px 13px; border-radius:8px; color:#54635a; background:#e2ece5; font-size:11px; font-weight:800; }.queue-status i { width:9px; height:9px; border-radius:50%; background:#9aac9f; animation:pulse 1.5s infinite; }.queue-status.processing i { background:#a56708; }.queue-status.complete i { background:#16804e; animation:none; }.queue-status.failed i { background:#a8332e; animation:none; }
.report-section { max-width:1060px; margin:0 auto 100px; padding:42px 28px; border-top:1px solid #cbd2cd; }.report-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }.report-heading h2 { margin:0; font:700 38px/1.1 Georgia,"Noto Serif Thai",serif; }.report-heading>span { color:#6d7971; font-size:10px; }
.report-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); margin:30px 0; border:1px solid #ccd4cf; border-radius:10px; background:#fff; overflow:hidden; }.report-summary article { padding:18px; display:grid; gap:5px; border-right:1px solid #e0e5e2; }.report-summary strong { font:700 28px/1 Georgia,serif; }.report-summary span { color:#6d7971; font-size:10px; }
.report-list { display:grid; gap:10px; }.report-list article { padding:20px 22px; border:1px solid #d7ddd9; border-radius:10px; background:#fff; }.report-list article>div { display:flex; align-items:center; gap:10px; }.report-list b { color:#6e7972; font-size:10px; }.report-list h3 { margin:13px 0 9px; font-size:14px; }.report-list blockquote { margin:0 0 10px; padding-left:12px; border-left:2px solid #b8c5bd; color:#66736b; font-size:11px; line-height:1.65; }.report-list small { color:#879089; font-size:9px; }
.risk-type { padding:4px 7px; border-radius:99px; color:#32483c; background:#e6ece8; font-size:9px; font-weight:900; }.risk-type.mandatory { color:#922c28; background:#ffe2df; }.risk-type.deadline { color:#87550b; background:#fff0ce; }.risk-type.financial { color:#31568c; background:#e5efff; }.report-more { margin:18px 0 0; color:#69756e; font-size:10px; text-align:center; }
.checkout-card { margin-top:32px; padding:26px; display:grid; grid-template-columns:1fr auto; gap:18px 28px; align-items:center; border:1px solid #294d3a; border-radius:12px; background:#17271f; color:#f0f5f1; }.checkout-card h3 { margin:0 0 7px; font:700 24px/1.2 Georgia,"Noto Serif Thai",serif; }.checkout-card p { margin:0; color:#a9b8af; font-size:11px; }.checkout-card>strong { color:var(--acid); font:700 30px/1 Georgia,serif; }.checkout-card form,.checkout-card>.lead-submit,.checkout-card>.quote-button,.checkout-card>.quotation-ready,.checkout-card>small,.checkout-card>.form-error { grid-column:1/3; }.checkout-card form .lead-submit { width:100%; color:#17271f; background:var(--acid); }.checkout-card>small { color:#9caaa2; }.checkout-card>.quote-request-note { grid-column:1/3; padding:11px 14px; border:1px solid #2f5f45; border-radius:8px; color:#dbe7de; font-size:11px; line-height:1.8; }
.snapshot>.quote-first { grid-column:1/-1; margin-top:26px; }.quote-first>strong { font-size:26px; }.quote-first>small:last-child { color:#8fa096; }
.quote-button { padding:12px; border:1px solid #70847a; border-radius:8px; color:#f0f5f1; background:transparent; font-weight:900; cursor:pointer; }.quote-button:active { transform:translateY(1px); }.quote-button:disabled { opacity:.55; cursor:not-allowed; }.quotation-ready { padding:11px 13px; border-radius:8px; color:#17271f; background:var(--acid); text-align:center; text-decoration:none; font-size:11px; font-weight:900; }
.billing-profile { grid-column:1/3; padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:13px; border:1px solid #385347; border-radius:9px; background:#102018; }.billing-profile label { display:grid; gap:6px; color:#b9c6be; font-size:10px; }.billing-profile input:not([type=checkbox]),.billing-profile textarea { width:100%; padding:10px 11px; border:1px solid #52665b; border-radius:6px; color:#f0f5f1; background:#17271f; resize:vertical; }.billing-profile .billing-toggle { grid-column:1/3; display:flex; align-items:center; gap:8px; color:#f0f5f1; font-weight:800; }.billing-toggle input { width:auto; }.billing-profile .billing-address,.billing-profile .billing-hint { grid-column:1/3; }.billing-profile label small,.billing-profile .billing-hint { color:#91a198; font-size:9px; }.billing-profile .billing-hint { color:#ffd0a1; }
.payment-plans { grid-column:1/3; display:grid; border:1px solid #385347; border-radius:9px; overflow:hidden; }.payment-plans label { padding:14px 16px; display:grid; grid-template-columns:18px minmax(120px,1fr) auto; gap:4px 12px; align-items:center; border-bottom:1px solid #385347; background:#102018; cursor:pointer; }.payment-plans label:last-child { border-bottom:0; }.payment-plans label.selected { background:#1c3327; box-shadow:inset 3px 0 0 var(--acid); }.payment-plans input { grid-row:1/3; accent-color:#b3df39; }.payment-plans b { color:#f0f5f1; font:700 16px/1.2 "Noto Sans Thai","Leelawadee UI",sans-serif; }.payment-plans span { color:#d3ddd7; font-size:10px; text-align:right; }.payment-plans small { grid-column:2/4; color:var(--acid); font-size:10px; }
.credit-redemption { margin-top:26px; padding:22px; display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; border:1px solid #8fb99f; border-radius:12px; background:#eef7f1; }.credit-redemption h3 { margin:2px 0 6px; font:700 22px/1.2 Georgia,"Noto Serif Thai",serif; }.credit-redemption p { margin:0; }.credit-redemption .lead-submit { color:#17271f; background:var(--acid); }.credit-redemption .form-error { grid-column:1/3; }
.credit-balance { margin:18px 0 0; padding:14px 16px; display:flex; justify-content:space-between; gap:12px; border:1px solid #a9c5b4; border-radius:8px; background:#eef7f1; }.credit-balance span { color:#526159; font-size:11px; }
.payment-status-page { min-height:100vh; padding:36px; background:var(--paper); }.payment-status-page>.marketing-brand { color:var(--ink); text-decoration:none; }.payment-status-card { max-width:640px; margin:12vh auto 0; padding:42px; border:1px solid #cbd4ce; border-radius:14px; background:#fff; }.payment-status-card h1 { margin:0 0 16px; font:700 42px/1.05 Georgia,"Noto Serif Thai",serif; }.payment-status-card p { color:#627068; line-height:1.7; }.payment-status-card .lead-submit { width:100%; margin-top:12px; }
.download-report,.payment-return-home { display:block; text-align:center; text-decoration:none; }.payment-return-home { width:100%; margin-top:20px; color:#fff; }.payment-status-card small { display:block; margin-top:13px; color:#7a857e; line-height:1.6; }
.repeat-order { margin-top:24px; padding:20px; border:1px solid #cbd4ce; border-radius:10px; background:#f4f7f5; }.repeat-order strong { font:700 18px/1.2 Georgia,"Noto Serif Thai",serif; }.repeat-order p { margin:6px 0 10px; font-size:11px; }.repeat-order .lead-submit { color:#17271f; background:var(--acid); }
.ops-page { min-height:100vh; padding:28px; background:#101a15; color:#eff5f0; }.ops-page>header { max-width:1240px; margin:auto; display:flex; justify-content:space-between; align-items:center; }.ops-page .marketing-brand { color:#eff5f0; text-decoration:none; }.ops-page>header small { color:#819087; letter-spacing:.14em; }.ops-login { max-width:460px; margin:16vh auto; padding:36px; border:1px solid #33463c; border-radius:12px; background:#17271f; }.ops-login h1,.ops-heading h1 { margin:0 0 22px; font:700 46px/1 Georgia,serif; }.ops-login input { width:100%; margin-bottom:12px; padding:12px; border:1px solid #42564b; border-radius:7px; color:#fff; background:#101a15; }.ops-login .lead-submit { width:100%; }.ops-heading { max-width:1240px; margin:70px auto 24px; display:flex; align-items:end; justify-content:space-between; }.ops-heading span { color:#829188; font-size:10px; }.ops-kpis { max-width:1240px; margin:auto; display:grid; grid-template-columns:repeat(5,1fr); border:1px solid #33463c; border-radius:12px; overflow:hidden; }.ops-kpis article { min-height:135px; padding:22px; display:grid; align-content:space-between; border-right:1px solid #33463c; background:#17271f; }.ops-kpis article:last-child { border:0; }.ops-kpis small,.ops-kpis span { color:#84938a; font-size:9px; }.ops-kpis strong { color:var(--acid); font:700 32px/1 Georgia,serif; }.ops-grid { max-width:1240px; margin:20px auto; display:grid; grid-template-columns:1.15fr .85fr; gap:20px; }.ops-grid>article { padding:22px; border:1px solid #33463c; border-radius:12px; background:#17271f; overflow:auto; }.ops-grid h2 { font:700 20px/1.2 Georgia,serif; }.ops-grid table { width:100%; border-collapse:collapse; font-size:10px; }.ops-grid th,.ops-grid td { padding:10px 8px; border-top:1px solid #304239; text-align:left; white-space:nowrap; }.ops-grid th { color:#839188; }
.ops-funnel { max-width:1240px; margin:20px auto; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #33463c; border-radius:12px; background:#17271f; }.ops-funnel div { display:grid; gap:5px; }.ops-funnel small,.ops-funnel span { color:#84938a; font-size:9px; }.ops-funnel strong { color:#eff5f0; font:700 24px/1 Georgia,serif; }.ops-funnel i { color:#607068; font-style:normal; }
.readiness { max-width:1240px; margin:0 auto 20px; padding:18px 22px; border:1px solid #6b3d36; border-radius:12px; background:#2a1b18; }.readiness.ready { border-color:#3e674f; background:#17271f; }.readiness header { display:flex; justify-content:space-between; margin-bottom:13px; font-size:11px; letter-spacing:.08em; }.readiness header span { color:#99a69f; }.readiness>div { display:flex; gap:8px; flex-wrap:wrap; }.readiness>div span { padding:6px 8px; border-radius:5px; font-size:9px; }.readiness .pass { color:#bfe8ca; background:#23402f; }.readiness .fail { color:#ffc3b8; background:#482921; }
@keyframes pulse { 50% { opacity:.35; transform:scale(.75); } }
.public-faq { max-width:1060px; margin:20px auto 100px; padding:46px 28px 0; display:grid; grid-template-columns:.72fr 1.28fr; gap:80px; border-top:1px solid #aeb9b2; }
.faq-list details { padding:20px 0; border-bottom:1px solid #c7d0ca; }.faq-list details:first-child { padding-top:0; }
.faq-list summary { cursor:pointer; font:700 18px/1.45 Georgia,"Noto Serif Thai",serif; }.faq-list summary::marker { color:var(--green); }
.faq-list p { max-width:620px; margin:13px 0 0; color:#5e6d64; font-size:12px; line-height:1.8; }
.marketing-footer { max-width:1240px; margin:auto; padding:28px; display:flex; gap:22px; justify-content:space-between; border-top:1px solid #cbd2cd; color:#536159; font-size:10px; }.marketing-footer nav { display:flex; gap:14px; flex-wrap:wrap; }.marketing-footer a,.checkout-card>small a,.consent a { color:inherit; text-underline-offset:3px; }
.analytics-consent { position:fixed; z-index:1000; right:22px; bottom:22px; width:min(560px,calc(100vw - 44px)); padding:20px; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:end; color:#f4f1e9; background:rgba(18,29,23,.97); border:1px solid rgba(198,255,62,.38); box-shadow:0 24px 70px rgba(8,16,12,.3); backdrop-filter:blur(16px); }.analytics-consent[hidden] { display:none; }.analytics-consent strong { font-size:16px; }.analytics-consent p { margin:6px 0 0; color:#bdc8c0; font-size:12px; line-height:1.65; }.analytics-consent-actions { display:flex; gap:8px; }.analytics-consent button { min-height:42px; padding:8px 14px; border:1px solid #718078; color:#edf3ef; background:transparent; font:600 12px/1.45 Sarabun,sans-serif; cursor:pointer; }.analytics-consent button:last-child { border-color:var(--acid); color:#17271f; background:var(--acid); }
.privacy-page { max-width:760px; margin:auto; padding:80px 24px; line-height:1.8; }.privacy-page a { color:var(--green); }.privacy-page h1 { margin:36px 0 24px; font:700 40px/1.1 Georgia,"Noto Serif Thai",serif; }.privacy-page h2 { margin:38px 0 8px; font:700 24px/1.25 Georgia,"Noto Serif Thai",serif; }.privacy-page p { color:#536159; }.privacy-page small { color:#77827b; }
.guide-page { min-height:100vh; background:var(--paper); }.guide-hero { max-width:1000px; margin:auto; padding:92px 28px 62px; }.guide-hero h1,.guide-article>h1 { max-width:900px; margin:0 0 24px; font:700 clamp(42px,6vw,72px)/1 Georgia,"Noto Serif Thai",serif; letter-spacing:-.04em; }.guide-hero>p:last-child,.guide-library-copy>p:last-child,.guide-intro { max-width:760px; color:#607068; font-size:17px; line-height:1.8; }.guide-library-hero { max-width:1180px; display:grid; grid-template-columns:.86fr 1.14fr; gap:58px; align-items:end; }.guide-library-hero img,.guide-detail-visual { display:block; width:100%; height:auto; border:1px solid #c7d0ca; object-fit:cover; }.guide-library-hero img { aspect-ratio:16/9; }.guide-detail-visual { margin:34px 0 38px; aspect-ratio:16/9; }.guide-grid { max-width:1180px; margin:0 auto 100px; padding:0 28px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.guide-grid>a { min-height:260px; padding:26px; display:flex; flex-direction:column; border:1px solid #ccd4cf; border-radius:12px; color:var(--ink); background:#fff; text-decoration:none; }.guide-grid small { color:#728078; font-size:9px; font-weight:800; letter-spacing:.1em; }.guide-grid h2 { margin:42px 0 12px; font:700 25px/1.2 Georgia,"Noto Serif Thai",serif; }.guide-grid p { color:#68756e; font-size:11px; line-height:1.7; }.guide-grid span { margin-top:auto; color:var(--green); font-size:11px; font-weight:900; }.official-note { max-width:900px; margin:0 auto 100px; padding:36px; border:1px solid #b9c9bf; border-radius:12px; background:#e8f0ea; }.official-note h2 { font:700 28px/1.2 Georgia,"Noto Serif Thai",serif; }.official-note p { color:#56675e; line-height:1.75; }.official-note div { display:flex; gap:20px; flex-wrap:wrap; }.official-note a,.guide-source a { color:var(--green); font-size:11px; font-weight:800; }.guide-article { max-width:900px; margin:auto; padding:90px 28px; }.guide-warning { margin:38px 0; padding:20px 22px; display:grid; gap:6px; border-left:4px solid #c58a22; background:#fff5dd; }.guide-warning strong { font-size:12px; }.guide-warning span { color:#725c35; font-size:11px; line-height:1.7; }.checklist { margin:60px 0; padding:0; list-style:none; }.checklist li { padding:30px 0; display:grid; grid-template-columns:60px 1fr; gap:24px; border-top:1px solid #cbd3ce; }.checklist li>span { color:#aabbaf; font:700 42px/1 Georgia,serif; }.checklist h2 { margin:0 0 9px; font:700 25px/1.2 Georgia,"Noto Serif Thai",serif; }.checklist p { color:#59675f; line-height:1.75; }.checklist small { display:block; padding:10px 12px; color:#355b47; background:#e2ede6; font-size:10px; line-height:1.6; }.guide-cta { margin:70px 0 36px; padding:32px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-radius:14px; color:#eef4ef; background:#17271f; }.guide-cta h2 { margin:0 0 8px; font:700 28px/1.2 Georgia,"Noto Serif Thai",serif; }.guide-cta p { margin:0; color:#aab8b0; font-size:11px; line-height:1.7; }.guide-cta .hero-cta { flex:none; }.guide-source { color:#6d7871; font-size:10px; line-height:1.7; }
.guide-breadcrumb { margin:0 0 24px; display:flex; align-items:center; gap:9px; color:#748078; font-size:10px; font-weight:700; letter-spacing:.03em; }.guide-breadcrumb a { color:#355b47; text-decoration:none; }.guide-breadcrumb a:hover { text-decoration:underline; }
.sample-hero { max-width:1240px; margin:auto; padding:76px 28px 64px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:88px; }
.sample-hero-copy h1 { max-width:700px; margin:0 0 22px; font:700 clamp(46px,6vw,78px)/.96 Georgia,"Noto Serif Thai",serif; letter-spacing:-.05em; }
.sample-hero-copy>p:not(.eyebrow) { max-width:610px; margin-bottom:26px; color:#5f6b64; font-size:16px; line-height:1.7; }
.sample-hero-copy .sample-hero-note { max-width:510px; margin:15px 0 0; padding-left:14px; border-left:2px solid var(--acid); color:#526159; font-size:11px; font-weight:600; line-height:1.75; }
.sample-hero-side { display:grid; align-content:start; gap:24px; }
.sample-capture { display:grid; gap:13px; }.sample-capture>small { color:#5f6b64; font-size:9px; font-weight:800; letter-spacing:.18em; }.sample-capture>strong { max-width:420px; font:700 25px/1.28 Georgia,"Noto Serif Thai",serif; }.sample-capture>p { margin:0; padding-left:14px; border-left:2px solid var(--acid); color:#526159; font-size:10px; font-weight:600; line-height:1.75; }
.sample-context { padding:27px; border:1px solid #3b5146; border-radius:14px; color:#eef4ef; background:#17271f; box-shadow:18px 22px 0 var(--acid); }
.sample-context>strong { color:var(--acid); font:700 22px/1.2 Georgia,"Noto Serif Thai",serif; }.sample-context>p { margin:10px 0 25px; color:#b2c0b7; font-size:11px; line-height:1.7; }
.sample-context dl { margin:0; }.sample-context dl>div { padding:13px 0; display:grid; grid-template-columns:92px 1fr; gap:12px; border-top:1px solid #35483f; }.sample-context dt { color:#8fa097; font-size:9px; }.sample-context dd { margin:0; font-size:11px; line-height:1.55; }
.sample-overview { max-width:1100px; margin:50px auto 0; padding:52px 28px 0; border-top:1px solid #cbd2cd; }.sample-heading h2 { max-width:650px; margin:0; font:700 38px/1.15 Georgia,"Noto Serif Thai",serif; }.sample-heading>p { max-width:610px; margin:18px 0 0; color:#66736b; font-size:11px; line-height:1.75; }
.sample-scoreboard { margin:34px 0 24px; display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #ccd4cf; border-radius:12px; background:#fff; overflow:hidden; }.sample-scoreboard article { min-height:102px; padding:19px; display:grid; align-content:space-between; border-right:1px solid #e0e5e2; }.sample-scoreboard article:last-child { border:0; }.sample-scoreboard strong { font:700 31px/1 Georgia,serif; }.sample-scoreboard span { color:#6d7971; font-size:10px; }
.sample-matrix { max-width:1100px; margin:0 auto 70px; padding:0 28px; }.sample-row { display:grid; grid-template-columns:155px 1fr 130px; gap:28px; padding:26px 0; border-top:1px solid #cbd3ce; }.sample-row-meta { display:flex; align-content:flex-start; align-items:flex-start; gap:7px; flex-wrap:wrap; }.sample-row-meta b,.sample-row-meta>span:not(.risk-type) { color:#6c7870; font-size:9px; }.sample-row-main small { color:#6b776f; font-size:9px; font-weight:800; }.sample-row-main h3 { margin:7px 0 10px; font-size:14px; line-height:1.55; }.sample-row-main blockquote { margin:0; padding-left:13px; border-left:2px solid #b3c0b7; color:#657169; font-size:11px; line-height:1.7; }.sample-confidence { display:grid; align-content:start; justify-items:end; gap:5px; text-align:right; }.sample-confidence>span { color:#748078; font-size:9px; }.sample-confidence strong { font:700 25px/1 Georgia,serif; }.sample-confidence small { max-width:115px; color:#818a84; font-size:8px; line-height:1.45; }.risk-type.ok { color:#24633f; background:#dff2e6; }
.sample-conversion-band { max-width:1100px; margin:0 auto 70px; padding:34px 36px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:44px; align-items:center; border-top:1px solid #aabbb0; border-bottom:1px solid #aabbb0; }.sample-conversion-band h2 { max-width:640px; margin:0 0 10px; font-size:32px; }.sample-conversion-band p:not(.eyebrow) { max-width:650px; margin:0; color:#59685f; font-size:12px; line-height:1.75; }.sample-conversion-action { display:grid; gap:10px; justify-items:start; }.sample-conversion-action small { max-width:230px; color:#6a776f; font-size:9px; line-height:1.5; }.sample-mobile-cta { display:none; }
.sample-explainer { max-width:1044px; margin:0 auto 76px; padding:38px; display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; border-radius:14px; color:#eef4ef; background:#17271f; }.sample-explainer h2 { margin:0 0 12px; font:700 31px/1.15 Georgia,"Noto Serif Thai",serif; }.sample-explainer p { margin:0; color:#adbbb2; font-size:11px; line-height:1.75; }.sample-explainer dl { margin:0; }.sample-explainer dl>div { padding:13px 0; display:grid; grid-template-columns:120px 1fr; gap:16px; border-top:1px solid #35483f; }.sample-explainer dt { color:var(--acid); font-size:10px; font-weight:800; }.sample-explainer dd { margin:0; color:#c2cec6; font-size:10px; line-height:1.6; }
.quotation-page { min-height:100vh; padding:32px 20px 80px; color:#1d2822; background:#e7ebe7; }.quotation-toolbar { max-width:900px; margin:0 auto 18px; display:flex; align-items:center; justify-content:space-between; }.quotation-toolbar .marketing-brand { color:#1d2822; text-decoration:none; }.quotation-toolbar button { padding:10px 15px; border:1px solid #526159; border-radius:8px; color:#fff; background:#17271f; font-weight:800; white-space:nowrap; cursor:pointer; }.quotation-toolbar button:active { transform:translateY(1px); }
.quotation-sheet { max-width:900px; min-height:1120px; margin:auto; padding:58px 64px; border:1px solid #cbd3ce; border-radius:12px; background:#fff; box-shadow:0 18px 50px #27352d18; }.quotation-header { padding-bottom:28px; display:grid; grid-template-columns:1fr auto; gap:40px; border-bottom:3px solid #17271f; }.quotation-header p { margin:0 0 8px; color:#526159; font-size:10px; font-weight:900; letter-spacing:.13em; }.quotation-header h1 { margin:0; font:700 42px/1.1 Georgia,"Noto Serif Thai",serif; }.quotation-header>div>span { color:#77847d; font-size:11px; letter-spacing:.18em; }.quotation-header dl { min-width:245px; margin:0; }.quotation-header dl>div { padding:4px 0; display:grid; grid-template-columns:72px 1fr; gap:12px; }.quotation-header dt { color:#748078; font-size:10px; }.quotation-header dd { margin:0; font-size:11px; font-weight:800; text-align:right; }
.quotation-expired { margin:20px 0 0; padding:12px 14px; border-left:4px solid #a8332e; color:#7b302c; background:#fff0ee; font-size:11px; }.quotation-parties { padding:34px 0; display:grid; grid-template-columns:1fr 1fr; gap:48px; }.quotation-parties h2,.quotation-terms h2 { margin:0 0 9px; color:#68756e; font-size:10px; letter-spacing:.12em; }.quotation-parties strong { display:block; margin-bottom:8px; font-size:14px; }.quotation-parties p { margin:5px 0 0; color:#536159; font-size:10px; line-height:1.65; }
.quotation-items { border-top:1px solid #bfc9c2; border-bottom:1px solid #bfc9c2; }.quotation-item-head,.quotation-item { display:grid; grid-template-columns:1fr 100px 130px; gap:20px; align-items:start; }.quotation-item-head { padding:10px 12px; color:#eaf0eb; background:#17271f; font-size:9px; font-weight:800; }.quotation-item-head span:not(:first-child) { text-align:right; }.quotation-item { padding:24px 12px; }.quotation-item>div strong { font-size:14px; }.quotation-item p { max-width:500px; margin:7px 0 0; color:#647169; font-size:10px; line-height:1.65; }.quotation-item>span,.quotation-item>strong { font-size:11px; text-align:right; }
.quotation-totals { padding:24px 0 32px; display:grid; grid-template-columns:1fr 330px; }.quotation-totals dl { grid-column:2; margin:0; }.quotation-totals dl>div { padding:6px 0; display:flex; justify-content:space-between; gap:24px; color:#536159; font-size:11px; }.quotation-totals dd { margin:0; font-weight:800; }.quotation-totals .quotation-grand-total { margin-top:6px; padding-top:14px; border-top:2px solid #17271f; color:#17271f; font-size:15px; }.quotation-terms { padding:26px 0; border-top:1px solid #cbd3ce; }.quotation-terms ol { margin:0; padding-left:20px; color:#56645c; font-size:10px; line-height:1.9; }.quotation-footer { margin-top:62px; padding-top:20px; display:flex; justify-content:space-between; border-top:1px solid #cbd3ce; color:#68756e; font-size:10px; }.quotation-state { max-width:560px; margin:20vh auto; padding:34px; border:1px solid #cbd3ce; border-radius:12px; background:#fff; }.quotation-state strong { font-size:22px; }.quotation-state p { margin:10px 0 0; color:#68756e; }
/* Modern Thai typography and restrained cinematic motion. Sarabun's generous
   line box keeps Thai marks clear even when headings use tight visual rhythm. */
body,button,input,select,textarea { font-family:var(--font-ui); }
body :is(h1,h2,h3,strong,summary),.checklist li>span { font-family:var(--font-ui)!important; }
h1,h2,h3,summary { overflow:visible; line-height:1.28!important; letter-spacing:-.022em!important; text-wrap:balance; }
p,li,blockquote,label,small { text-wrap:pretty; }
.hero,.editorial,.pricing-grid { perspective:1200px; }
.hero-copy,.risk-card,.editorial-image,.editorial-panel,.pricing-grid article,.snapshot>div,.lead-form { backface-visibility:hidden; transform-style:preserve-3d; }
.hero-cta,.secondary-cta,.pricing-grid a,.lead-submit,.quote-button,.quotation-ready { transition:transform .26s cubic-bezier(.16,1,.3,1),box-shadow .26s ease,background-color .26s ease,color .26s ease; }
.hero-cta:hover,.pricing-grid a:hover,.lead-submit:hover:not(:disabled),.quotation-ready:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgb(31 68 49 / .16); }
.secondary-cta:hover,.quote-button:hover:not(:disabled) { transform:translateY(-2px); }
.risk-card { transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease; }
.risk-card:hover { transform:rotateX(1.5deg) rotateY(-2deg) translateY(-5px); box-shadow:24px 28px 0 color-mix(in srgb,var(--acid) 82%,transparent); }
.pricing-heading { grid-template-columns:1fr; gap:14px; }
.pricing-heading>p { max-width:65ch; }
.pricing-grid { grid-template-columns:.84fr 1.08fr .94fr 1.02fr; align-items:stretch; }

@media (prefers-reduced-motion:no-preference) {
    .hero-copy { animation:torready-copy-in .85s cubic-bezier(.16,1,.3,1) both; }
    .risk-card { animation:torready-card-in 1.05s .12s cubic-bezier(.16,1,.3,1) both; }
    .proof-strip span { animation:torready-proof-in .65s cubic-bezier(.16,1,.3,1) both; }
    .proof-strip span:nth-child(2) { animation-delay:.07s; }
    .proof-strip span:nth-child(3) { animation-delay:.14s; }
    .proof-strip span:nth-child(4) { animation-delay:.21s; }
    .tor-file-action { transition:border-color .26s ease,box-shadow .26s ease,background-color .26s ease,transform .26s cubic-bezier(.16,1,.3,1); }
    .tor-file-control:hover .tor-file-action { transform:translateY(-1px); }
    .tor-file input[type=file]:active ~ .tor-file-action { transform:translateY(1px); }
}

@supports (animation-timeline:view()) {
    @media (prefers-reduced-motion:no-preference) {
        .editorial-image {
            animation:torready-depth-image 1ms linear both;
            animation-timeline:view();
            animation-range:entry 0% cover 48%;
            transform-origin:50% 20%;
        }
        .editorial-panel {
            animation:torready-depth-panel 1ms linear both;
            animation-timeline:view();
            animation-range:entry 5% cover 52%;
        }
        .pricing-grid article {
            animation:torready-scroll-card 1ms linear both;
            animation-timeline:view();
            animation-range:entry 0% cover 32%;
        }
        .pricing-grid article:nth-child(2) { animation-range:entry 8% cover 38%; }
        .pricing-grid article:nth-child(3) { animation-range:entry 16% cover 44%; }
        .pricing-grid article:nth-child(4) { animation-range:entry 24% cover 50%; }
        .snapshot>div,.lead-form {
            animation:torready-scroll-rise 1ms linear both;
            animation-timeline:view();
            animation-range:entry 0% cover 34%;
        }
    }
}

@keyframes torready-copy-in { from { opacity:0; transform:translate3d(0,28px,0); } to { opacity:1; transform:none; } }
@keyframes torready-card-in { from { opacity:0; transform:translate3d(34px,24px,-120px) rotateY(-7deg) rotateX(4deg); } to { opacity:1; transform:none; } }
@keyframes torready-proof-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes torready-depth-image { from { opacity:.62; transform:translate3d(0,70px,-150px) rotateX(8deg) scale(.94); } to { opacity:1; transform:none; } }
@keyframes torready-depth-panel { from { opacity:0; transform:translate3d(32px,64px,70px) rotateY(-6deg); } to { opacity:1; transform:none; } }
/* Scroll reveals animate depth only. Fading a container also fades its text and
   background, so off-screen pricing and form content audits at ~1.0 contrast. */
@keyframes torready-scroll-card { from { transform:translate3d(0,54px,-90px) rotateX(7deg); } to { transform:none; } }
@keyframes torready-scroll-rise { from { transform:translate3d(0,40px,-50px); } to { transform:none; } }

@media (max-width:1100px) and (min-width:801px) { .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:800px) { .hero { grid-template-columns:1fr; gap:48px; padding-top:54px; }.risk-card { box-shadow:10px 12px 0 var(--acid); }.pricing-heading,.public-faq { grid-template-columns:1fr; gap:28px; }.pricing-grid { grid-template-columns:1fr; }.pricing-grid article { min-height:330px; }.volume-case { margin:54px 28px 10px; grid-template-columns:1fr; }.volume-case-media { border-right:0; border-bottom:1px solid #aeb9b2; }.volume-case-media img { min-height:0; aspect-ratio:16/9; }.volume-case-copy { padding:36px 28px 40px; }.guide-discovery { margin:68px 28px 20px; padding-top:38px; grid-template-columns:1fr; gap:38px; }.guide-discovery-intro { padding-left:0; }.snapshot { grid-template-columns:1fr; gap:35px; }.proof-strip { grid-template-columns:1fr 1fr; }.proof-strip span:nth-child(2) { border-right:0; }.proof-strip span:nth-child(-n+2) { border-bottom:1px solid #cbd2cd; } }
@media (max-width:800px) { .start-assurance { margin:-34px 28px 58px; padding:24px 0; grid-template-columns:1fr; gap:20px; }.start-assurance-facts { grid-template-columns:1fr; gap:10px; }.start-assurance-facts a { grid-column:1; margin-top:5px; } }
@media (max-width:900px) { .editorial { padding:48px 18px 0; }.editorial-panel { position:static; width:auto; margin-top:-1px; padding:26px 22px; border-bottom:1px solid var(--line); } }
@media (max-width:900px) { .ops-kpis { grid-template-columns:1fr 1fr; }.ops-kpis article { border-bottom:1px solid #33463c; }.ops-grid { grid-template-columns:1fr; } }
@media (max-width:900px) { .ops-funnel { overflow-x:auto; }.ops-funnel div { min-width:78px; } }
@media (max-width:800px) { .guide-grid { grid-template-columns:1fr 1fr; }.guide-cta { align-items:flex-start; flex-direction:column; } }
@media (max-width:800px) { .guide-library-hero { grid-template-columns:1fr; gap:30px; padding-top:54px; }.guide-library-hero img { order:-1; }.start-review-visual { max-width:none; }.start-review-figure { max-width:none; }.start-route .start-review-visual { margin-top:18px; aspect-ratio:16/7; object-position:center 46%; }.start-form-jump { min-height:48px; margin-top:22px; padding:12px 16px; display:inline-flex; align-items:center; justify-content:space-between; gap:22px; border-radius:8px; color:#17231d; background:var(--acid); box-shadow:0 10px 26px rgb(31 68 49 / .14); text-decoration:none; font-size:12px; font-weight:900; line-height:1.45; }.start-form-jump span { font-size:18px; line-height:1; }.start-form-jump:focus-visible { outline:3px solid color-mix(in srgb,var(--green) 45%,transparent); outline-offset:3px; }.start-route .snapshot { display:flex; flex-direction:column; align-items:stretch; gap:24px; }.start-route .snapshot-copy { display:contents; }.start-route .snapshot-lede { order:1; }.start-route .snapshot>.lead-form,.start-route .snapshot>.lead-success { order:2; animation:none; }.start-route .snapshot>.quote-first { order:2; margin-top:0; }.start-route .start-support { order:3; }.start-route .start-support>:first-child { margin-top:0; }.start-route .start-review-figure { order:4; }.start-route .start-form-jump { order:5; margin-top:0; } }
@media (max-width:800px) { .sample-hero { grid-template-columns:1fr; gap:48px; padding-top:54px; }.sample-context { box-shadow:10px 12px 0 var(--acid); }.sample-scoreboard { grid-template-columns:1fr 1fr; }.sample-scoreboard article:nth-child(2) { border-right:0; }.sample-scoreboard article:nth-child(-n+2) { border-bottom:1px solid #e0e5e2; }.sample-row { grid-template-columns:130px 1fr; }.sample-confidence { grid-column:2; justify-items:start; text-align:left; }.sample-explainer { grid-template-columns:1fr; gap:28px; margin-left:28px; margin-right:28px; } }
@media (max-width:800px) { .sample-page { padding-bottom:76px; }.sample-conversion-band { margin-left:28px; margin-right:28px; grid-template-columns:1fr; gap:24px; }.sample-mobile-cta { position:fixed; z-index:900; left:18px; right:18px; bottom:16px; min-height:48px; padding:13px 18px; display:flex; align-items:center; justify-content:center; border:1px solid #b7eb32; border-radius:8px; color:#17231d; background:var(--acid); box-shadow:0 14px 38px rgb(16 34 24 / .25); text-decoration:none; font-size:13px; font-weight:900; line-height:1.45; }.sample-mobile-cta:focus-visible { outline:3px solid color-mix(in srgb,var(--green) 45%,transparent); outline-offset:3px; } body:has(.analytics-consent:not([hidden])) .sample-mobile-cta { display:none; } }
@media (max-width:520px) { .hero { padding-left:18px; padding-right:18px; }.hero h1 { font-size:45px; }.public-pricing,.public-faq { padding-left:18px; padding-right:18px; }.pricing-grid article { padding:26px 22px; }.pricing-note { text-align:left; line-height:1.6; }.volume-case { margin-left:18px; margin-right:18px; }.volume-case-copy { padding:30px 22px 34px; }.volume-case-copy h2 { font-size:34px; }.volume-math { grid-template-columns:1fr; }.volume-math div { padding:15px 0; }.volume-math div+div { padding-left:0; border-left:0; border-top:1px solid #b7c2bb; }.volume-terms { grid-template-columns:1fr; gap:18px; }.volume-cta { width:100%; min-width:0; }.volume-actions { flex-direction:column; align-items:stretch; gap:12px; }.volume-quote-cta { width:100%; }.quote-request { padding:20px; }.quote-request dl { grid-template-columns:1fr; gap:11px; }.guide-discovery { margin-left:18px; margin-right:18px; padding-top:30px; gap:30px; }.guide-discovery-intro h2 { font-size:32px; line-height:1.3; }.guide-discovery-hub { white-space:normal; }.guide-discovery-links a { min-height:108px; padding:19px 38px 19px 0; }.guide-discovery-links span { font-size:15px; }.start-route .snapshot { padding-top:28px; padding-bottom:44px; }.start-route .start-form-jump { width:100%; margin-top:0; padding:14px 18px; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:14px; line-height:1.85; overflow-wrap:anywhere; }.lead-form { grid-template-columns:1fr; padding:24px 20px; gap:13px; }.lead-form-intro { padding-bottom:11px; }.lead-form-intro,.lead-form-primary,.lead-form label,.lead-submit,.lead-submit-note,.lead-form .consent,.lead-form .tor-file,.lead-optional,.form-error,.validation-summary-errors { grid-column:1; }.lead-form input,.lead-form select { font-size:16px; }.lead-form .consent { grid-template-columns:18px minmax(0,1fr); gap:8px; font-size:11px; line-height:1.65; }.lead-form .consent input { margin-top:3px; }.lead-form .consent span { min-width:0; }.lead-form .consent small { display:block; margin-top:3px; color:#77837c; }.lead-optional-grid { grid-template-columns:1fr; }.tor-file-heading { align-items:flex-start; flex-direction:column; gap:3px; }.marketing-footer { flex-direction:column; }.proof-strip { margin:0 18px; }.report-heading { align-items:flex-start; flex-direction:column; }.report-heading h2 { font-size:30px; }.checkout-card { grid-template-columns:1fr; }.checkout-card form,.checkout-card>.lead-submit,.checkout-card>.quote-button,.checkout-card>.quotation-ready,.checkout-card>small,.checkout-card>.form-error,.billing-profile,.payment-plans { grid-column:1; }.checkout-card>.quote-request-note { grid-column:1; }.payment-plans label { grid-template-columns:18px 1fr; }.payment-plans span,.payment-plans small { grid-column:2; text-align:left; }.billing-profile { grid-template-columns:1fr; }.billing-profile label,.billing-profile .billing-toggle,.billing-profile .billing-address,.billing-profile .billing-hint { grid-column:1; }.credit-redemption { grid-template-columns:1fr; }.credit-redemption .form-error { grid-column:1; }.credit-balance { align-items:flex-start; flex-direction:column; }.payment-status-page { padding:20px; }.payment-status-card { padding:28px; }.payment-status-card h1 { font-size:34px; } }
@media (prefers-reduced-motion:reduce) { .guide-discovery-hub,.guide-discovery-links a,.guide-discovery-links a::after { transition:none; } }
@media (prefers-reduced-motion:reduce) { .pricing-grid .plan-quote-cta { transition:none; }.pricing-grid .plan-quote-cta:hover,.pricing-grid .plan-quote-cta:active { transform:none; } }
@media (prefers-reduced-motion:reduce) { html:has(.start-route) { scroll-behavior:auto; }.start-route .start-form-jump { transition:none; } }
@media (max-width:520px) { .start-assurance { margin-left:18px; margin-right:18px; }.start-assurance strong { font-size:17px; } }
@media (max-width:700px) { .quotation-page { padding:18px 10px 40px; }.quotation-toolbar { padding:0 8px; }.quotation-toolbar button { padding:9px 11px; font-size:12px; }.quotation-sheet { min-height:0; padding:34px 24px; }.quotation-header { grid-template-columns:1fr; gap:22px; }.quotation-header dl { min-width:0; }.quotation-header dl>div { grid-template-columns:68px minmax(0,1fr); }.quotation-header dd { font-size:10px; white-space:nowrap; }.quotation-parties { grid-template-columns:1fr; gap:26px; }.quotation-item-head { display:none; }.quotation-item { grid-template-columns:1fr auto; gap:12px; }.quotation-item>div { grid-column:1 / 3; }.quotation-item>span { text-align:left; }.quotation-item>strong { text-align:right; }.quotation-totals { grid-template-columns:1fr; }.quotation-totals dl { grid-column:1; }.quotation-footer { align-items:flex-start; flex-direction:column; gap:6px; } }
@media (max-width:520px) { .guide-grid { grid-template-columns:1fr; }.guide-hero,.guide-article { padding-left:18px; padding-right:18px; }.guide-grid { padding:0 18px; }.guide-article>h1 { font-size:42px; }.checklist li { grid-template-columns:42px 1fr; gap:14px; }.checklist li>span { font-size:32px; } }
@media (max-width:520px) { .analytics-consent { right:12px; bottom:12px; width:calc(100vw - 24px); grid-template-columns:1fr; }.analytics-consent-actions { display:grid; grid-template-columns:1fr 1fr; }.analytics-consent button { padding:0 9px; } }
@media (max-width:520px) { .sample-hero,.sample-overview,.sample-matrix { padding-left:18px; padding-right:18px; }.sample-hero-copy h1 { font-size:44px; }.sample-scoreboard { grid-template-columns:1fr 1fr; }.sample-row { grid-template-columns:1fr; gap:12px; }.sample-row-meta,.sample-confidence { grid-column:1; justify-items:start; text-align:left; }.sample-explainer { margin-left:18px; margin-right:18px; padding:26px; }.sample-explainer dl>div { grid-template-columns:1fr; gap:5px; } }
@media (max-width:520px) { .sample-conversion-band { margin-left:18px; margin-right:18px; padding:28px 24px; }.sample-conversion-band h2 { font-size:28px; } }
@media print { @page { size:A4; margin:12mm; } body { background:#fff; }.quotation-page { padding:0; background:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact; }.quotation-toolbar { display:none; }.quotation-sheet { max-width:none; min-height:0; padding:0; border:0; border-radius:0; box-shadow:none; }.quotation-item,.quotation-totals,.quotation-terms { break-inside:avoid; }.quotation-expired { border:1px solid #a8332e; } }

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* TOR penalty calculator: a trust-first interactive acquisition surface. */
.guide-grid>a.guide-tool-card { grid-column:span 2; min-height:260px; color:#eef4ef; background:#17271f; border-color:#294d3a; }
.guide-grid>a.guide-tool-card small,.guide-grid>a.guide-tool-card span { color:var(--acid); }
.guide-grid>a.guide-tool-card p { max-width:58ch; color:#bdc9c1; }
.guide-grid>a.guide-tool-card h2 { max-width:620px; font-size:clamp(26px,3vw,38px); line-height:1.35; }

.penalty-tool-page { line-height:1.75; }
.penalty-tool-hero { max-width:1180px; margin:0 auto; padding:70px 28px 76px; display:grid; grid-template-columns:.82fr 1.18fr; gap:72px; align-items:start; }
.penalty-tool-copy { position:sticky; top:28px; padding-top:18px; }
.penalty-tool-copy h1 { max-width:570px; margin:0 0 22px; font-size:clamp(42px,5vw,66px); font-weight:700; line-height:1.22; letter-spacing:-.035em; }
.penalty-tool-copy>p:not(.eyebrow) { max-width:540px; margin-bottom:28px; color:var(--muted); font-size:16px; line-height:1.85; }
.penalty-tool-assurance { max-width:470px; padding:18px 0; display:grid; gap:4px; border-top:1px solid #aeb9b2; border-bottom:1px solid #aeb9b2; }
.penalty-tool-assurance strong { font-size:13px; }
.penalty-tool-assurance span { color:#5c6961; font-size:11px; }
.penalty-calculator { padding:32px; border:1px solid #aeb9b2; border-radius:14px; background:#f9faf7; box-shadow:18px 22px 0 #dce5de; }
.penalty-calculator-heading { margin-bottom:26px; }
.penalty-calculator-heading h2 { margin:0 0 6px; font-size:26px; line-height:1.45; }
.penalty-calculator-heading p { margin:0; color:#647168; font-size:11px; }
.penalty-fields { display:grid; grid-template-columns:1fr 1fr; gap:20px 16px; }
.penalty-fields label { min-width:0; display:grid; gap:7px; color:#31453a; font-size:11px; font-weight:800; line-height:1.65; }
.penalty-fields label>small { color:#66746c; font-size:9px; font-weight:500; line-height:1.75; }
.penalty-cap-field { grid-column:1/3; }
.input-with-unit { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; border:1px solid #aebbb3; border-radius:8px; background:#fff; overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease; }
.input-with-unit:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgb(21 95 62 / .16); }
.input-with-unit input { min-width:0; width:100%; padding:12px 13px; border:0; outline:0; color:var(--ink); background:transparent; font-size:14px; font-weight:700; line-height:1.55; }
.input-with-unit b { min-width:48px; padding:0 12px; color:#5d6b63; font-size:10px; text-align:right; }
.penalty-calculate { width:100%; margin-top:24px; padding:14px 20px; border:0; border-radius:8px; color:#17231d; background:var(--acid); box-shadow:0 8px 24px #65821628; font-size:13px; font-weight:900; line-height:1.55; cursor:pointer; transition:transform .26s cubic-bezier(.16,1,.3,1),box-shadow .26s ease; }
.penalty-calculate:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgb(31 68 49 / .18); }
.penalty-calculate:active { transform:translateY(1px); }
.penalty-calculate:focus-visible { outline:3px solid color-mix(in srgb,var(--green) 45%,transparent); outline-offset:3px; }
.penalty-errors { margin-top:18px; padding:16px 18px; border-left:4px solid #a8332e; color:#7e2925; background:#fff0ee; font-size:11px; }
.penalty-errors strong { display:block; margin-bottom:6px; }
.penalty-errors ul { margin:0; padding-left:18px; }
.penalty-results,.penalty-empty { max-width:1124px; margin:0 auto 76px; padding:44px; border-radius:14px; }
.penalty-results { display:grid; grid-template-columns:.82fr 1.18fr; gap:54px; align-items:center; color:#eef4ef; background:#17271f; }
.penalty-result-primary p { margin:0 0 8px; color:#b4c1b9; font-size:11px; }
.penalty-result-primary h2 { display:inline; margin:0; color:var(--acid); font-size:clamp(38px,5vw,64px); line-height:1.2; letter-spacing:-.03em; }
.penalty-result-primary>span { margin-left:8px; color:#dce5df; font-size:13px; font-weight:800; }
.penalty-result-primary small { display:block; margin-top:10px; color:#b7c4bc; font-size:10px; }
.penalty-result-breakdown { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
.penalty-result-breakdown div { padding:17px 0; border-bottom:1px solid #3b4f45; }
.penalty-result-breakdown dt { color:#9eaea4; font-size:10px; }
.penalty-result-breakdown dd { margin:5px 0 0; font-size:15px; font-weight:800; }
.penalty-empty { display:grid; grid-template-columns:.75fr 1.25fr; gap:54px; border-top:1px solid #b8c2bc; border-bottom:1px solid #b8c2bc; border-radius:0; }
.penalty-empty h2 { margin:0; font-size:28px; line-height:1.45; }
.penalty-empty p { margin:0; color:var(--muted); line-height:1.85; }
.penalty-disclaimer { max-width:900px; margin:0 auto 90px; padding:38px; border:1px solid #b9c9bf; border-radius:14px; background:#e8f0ea; }
.penalty-disclaimer h2 { margin:0 0 12px; font-size:30px; line-height:1.45; }
.penalty-disclaimer p { margin:0 0 24px; color:#4f6258; line-height:1.85; }

@media (prefers-reduced-motion:no-preference) {
    .penalty-results { animation:penalty-result-in .55s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes penalty-result-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }

@media (max-width:800px) {
    .penalty-tool-hero { grid-template-columns:1fr; gap:38px; padding-top:48px; }
    .penalty-tool-copy { position:static; padding-top:0; }
    .penalty-results { margin-left:28px; margin-right:28px; grid-template-columns:1fr; gap:30px; }
    .penalty-empty { margin-left:28px; margin-right:28px; grid-template-columns:1fr; gap:14px; }
    .penalty-disclaimer { margin-left:28px; margin-right:28px; }
}
@media (max-width:520px) {
    .guide-grid>a.guide-tool-card { grid-column:span 1; }
    .penalty-tool-hero { padding-left:18px; padding-right:18px; }
    .penalty-tool-copy h1 { font-size:42px; }
    .penalty-calculator { padding:24px 20px; box-shadow:9px 12px 0 #dce5de; }
    .penalty-fields { grid-template-columns:1fr; }
    .penalty-cap-field { grid-column:1; }
    .penalty-results,.penalty-empty,.penalty-disclaimer { margin-left:18px; margin-right:18px; padding:28px 24px; }
    .penalty-result-breakdown { grid-template-columns:1fr; }
    .penalty-disclaimer .hero-cta { width:100%; text-align:center; }
}

/* Commercial-intent guides carry the one-email lead form in the page instead of a link
   to /start. The band reuses the dark treatment of .guide-cta so the article keeps its
   formal editorial rhythm, and it holds layout and colour only: the form keeps the
   markup, the field set, the validation and the responsive rules it has everywhere
   else, so nothing here can change how a lead is captured. Every heading stays under
   the global Sarabun line box, which is what keeps Thai vowel and tone marks clear. */
.guide-capture { margin:70px 0 36px; padding:34px; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:38px; align-items:start; border-radius:14px; color:#eef4ef; background:#17271f; }
.guide-capture-copy { min-width:0; display:grid; align-content:start; gap:10px; }
.guide-capture-copy .eyebrow { margin:0; color:var(--acid); }
.guide-capture-copy h2 { margin:0; font:700 28px/1.2 Georgia,"Noto Serif Thai",serif; }
.guide-capture-copy p:not(.eyebrow) { max-width:46ch; margin:0; color:#aab8b0; font-size:12px; line-height:1.85; }
.guide-capture-form { min-width:0; display:grid; gap:12px; }
/* The band is dark and the form is white. Only the consent sentence and the validation
   list take their colour from the host, so the ink the form uses on every other page is
   restated once here rather than restyling any control. */
.guide-capture .lead-form { color:var(--ink); }
.guide-capture-note { margin:0; padding-left:14px; border-left:2px solid var(--acid); color:#b3c1b8; font-size:10px; font-weight:600; line-height:1.85; }

@media (max-width:800px) {
    .guide-capture { padding:30px 26px; grid-template-columns:1fr; gap:26px; }
    .guide-capture-copy p:not(.eyebrow) { max-width:62ch; }
}
@media (max-width:520px) {
    .guide-capture { margin:52px 0 30px; padding:24px 18px; gap:22px; border-radius:12px; }
    .guide-capture-copy h2 { font-size:25px; }
    .guide-capture-note { font-size:11px; }
}