/* Design.md concept 3: one shared visual layer, no business state. */
:root{--cb-bg:#F7F7F4;--cb-surface:#fff;--cb-ink:#1A1A18;--cb-muted:#595955;--cb-line:#D8D8D2;--cb-control:#75756F;--cb-selected:#EEEEE9;--cb-accent:#FF5A1F;--cb-accent-text:#B83D16;--cb-notice:#F5F1E6;--ink:var(--cb-ink);--paper:var(--cb-bg);--muted:var(--cb-muted);--line:var(--cb-line);--orange:var(--cb-accent);--accent:var(--cb-accent);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Thonburi","Noto Sans Thai",sans-serif;color:var(--cb-ink);background:var(--cb-bg)}
body{font-size:16px;line-height:1.6}h1{font-size:32px;line-height:1.4;letter-spacing:0;font-weight:800}h2{font-size:22px;line-height:1.45;letter-spacing:0}h3{font-size:18px;line-height:1.5}small,.small,.subtle,.field small,.saved,.note-row,.card-foot,dt{font-size:14px;line-height:1.5}.eyebrow{font-size:12px;letter-spacing:.06em;line-height:1.6}.integration-nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;background:#fff;border-bottom:1px solid var(--cb-line);padding:12px max(16px,calc((100vw - 1280px)/2));font-size:14px}.integration-nav strong{font-size:16px}.integration-nav span{color:var(--cb-muted)}.integration-nav a{min-height:44px;display:inline-flex;align-items:center;text-underline-offset:4px;font-weight:600}.integration-nav a:hover{color:var(--cb-accent-text)}
:focus-visible{outline:2px solid var(--cb-ink);outline-offset:3px}button:focus-visible,.button:focus-visible{box-shadow:0 0 0 2px white}button,.button{border-color:var(--cb-control);border-radius:4px;min-height:44px}button.primary,.button.primary{background:var(--cb-ink);border-color:var(--cb-ink);color:#fff}input,select,textarea,.field input,.field select,.field textarea{border-color:var(--cb-control);border-radius:4px;font-size:16px;line-height:1.6}.field label,legend,label{font-size:16px}.panel,.card,.list-card{border-radius:4px;padding:24px;box-shadow:none}.badge,.tag{font-size:13px;line-height:1.5;border-radius:4px;letter-spacing:0}.notice,.callout,.hint{background:var(--cb-notice);color:var(--cb-ink);font-size:14px}.notice{border-left:0}.hint,.callout{border-left:3px solid var(--cb-accent)}.column{background:var(--cb-selected)}.version{border-left-color:var(--cb-ink)}.flow{border-style:solid;background:#fff}.stat{border-top:3px solid var(--cb-ink)}.top h1,.page-top h1,.onboard-head h1{padding-bottom:12px;border-bottom:3px solid var(--cb-accent);width:fit-content}.error,.field-error{color:#9D2424}.choice:has(input:checked){border-color:var(--cb-ink);border-left-width:4px;background:var(--cb-selected)}.choice input{accent-color:var(--cb-ink)}
/* Client keeps a natural mobile reading width, with no decorative phone chrome. */
.masthead,.shell,.footer,.nav{max-width:744px}.masthead{padding:24px 32px}.shell{margin:auto;padding:24px 32px 48px}.footer{padding:24px 32px;margin:auto;font-size:14px}.footer a,.footer .text-button{font-size:14px;min-height:44px}.nav{margin:auto;padding:0 24px 12px}.nav a{font-size:14px;flex:1;text-align:center}.demo-strip{background:var(--cb-notice);font-size:12px;font-weight:500;letter-spacing:0;padding:10px 16px}.demo-strip a{font-size:12px}.brand-caption{font-size:10px}.header-meta{font-size:12px}.brand-mark{border:0;padding:0;font-weight:800;letter-spacing:0}.two-col,.two-equal,.three-col{grid-template-columns:1fr;gap:24px}.hero{grid-template-columns:1fr;min-height:0;padding:8px 0 32px;gap:24px}.hero h1{font-size:40px;line-height:1.2;letter-spacing:-.5px}.hero h1 .accent{color:var(--cb-ink)}.hero .intro{font-size:16px;margin:24px 0;max-width:none}.hero .invite-note{font-size:14px;max-width:none}.poster{display:none}.service-teasers{grid-template-columns:1fr;gap:24px}.teaser p{font-size:16px}.panel.dark,.panel.orange-panel{background:#fff;color:var(--cb-ink);border-color:var(--cb-line);border-top:3px solid var(--cb-accent)}.panel.dark p,.panel.dark .eyebrow{color:var(--cb-muted)}.panel.dark .button:not(.orange){color:var(--cb-ink)}.orange{background:var(--cb-ink)!important;color:#fff!important;border-color:var(--cb-ink)!important}.step{font-size:14px}.onboard-head h1,.page-top h1{font-size:32px}.amount{font-size:28px;line-height:1.4;letter-spacing:0;margin:12px 0}.detail-grid{gap:24px}.check{font-size:16px}.version-tabs a{font-size:14px;border-color:var(--cb-control);min-height:44px}.small-button{font-size:14px;min-height:44px}.callout small{display:inline}.package-number{font-size:28px}.empty{background:#fff}
/* Rate Card owns its picker/detail layout. */
body:has(.workarea) .shell,body:has(.client-shell) .shell{max-width:1280px;padding:0}.review-page{max-width:1000px;margin:32px auto;padding:0 24px}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.review-page .panel{background:white;border:1px solid var(--cb-line)}.review-page h1{margin:12px 0}.review-page a{color:inherit}.review-page .button{display:inline-flex;padding:10px 16px;border:1px solid var(--cb-control);text-decoration:none}.review-page ol{padding-left:24px}.review-page li{margin:12px 0}
@media(max-width:1023px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}main{padding-left:24px;padding-right:24px}}
@media(max-width:767px){h1,.page-top h1,.onboard-head h1{font-size:26px}.integration-nav{gap:4px 14px;padding:8px 16px}.integration-nav strong,.integration-nav span{width:100%}.integration-nav a{font-size:13px}.masthead{padding:20px 16px}.shell{padding:20px 16px 48px;margin:0}.footer{padding:24px 16px 112px;margin:0}.panel,.list-card{padding:20px 16px}.hero h1{font-size:34px;letter-spacing:0;line-height:1.25}.hero .intro{font-size:16px}.hero .invite-note{font-size:14px;text-align:left}.hero .actions .text-button{font-size:14px}.page-top p,.onboard-head p{font-size:16px}.nav{max-width:none;margin:0;padding:8px 8px max(8px,env(safe-area-inset-bottom));background:white}.nav a{font-size:12px;padding:8px 4px}.nav a span{font-size:11px}.shell.has-nav{padding-bottom:48px}.steps{gap:8px}.step{font-size:12px}.detail-grid,.grid,.fields,.board,.review-grid{grid-template-columns:1fr}.onboard>.panel{padding:20px 16px}.header-meta{font-size:10px}.actions{gap:8px}.actions>*{max-width:100%}main{padding-left:16px;padding-right:16px}.stats{grid-template-columns:1fr}.contact-row{grid-template-columns:1fr}.review-page{padding:0 16px}.form-foot .primary{min-width:120px}.panel .actions{display:flex}.panel .actions>*{flex-grow:1}.card-foot{flex-wrap:wrap}.spread{flex-wrap:wrap}.integration-nav+header{flex-wrap:wrap}.notice{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Wrapped card titles keep a continuous pointer target between text lines. */
.card h3>a{display:inline-block;min-height:44px}

.shared-state-notice{padding:16px max(16px,calc((100vw - 1280px)/2));background:#F5F1E6;color:#1A1A18;border-bottom:2px solid #75756F;overflow-wrap:anywhere}
#storage-notice:not(:empty),.shared-state-notice{position:sticky;top:0;z-index:60;font-size:14px;line-height:1.5;max-height:32vh;overflow:auto;background:var(--cb-notice);border-bottom:2px solid var(--cb-control)}
#storage-notice button,#storage-notice a{font-size:14px;min-height:44px;display:inline-flex;align-items:center;margin:4px 8px 0 0}
.meta-grid>*{min-width:0}
@media(max-width:360px){.meta-grid{grid-template-columns:1fr}.meta-grid label:first-child{grid-column:auto}}
/* Preserve the dense catalog while keeping Thai descriptions readable. */
.item-bottom,.item-bottom span,.notice p,.client-notice p{font-size:14px;line-height:1.5}
.demo-note{font-size:12px}
nav[aria-label="เมนูหลัก"]{flex-wrap:wrap}