/* TellHi 1.0.9 minimal pricing and sign-in: white, hairlines, one purple accent (#5D37F5), same palette as Personal.
   Loaded after th.css on /pricing, /login, /signup, /forgot, /reset and /signup/finish only.
   Flat surfaces only: no cream, no heavy outlines, no glow, no soft focus, no colour fades. */
body.pa { --pa-soft: #F6F6F7; --pa-soft2: #EEEEF0; --pa-hair: #E6E6E9; --pa-line: #DCDCE1; --pa-ink: #111113; --pa-mute: #6E6E76;
  --pa-acc: #5D37F5; --pa-acc-dn: #4A26E0; --pa-tint: #F1EDFF;
  background: #FFFFFF; color: var(--pa-ink); }
body.pa ::selection { background: #E4DCFF; }
html[lang="th"] body.pa h1, html[lang="th"] body.pa h2, html[lang="th"] body.pa h3, html[lang="th"] body.pa b { letter-spacing: 0 !important; }

/* ---------- pricing ---------- */
body.pa.pricing .pr { max-width: 960px; padding: 40px max(20px, var(--sar)) 72px max(20px, var(--sal)); }
body.pa.pricing .pr-hero h1 { font-size: clamp(34px, 8.6vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: var(--pa-ink); }
body.pa.pricing .plans { margin-top: 28px; gap: 12px; }
body.pa .fu { gap: 22px; padding: 26px 22px; border-radius: 20px; background: #FFFFFF; color: var(--pa-ink); box-shadow: inset 0 0 0 1px var(--pa-hair); }
@media (min-width: 860px) { body.pa .fu { padding: 40px; gap: 40px; align-items: start; } }
body.pa .fu-head { gap: 10px; }
body.pa .fu-tag { min-height: 26px; padding: 0 10px; background: var(--pa-tint); color: var(--pa-acc); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
body.pa .fu-name { font-size: clamp(40px, 11vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 4px 0 0; color: var(--pa-ink); }
body.pa .fu-price { gap: 4px 8px; }
body.pa .fu-price b { font-size: clamp(36px, 9vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--pa-ink); }
body.pa .fu-price span { font-size: 15px; font-weight: 500; color: var(--pa-mute); }
body.pa .fu-body { gap: 16px; }
body.pa .fu-feats { gap: 12px; }
body.pa .fu-feats li { font-size: 16px; font-weight: 500; line-height: 1.4; }
body.pa .fu-feats .ck { width: 20px; height: 20px; margin-top: 1px; color: var(--pa-acc); }
body.pa .fu-cta.btn-soon, body.pa .fu-cta.btn-soon:hover { min-height: 50px; font-size: 15px; font-weight: 650; background: var(--pa-soft); color: var(--pa-mute); box-shadow: none; }
body.pa .fu-note { font-size: 13px; font-weight: 500; color: var(--pa-mute); margin: -6px 0 0; }
body.pa .fr { gap: 12px 24px; padding: 24px 22px; border-radius: 20px; background: #FFFFFF; color: var(--pa-ink); box-shadow: inset 0 0 0 1px var(--pa-hair); }
@media (min-width: 860px) { body.pa .fr { padding: 28px 40px; } }
body.pa .fr-t { gap: 12px; flex-wrap: wrap; }
body.pa .fr-name { font-size: 32px !important; font-weight: 800 !important; letter-spacing: -.035em !important; }
body.pa .fr-price b { font-size: 32px; font-weight: 800; letter-spacing: -.035em; }
body.pa .fr-price span { font-weight: 500; color: var(--pa-mute); }
body.pa .fr-p { font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--pa-mute); }
body.pa .fr-cta { min-height: 50px; padding: 0 24px; background: var(--pa-acc); color: #FFFFFF; box-shadow: none; font-weight: 650; font-size: 15px; transition: background-color .15s, transform .12s; }
body.pa .fr-cta:hover { background: var(--pa-acc-dn); color: #FFFFFF; }
@media (max-width: 859px) { body.pa .fr-cta { width: 100%; } }
body.pa .pr-faq { margin-top: 48px; }
body.pa .pr-faq h2 { font-size: 22px; font-weight: 750; letter-spacing: -.02em; margin-bottom: 4px; }
body.pa .acc { border-bottom: 1px solid var(--pa-hair); }
body.pa .acc-q { min-height: 58px; font-size: 16px; font-weight: 600; color: var(--pa-ink); }
body.pa .acc-q .chev { color: var(--pa-mute); }
body.pa .acc-a > p { color: var(--pa-mute); font-size: 15px; line-height: 1.55; }
body.pa .foot { background: #FFFFFF; border-top: 1px solid var(--pa-hair); }
body.pa .foot nav a { color: var(--pa-mute); font-weight: 500; }
body.pa .foot nav a:hover { color: var(--pa-ink); }
body.pa .foot-note { color: var(--pa-mute); font-size: 13px; }

/* ---------- sign in (login and signup: small centred lockup; the rest: the logo-only header) ---------- */
body.pa.auth { background: #FFFFFF; color: var(--pa-ink); }
body.pa .au.is-plain { display: block; min-height: 100vh; min-height: 100dvh; }
body.pa .au.is-plain .au-pane { padding: 0 max(20px, var(--sar)) calc(48px + var(--sab)) max(20px, var(--sal)); }
body.pa .au.is-plain .top-min { margin: 0 calc(-1 * max(20px, var(--sar))) 0 calc(-1 * max(20px, var(--sal))); }
body.pa .au.is-plain .au-main { max-width: 360px; padding-top: 40px; gap: 16px; }
body.pa .au.is-center { grid-template-columns: minmax(0, 1fr); }
body.pa .au.is-center .au-pane { max-width: 400px; margin: 0 auto; padding-top: calc(20px + var(--sat)); }
body.pa .au.is-center .au-lockup { margin: 4px auto 20px; color: var(--pa-ink); }
body.pa .au.is-center .au-lockup-svg { width: min(148px, 48vw); }
body.pa .au-main h1 { font-size: clamp(24px, 6.6vw, 30px); font-weight: 750; letter-spacing: -.025em; line-height: 1.2; color: var(--pa-ink); }
body.pa .au.is-center .au-main h1 { text-align: center; }
body.pa .sub, body.pa .au.is-center .sub { color: var(--pa-mute); font-size: 15px; margin-top: -8px; }
body.pa .fld { gap: 6px; }
body.pa .fld-l { font-size: 14px; font-weight: 600; color: var(--pa-ink); }
body.pa .fld-box, body.pa.auth .fld-box { min-height: 50px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--pa-line); transition: box-shadow .15s; }
body.pa .fld-box:focus-within, body.pa.auth .fld-box:focus-within { box-shadow: inset 0 0 0 2px var(--pa-acc); }
body.pa .fld-i { height: 50px; }
body.pa .fld-pre, body.pa .fld-hint, body.pa .fld-status { color: var(--pa-mute); }
body.pa .fld-eye { color: var(--pa-mute); }
body.pa .fld-eye[aria-pressed="true"] { color: var(--pa-acc); }
body.pa .btn-xl { min-height: 50px; font-size: 15px; font-weight: 650; }
body.pa .btn-dark, body.pa.auth .btn-dark { background: var(--pa-acc); color: #FFFFFF; box-shadow: none; }
body.pa .btn-dark:hover, body.pa.auth .btn-dark:hover { background: var(--pa-acc-dn); }
body.pa .btn-line, body.pa .btn-line:hover { background: #FFFFFF; color: var(--pa-ink); box-shadow: inset 0 0 0 1px var(--pa-line); }
body.pa .btn-line:hover { background: var(--pa-soft); }
body.pa .or { color: var(--pa-mute); font-size: 13px; font-weight: 500; }
body.pa .or::before, body.pa .or::after { height: 1px; background: var(--pa-hair); }
body.pa .form-aside a, body.pa .alt a { color: var(--pa-ink); font-weight: 600; text-decoration-color: var(--pa-line); }
body.pa .form-aside a:hover, body.pa .alt a:hover { text-decoration-color: var(--pa-ink); }
body.pa .alt { color: var(--pa-mute); }
body.pa .alt-cta { margin-top: 4px; gap: 4px 6px; color: var(--pa-mute); font-weight: 500; font-size: 15px; }
body.pa .alt-cta .alt-btn, body.pa.auth .alt-btn { min-height: 44px; padding: 0 6px; gap: 6px; background: transparent; color: var(--pa-acc); box-shadow: none; font-weight: 650; font-size: 15px; }
body.pa .alt-cta .alt-btn:hover { background: transparent; color: var(--pa-acc-dn); text-decoration: underline; text-underline-offset: 3px; }
body.pa .alt-cta .alt-btn .ic { width: 16px; height: 16px; }
body.pa .alert { background: #FFF5F4; color: #A3231A; box-shadow: inset 0 0 0 1px #F7D4D0; border-radius: 12px; font-size: 14px; }
body.pa .note { background: #FFFFFF; color: #17663A; box-shadow: inset 0 0 0 1px var(--pa-hair); border-radius: 12px; font-size: 14px; }