/* Kinly sign-in page ("Building blocks + window light" design).
   Fonts are self-hosted; licenses: static/fonts/kinly/OFL-*.txt */

/* Fredoka is a variable font: one file covers weights 500 and 600. */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/kinly/fredoka-latin-ext.d3c5911bfd9a.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/kinly/fredoka-latin.9591efe1be62.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: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kinly/plex-thai-looped-400-thai.1bcf71c406f4.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kinly/plex-thai-looped-400-latin-ext.137dc75d283d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kinly/plex-thai-looped-400-latin.a7258cf9da68.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: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/kinly/plex-thai-looped-500-thai.9d4a52fb73b5.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/kinly/plex-thai-looped-500-latin-ext.11ab4d33b37d.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/kinly/plex-thai-looped-500-latin.666d70cb1baa.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: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/kinly/plex-thai-looped-600-thai.a0be3bfb0bee.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/kinly/plex-thai-looped-600-latin-ext.8dc479f51061.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans Thai Looped';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/kinly/plex-thai-looped-600-latin.383fc78df5d2.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;
}

:root {
  --accent: #B9482A;
  --ink: #2B1F18;
  --muted: #6B5A4E;
  --paper: #FFFDF9;
  --line: #EADFCF;
  --field-line: #E4D7C5;
  --cjk: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', 'Noto Sans CJK SC';
  --body-font: 'IBM Plex Sans Thai Looped', var(--cjk), system-ui, sans-serif;
  --display-font: 'Fredoka', 'IBM Plex Sans Thai Looped', var(--cjk), sans-serif;
  color-scheme: light;
}

[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F6EFE4; color: var(--ink); font-family: var(--body-font); }
a { color: var(--ink); }
a:hover { color: #8E3720; }
input::placeholder { color: #857364; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--paper); }

/* ---- page shell ---- */
.k-page {
  min-height: 100vh; min-height: 100dvh; box-sizing: border-box; position: relative; overflow: hidden; overflow: clip;
  background: #F6EFE4; color: var(--ink); font-family: var(--body-font);
  display: flex; flex-direction: column; gap: 24px; padding: 28px clamp(16px, 4vw, 56px);
}
.k-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.k-blob-a { width: 620px; height: 620px; right: -140px; top: -200px; background: #F1DCC6; animation: kinly-blob 16s ease-in-out infinite alternate; }
.k-blob-b { width: 420px; height: 420px; left: -160px; bottom: -220px; background: #DDE8D6; animation: kinly-blob 19s ease-in-out 2s infinite alternate-reverse; }
.k-float { position: absolute; display: block; pointer-events: none; }
.k-float-star { top: 66%; left: 55%; color: #F4CD6A; animation: kinly-float 6s ease-in-out 1.2s infinite; }
.k-float-heart { top: 7%; right: 30%; color: #F48FA0; animation: kinly-float 7.5s ease-in-out 3s infinite; }

/* ---- header ---- */
.k-header { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.k-logo { display: flex; align-items: center; gap: 10px; }
.k-dots { display: flex; gap: 3px; animation: kinly-land 0.6s cubic-bezier(0.5, 0, 0.3, 1) 0.05s both; }
.k-dot { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 3px; }
.k-dot i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink); }
.k-dot-1 { background: var(--accent); }
.k-dot-1 i { background: #FFFFFF; }
.k-dot-2 { background: #F4CD6A; }
.k-dot-3 { background: #9CC5A1; }
.k-wordmark { font-family: var(--display-font); font-size: 26px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.k-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.k-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.k-lang {
  min-height: 44px; box-sizing: border-box; padding: 0 16px; border-radius: 999px;
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; text-decoration: none;
  border: 1.5px solid var(--field-line); background: var(--paper); color: var(--ink);
}
.k-lang[aria-current="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.k-lang:hover { color: var(--ink); border-color: var(--ink); }
.k-lang[aria-current="true"]:hover { color: var(--paper); }
.k-private { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; font-size: 13px; color: var(--muted); }

/* ---- main ---- */
.k-main { position: relative; flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 48px; padding: 16px 0; }
.k-hero { flex: 1 1 420px; min-width: 0; max-width: 600px; display: flex; flex-direction: column; gap: 20px; }
.k-greet {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
  border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; font-weight: 600;
  animation: kinly-rise 0.6s ease-out 0.05s both;
}
.k-greet-icon { width: 28px; height: 28px; border-radius: 50%; background: #FBEBC0; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.k-greet-icon .k-sun { display: block; animation: kinly-spin 14s linear infinite; }
.k-greet-th { font-weight: 400; color: var(--muted); }

/* building-blocks scene: everything inside is sized in em */
.k-scene-wrap { align-self: flex-start; width: 36em; max-width: 100%; font-size: clamp(7px, 2.4vw, 16px); animation: kinly-rise 0.7s ease-out 0.1s both; }
.k-scene {
  position: relative; width: 36em; height: 18em; border-radius: 1.4em; background-color: #E3ECF5;
  transition: background-color 1.2s ease; box-shadow: 0 1.4em 2.2em -1.6em rgba(60,70,110,0.45); overflow: hidden; overflow: clip;
  font-family: var(--body-font);
}
.k-scene-grain { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: multiply; opacity: 0.4; z-index: 45; }
.kb-block { position: absolute; width: 4.6em; height: 3.4em; border-radius: 0.55em; transform-origin: 50% 100%; }
.kb-b0 { left: 17.3em; top: 11.8em; background: #92B8DE; box-shadow: inset 0 -0.35em 0 #7AA2CC, inset 0 0.15em 0 rgba(255,255,255,0.35), 0 0.3em 0.5em -0.3em rgba(43,31,24,0.4); }
.kb-b1 { left: 22.1em; top: 11.8em; background: #F2B38A; box-shadow: inset 0 -0.35em 0 #DD9A70, inset 0 0.15em 0 rgba(255,255,255,0.35), 0 0.3em 0.5em -0.3em rgba(43,31,24,0.4); }
.kb-b2 { left: 17.3em; top: 8.4em; background: #9CC5A1; box-shadow: inset 0 -0.35em 0 #83B089, inset 0 0.15em 0 rgba(255,255,255,0.35), 0 0.3em 0.5em -0.3em rgba(43,31,24,0.4); }
.kb-b3 { left: 22.1em; top: 8.4em; background: #F4CD6A; box-shadow: inset 0 -0.35em 0 #DDB552, inset 0 0.15em 0 rgba(255,255,255,0.35), 0 0.3em 0.5em -0.3em rgba(43,31,24,0.4); }
.kb-label { position: absolute; left: 0.5em; top: 0.45em; display: flex; flex-direction: column; line-height: 1.15; }
.kb-label b { font-family: var(--display-font); font-weight: 600; font-size: 0.66em; color: var(--ink); white-space: nowrap; }
.kb-label small { font-size: 0.5em; color: rgba(43,31,24,0.75); white-space: nowrap; }
.kb-bar-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 0.1em; margin-left: -0.05em; background: rgba(43,31,24,0.3); }
.kb-bar-h { position: absolute; top: 50%; left: 0; right: 0; height: 0.1em; margin-top: -0.05em; background: rgba(43,31,24,0.3); }
.kb-knob { position: absolute; right: 0.18em; top: 0.85em; width: 0.2em; height: 0.2em; border-radius: 50%; background: #F4CD6A; }
.kb-badge {
  position: absolute; right: -0.4em; top: -0.4em; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0.1em 0.2em rgba(43,31,24,0.3);
  animation: kinly-popin 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.kb-badge svg { display: block; width: 0.65em; height: 0.65em; }
.kb-todo { position: absolute; left: 1.2em; top: 16.2em; z-index: 6; font-family: var(--display-font); font-weight: 600; color: #3E5A35; }
.kb-todo > span { font-size: 0.8em; }
.kb-todo [lang="th"] { font-family: var(--body-font); font-weight: 500; }
.kb-sign-text b { font-family: var(--display-font); font-weight: 600; font-size: 0.66em; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.kb-sign-text small { font-size: 0.52em; line-height: 1.3; color: var(--muted); white-space: nowrap; }

/* steps */
.k-steps { list-style: none; margin: -4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.k-step {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; font-size: 13px; font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.k-step-num { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: background 0.3s ease; background: #F4EADB; }
.k-step.is-on { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.k-step.is-on .k-step-num { background: rgba(255,255,255,0.22); }
.k-step-th { font-weight: 400; opacity: 0.85; }

/* headline */
.k-title { margin: 4px 0 0; font-family: var(--display-font); font-weight: 600; font-size: clamp(38px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -0.015em; }
.k-word { display: inline-block; transform-origin: 50% 100%; animation: kinly-blockland 0.55s cubic-bezier(0.5, 0, 0.3, 1) both; }
.k-word-accent { position: relative; color: var(--accent); }
.k-squiggle { position: absolute; left: 0; bottom: -0.14em; width: 100%; height: 0.3em; overflow: visible; }
.k-squiggle path { stroke-dasharray: 100; stroke-dashoffset: 0; animation: kinly-draw 0.9s ease-out 1.3s both; }
.k-intro { display: flex; flex-direction: column; gap: 6px; animation: kinly-rise 0.7s ease-out 0.9s both; }
.k-intro p { margin: 0; }
.k-intro-en { max-width: 470px; font-size: 17px; line-height: 1.6; color: #4A3B31; }
.k-intro-th { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---- sign-in card ---- */
.k-card {
  position: relative; flex: 1 1 380px; max-width: 460px; min-width: 0; box-sizing: border-box; padding: clamp(24px, 3vw, 40px);
  border-radius: 32px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 30px 60px -32px rgba(90,55,30,0.35);
  display: flex; flex-direction: column; gap: 22px; animation: kinly-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
}
.k-peek-window { position: absolute; right: 52px; bottom: 100%; width: 72px; height: 40px; overflow: hidden; pointer-events: none; }
.k-peek-eyes { position: absolute; left: 0; right: 0; top: 15px; display: flex; justify-content: center; align-items: flex-start; gap: 8px; }
.k-peek-cheek { position: absolute; top: 29px; width: 10px; height: 6px; border-radius: 50%; background: rgba(255,120,140,0.5); }
.k-peek-hand { position: absolute; top: -6px; width: 16px; height: 11px; border-radius: 50%; background: #C7B6E8; box-shadow: inset 0 0 0 1.5px rgba(43,31,24,0.14); pointer-events: none; }
.k-form-wrap { display: flex; flex-direction: column; gap: 22px; }
.k-shake-a { animation: kinly-nope-a 0.45s ease-in-out both; }
.k-shake-b { animation: kinly-nope-b 0.45s ease-in-out both; }
.k-card-head { display: flex; flex-direction: column; gap: 8px; }
.k-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.k-card h2 { margin: 0; font-family: var(--display-font); font-weight: 600; font-size: 32px; line-height: 1.15; }
.k-card-th { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.k-card-intro { margin: 0; font-size: 14px; color: var(--muted); }
.k-form { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.k-field { display: flex; flex-direction: column; gap: 8px; }
.k-field label { font-size: 14px; font-weight: 600; }
.k-label-th { font-weight: 400; color: var(--muted); }
.k-input-shell { position: relative; }
.k-input-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted); pointer-events: none; }
.k-input {
  width: 100%; box-sizing: border-box; height: 56px; padding: 0 18px 0 48px; border-radius: 18px; border: 1.5px solid var(--field-line);
  background: #FBF6EE; color: var(--ink); font: inherit; font-size: 15px;
}
.k-input-password { padding-right: 58px; }
.k-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(185,72,42,0.18); }
.k-input[aria-invalid="true"] { border-color: #B9482A; }
.k-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 14px; background: transparent; color: var(--muted); cursor: pointer;
}
.k-toggle:hover { background: rgba(43,31,24,0.06); }
.k-field-error { margin: 0; font-size: 13px; line-height: 1.45; color: #7A2A16; }
.k-caps { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: #7A4A06; }
.k-alert {
  margin: 0; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px;
  background: #FBE6DF; color: #7A2A16; font-size: 13px; line-height: 1.45;
}
.k-alert > svg { flex: none; margin-top: 1px; }
.k-alert-body { display: flex; flex-direction: column; min-width: 0; }
.k-alert-strong { font-weight: 600; }
.k-alert ul.errorlist { margin: 0; padding: 0; list-style: none; font-weight: 600; }
.k-go {
  height: 58px; width: 100%; border: 0; border-radius: 999px; background: var(--accent); color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 26px; cursor: pointer;
  box-shadow: 0 14px 28px -16px rgba(120,45,20,0.6); transition: transform .2s ease, box-shadow .2s ease;
}
.k-go:hover { transform: translateY(-2px); }
.k-go:active { transform: translateY(0) scale(0.98); }
.k-go:disabled { cursor: progress; }
.k-go:disabled:hover { transform: none; }
.k-arrow { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.k-go:hover .k-arrow { transform: translateX(4px); }
.k-go:disabled:hover .k-arrow { transform: none; }
.k-checking { display: inline-flex; align-items: center; gap: 10px; }
.k-dots-busy { display: inline-flex; gap: 4px; }
.k-dots-busy i { width: 6px; height: 6px; border-radius: 50%; background: #FFFFFF; animation: kinly-dot 0.9s ease-in-out infinite; }
.k-dots-busy i:nth-child(2) { animation-delay: 0.15s; }
.k-dots-busy i:nth-child(3) { animation-delay: 0.3s; }
.k-secure { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 20px; background: #EEF3EA; }
.k-secure-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #9CC5A1; color: #1F3B27; display: flex; align-items: center; justify-content: center; }
.k-secure-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.45; }
.k-secure-text strong { font-weight: 600; }
.k-secure-text [lang="th"] { color: #55473D; }
.k-demo { margin: -8px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }

/* success card */
.k-pass { display: flex; flex-direction: column; gap: 16px; }
.k-pass-head { display: flex; flex-direction: column; gap: 6px; animation: kinly-rise 0.45s ease-out both; }
.k-pass-head h2:focus { outline: none; }
.k-granted { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #2F6B4F; }
.k-pass-th { margin: 0; font-size: 15px; color: var(--muted); }
.k-house { position: relative; align-self: center; width: 100%; max-width: 300px; height: 240px; }
.k-pass-status { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }

/* full-screen "opening" wipe */
.k-overlay {
  position: fixed; inset: 0; z-index: 100; background: var(--accent); color: #FFFFFF; display: flex; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box; animation: kinly-wipe 0.8s cubic-bezier(0.7, 0, 0.3, 1) both; font-family: var(--body-font);
}
.k-overlay-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 440px; animation: kinly-rise 0.6s ease-out 0.5s both; }
.k-overlay h2 { margin: 0; font-family: var(--display-font); font-weight: 600; font-size: clamp(28px, 4vw, 38px); line-height: 1.15; }
.k-overlay p { margin: 0; font-size: 15px; color: rgba(255,255,255,0.9); }
.k-progress { display: block; width: 280px; max-width: 80vw; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.25); overflow: hidden; }
.k-progress i { display: block; height: 100%; border-radius: 999px; background: #FFFFFF; animation: kinly-fill 1.9s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both; }

/* ---- footer ---- */
.k-footer { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.k-footer > span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- keyframes (from the design) ---- */
@keyframes kinly-land{0%{opacity:0;transform:scale(1.7)}55%{opacity:1;transform:scale(0.92)}75%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes kinly-blockland{0%{opacity:0;transform:translateY(-1.2em) scale(1,1)}55%{opacity:1;transform:translateY(0) scale(1.08,0.88)}78%{transform:translateY(0) scale(0.97,1.04)}100%{opacity:1;transform:translateY(0) scale(1,1)}}
@keyframes kinly-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes kinly-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes kinly-blob{0%{border-radius:50%;transform:translate(0,0) rotate(0deg)}50%{border-radius:46% 54% 58% 42%/52% 44% 56% 48%;transform:translate(-24px,18px) rotate(8deg)}100%{border-radius:56% 44% 42% 58%/44% 58% 42% 56%;transform:translate(14px,-12px) rotate(-6deg)}}
@keyframes kinly-float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(14deg)}}
@keyframes kinly-spin{to{transform:rotate(360deg)}}
@keyframes kinly-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(0.1)}}
@keyframes kinly-heart{0%{opacity:0;transform:translateY(0) scale(0.5)}15%{opacity:1;transform:translateY(-0.6em) scale(1)}100%{opacity:0;transform:translateY(-4em) scale(0.9) rotate(14deg)}}
@keyframes kinly-drift{from{transform:translateX(-9em)}to{transform:translateX(44em)}}
@keyframes kinly-twinkle{0%,100%{opacity:0.4;transform:scale(0.6) rotate(0deg)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
@keyframes kinly-thunk{0%,100%{transform:translate(0,0)}25%{transform:translate(-0.1em,0.16em)}50%{transform:translate(0.08em,-0.06em)}75%{transform:translate(-0.04em,0.04em)}}
@keyframes kinly-thunk-big{0%,100%{transform:translate(0,0)}20%{transform:translate(-0.22em,0.3em)}45%{transform:translate(0.18em,-0.12em)}70%{transform:translate(-0.08em,0.08em)}}
@keyframes kinly-btoss-0{0%{transform:translate(-10.9em,-5.2em) rotate(-4deg);animation-timing-function:cubic-bezier(0.2,0.6,0.4,1)}50%{transform:translate(-5.45em,-8.6em) rotate(-14deg);animation-timing-function:cubic-bezier(0.6,0,0.8,0.4)}100%{transform:translate(0,0) rotate(0deg)}}
@keyframes kinly-btoss-1{0%{transform:translate(-15.7em,-5.2em) rotate(-4deg);animation-timing-function:cubic-bezier(0.2,0.6,0.4,1)}50%{transform:translate(-7.85em,-8.8em) rotate(-14deg);animation-timing-function:cubic-bezier(0.6,0,0.8,0.4)}100%{transform:translate(0,0) rotate(0deg)}}
@keyframes kinly-btoss-2{0%{transform:translate(-10.9em,-1.8em) rotate(-4deg);animation-timing-function:cubic-bezier(0.2,0.6,0.4,1)}50%{transform:translate(-5.45em,-5em) rotate(-14deg);animation-timing-function:cubic-bezier(0.6,0,0.8,0.4)}100%{transform:translate(0,0) rotate(0deg)}}
@keyframes kinly-btoss-3{0%{transform:translate(-15.7em,-1.8em) rotate(-4deg);animation-timing-function:cubic-bezier(0.2,0.6,0.4,1)}50%{transform:translate(-7.85em,-5.2em) rotate(-14deg);animation-timing-function:cubic-bezier(0.6,0,0.8,0.4)}100%{transform:translate(0,0) rotate(0deg)}}
@keyframes kinly-squash{0%{transform:scale(1.14,0.8)}45%{transform:scale(0.95,1.06)}100%{transform:scale(1,1)}}
@keyframes kinly-bout{0%{opacity:1;transform:translate(0,0) rotate(0deg)}40%{opacity:1;transform:translate(0.6em,-1.4em) rotate(10deg)}100%{opacity:0;transform:translate(1.4em,1em) rotate(24deg)}}
@keyframes kinly-dust-l{0%{opacity:0.85;transform:translate(0,0) scale(0.4)}100%{opacity:0;transform:translate(-1.2em,-0.5em) scale(1.3)}}
@keyframes kinly-dust-r{0%{opacity:0.85;transform:translate(0,0) scale(0.4)}100%{opacity:0;transform:translate(1.2em,-0.5em) scale(1.3)}}
@keyframes kinly-roofdrop{0%{transform:translateY(-14em) scale(1,1);animation-timing-function:cubic-bezier(0.6,0,0.9,0.5)}65%{transform:translateY(0) scale(1.06,0.88)}82%{transform:translateY(0) scale(0.98,1.04)}100%{transform:translateY(0) scale(1,1)}}
@keyframes kinly-puff{0%{opacity:0;transform:translate(0,0) scale(0.4)}20%{opacity:0.9}100%{opacity:0;transform:translate(0.8em,-3em) scale(1.4)}}
@keyframes kinly-popin{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
@keyframes kinly-hop{0%,62%,100%{transform:translateY(0) scale(1,1)}8%{transform:translateY(0) scale(1.06,0.94)}31%{transform:translateY(-0.6em) scale(0.96,1.05)}52%{transform:translateY(0) scale(1.05,0.95)}}
@keyframes kinly-hop-small{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.35em)}}
@keyframes kinly-wave{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-22deg)}}
@keyframes kinly-nope-a{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes kinly-nope-b{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes kinly-dot{0%,80%,100%{transform:translateY(0);opacity:0.5}40%{transform:translateY(-4px);opacity:1}}
@keyframes kinly-dropin{0%{opacity:0;transform:translateY(-160px) scale(1,1);animation-timing-function:cubic-bezier(0.6,0,0.9,0.5)}55%{opacity:1;transform:translateY(0) scale(1.1,0.86)}75%{transform:translateY(0) scale(0.96,1.05)}100%{opacity:1;transform:translateY(0) scale(1,1)}}
@keyframes kinly-roofin{0%{opacity:0;transform:translateY(-140px) scale(1,1);animation-timing-function:cubic-bezier(0.6,0,0.9,0.5)}60%{opacity:1;transform:translateY(0) scale(1.06,0.88)}80%{transform:translateY(0) scale(0.98,1.04)}100%{opacity:1;transform:translateY(0) scale(1,1)}}
@keyframes kinly-flicker{0%{opacity:0}20%{opacity:1}35%{opacity:0.2}55%{opacity:1}70%{opacity:0.5}100%{opacity:1}}
@keyframes kinly-puff-px{0%{opacity:0;transform:translate(0,0) scale(0.5)}20%{opacity:0.9}100%{opacity:0;transform:translate(12px,-46px) scale(1.5)}}
@keyframes kinly-wipe{0%{clip-path:circle(0% at 76% 66%)}100%{clip-path:circle(150% at 76% 66%)}}
@keyframes kinly-fill{from{width:0%}to{width:100%}}

/* Background tabs: pause the looping decoration (the scene timeline pauses in JS). */
[data-page-hidden="true"] .k-page *, [data-page-hidden="true"] .k-page { animation-play-state: paused !important; }

/* ---- phones and tablets: sign-in card first ---- */
@media (max-width: 900px) {
  .k-main { flex-direction: column; align-items: stretch; gap: 32px; padding: 8px 0; }
  .k-card { order: -1; flex: none; width: 100%; max-width: 460px; align-self: center; margin-top: 36px; }
  .k-hero { flex: none; max-width: 600px; width: 100%; align-self: center; }
  .k-float-star { display: none; }
}
@media (max-width: 520px) {
  .k-page { gap: 16px; padding-top: 18px; padding-bottom: 20px; }
  .k-header { gap: 10px; }
  .k-private { padding-left: 2px; }
  .k-lang { padding: 0 12px; }
  .k-card { border-radius: 26px; gap: 18px; }
  .k-form-wrap, .k-form { gap: 18px; }
  .k-card h2 { font-size: 28px; }
  .k-title { font-size: 34px; }
  .k-intro-en { font-size: 16px; }
  .k-footer { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---- short laptop screens (e.g. 1280×587): keep the card on screen ---- */
@media (min-width: 901px) and (max-height: 760px) {
  .k-page { gap: 10px; padding-top: 16px; padding-bottom: 14px; }
  .k-main { padding: 4px 0; gap: 40px; }
  .k-hero { gap: 12px; }
  .k-scene-wrap { font-size: clamp(7px, 1.25vw, 12px); }
  .k-title { font-size: clamp(32px, 3.4vw, 44px); }
  .k-intro-en { font-size: 15px; line-height: 1.5; }
  .k-intro-th { font-size: 14px; line-height: 1.5; }
  .k-card { padding: 24px 32px; gap: 14px; }
  .k-form-wrap, .k-form { gap: 14px; }
  .k-card-head { gap: 4px; }
  .k-card h2 { font-size: 28px; }
  .k-input { height: 48px; border-radius: 16px; }
  .k-go { height: 52px; }
  .k-arrow { width: 38px; height: 38px; }
  .k-secure { padding: 10px 14px; }
  .k-house { height: 200px; }
}
@media (min-width: 901px) and (max-height: 640px) {
  .k-page { gap: 6px; padding-top: 10px; padding-bottom: 8px; }
  .k-card { padding: 20px 28px; }
  .k-intro-th, .k-card-th { display: none; }
  .k-steps { display: none; }
}
@media (max-width: 360px) {
  .k-input { padding-left: 44px; font-size: 14px; }
  .k-input-icon { left: 15px; }
  .k-input-password { padding-right: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .k-house > span { opacity: 1 !important; }
}