@font-face { font-family:'IBM Plex Sans'; font-display:swap; font-weight:400; src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans'; font-display:swap; font-weight:500; src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans'; font-display:swap; font-weight:600; src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans'; font-display:swap; font-weight:700; src:url(fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans Thai'; font-display:swap; font-weight:400; src:url(fonts/ibm-plex-sans-thai-thai-400-normal.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'; font-display:swap; font-weight:500; src:url(fonts/ibm-plex-sans-thai-thai-500-normal.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'; font-display:swap; font-weight:600; src:url(fonts/ibm-plex-sans-thai-thai-600-normal.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'; font-display:swap; font-weight:700; src:url(fonts/ibm-plex-sans-thai-thai-700-normal.woff2) format("woff2"); unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
/* น้ำมันถูก — /join (tester sign-up). Same palette/dot-grid/teal as the intro page (landing.css); AAAi's /join layout as the model.
   One screen at 390x844: 3 step cards (picture + big number + one line + big button) are all visible. Motion = shared v16 motion.css only (data-stagger, data-reveal, data-press, data-ripple)
   plus one pulsing "tap here" ring (transform/opacity). prefers-reduced-motion switches everything off (motion.css + last block here). */
:root { --acc:#0c635c; --acc-d:#0a5651; --acc2:#14b8a6; --coral:#f0705f; --ink:#111; --mut:#55555c; --line:#e3e3e8; --soft:#f4f4f6; --tint:#e6f4f2; --mint:#d3efea; --hd:52px;
  --sh:0 1px 2px rgba(17,17,17,.04), 0 10px 26px -14px rgba(12,99,92,.32); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:#fff; color:var(--ink); font-family:"IBM Plex Sans","IBM Plex Sans Thai","Pretendard Variable","Noto Sans SC","Noto Sans Devanagari",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; }
html[lang=ko] body { letter-spacing:-.01em; }
html[lang=th] body, html[lang=hi] body { line-height:1.55; }
a { color:var(--acc); }
img, svg { display:block; max-width:100%; }
h1, h2, p { margin:0; }
.wrap { width:100%; max-width:680px; margin:0 auto; padding:0 16px; }
.skip { position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:8px 14px; border-radius:10px; text-decoration:none; }
.skip:focus { top:8px; }
:focus-visible { outline:3px solid var(--acc2); outline-offset:2px; border-radius:10px; }

.hd { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px); }
.hd-in { height:var(--hd); max-width:680px; margin:0 auto; padding:0 16px; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; font-weight:700; font-size:19px; min-height:44px; }
.logo svg { width:22px; height:30px; }
.lang { display:flex; align-items:center; gap:4px; height:40px; padding:0 8px 0 10px; border-radius:999px; background:var(--soft); color:var(--ink); }
.lang select { appearance:none; -webkit-appearance:none; border:0; background:transparent; color:inherit; font:inherit; font-size:16px; font-weight:600; padding:6px 4px; max-width:112px; cursor:pointer; }

.hero { position:relative; margin-top:calc(var(--hd) * -1); padding:calc(var(--hd) + 2px) 0 8px; background:radial-gradient(520px 300px at 92% -10%, var(--mint) 0%, rgba(211,239,234,0) 62%), radial-gradient(420px 260px at -10% 40%, #e8f6f1 0%, rgba(232,246,241,0) 60%); }
.hero::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(12,99,92,.2) 1.2px, transparent 1.4px); background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%); mask-image:linear-gradient(180deg,#000 0%,transparent 85%); pointer-events:none; }
.hero .wrap { position:relative; }
h1 { font-size:28px; line-height:1.3; font-weight:700; letter-spacing:-.02em; background:linear-gradient(100deg,#083f3b,#0c635c 55%,#14b8a6); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:.08em; }
html[lang=th] h1, html[lang=hi] h1 { line-height:1.45; }
/* the one-account rule: the loudest thing on the page */
.gmail { display:flex; gap:10px; align-items:center; margin-top:6px; padding:9px 12px; border-radius:16px; background:#fff3f0; border:2px solid var(--coral); box-shadow:0 8px 20px -14px rgba(240,112,95,.9); }
.gmail svg { flex:none; width:30px; height:30px; fill:#fff; stroke:var(--coral); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.gmail div { min-width:0; }
.gmail b { display:block; font-size:17px; line-height:1.3; font-weight:700; color:#7a2318; }
.gmail span { display:block; font-size:13.5px; line-height:1.4; color:#5b2a22; margin-top:1px; }
html[lang=th] .gmail b, html[lang=hi] .gmail b { line-height:1.4; }
.prog { display:flex; align-items:center; gap:10px; margin-top:8px; }
.bar { flex:1; height:8px; border-radius:99px; background:var(--mint); overflow:hidden; }
.bar i { display:block; height:100%; width:100%; border-radius:inherit; background:linear-gradient(90deg,var(--acc),var(--acc2)); transform-origin:0 50%; transform:scaleX(0); transition:transform var(--m-slow) var(--m-ease-out); }
.prog p { flex:none; font-size:14px; color:var(--mut); font-weight:600; }

.steps { padding-top:6px; }
.cards { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.card { display:grid; grid-template-columns:92px 1fr; gap:10px; align-items:center; padding:8px 12px 8px 8px; border-radius:22px; background:#fff; border:1.5px solid var(--mint); box-shadow:var(--sh); transition:border-color var(--m-base) var(--m-ease), background-color var(--m-base) var(--m-ease); }
.card.done { border-color:rgba(20,184,166,.6); background:linear-gradient(180deg,#f1fbf8,#fff 70%); }
.phone { position:relative; width:92px; height:129px; }
.phone svg { width:100%; height:100%; }
.lbl { position:absolute; left:10%; width:80%; top:57.2%; height:23.8%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1.1; padding:0 4px 0 1px; pointer-events:none; }
.lbl b { font-size:11.5px; font-weight:700; color:#0a3d39; }
.lbl small { font-size:8.5px; color:#3d6b66; font-weight:500; margin-top:1px; white-space:nowrap; }
.lbl small:empty { display:none; }
.lbl.on-dark b { color:#fff; } .lbl.on-dark small { color:#bfe6df; }
html[lang=hi] .lbl b, html[lang=th] .lbl b { font-size:11px; line-height:1.2; }
.tap .ring { transform-box:fill-box; transform-origin:center; animation:j-ring 1.8s var(--m-ease-out) infinite; }
@keyframes j-ring { 0% { transform:scale(.7); opacity:.9; } 70%, 100% { transform:scale(1.5); opacity:0; } }
.card.done .tap { display:none; }
.body { min-width:0; }
.head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.num { position:relative; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:50%; cursor:pointer; background:linear-gradient(140deg,var(--acc),var(--acc2)); color:#fff; display:grid; place-items:center; font:inherit; font-weight:700; font-size:22px; box-shadow:0 8px 16px -8px rgba(12,99,92,.8); }
.num svg { position:absolute; inset:0; margin:auto; width:26px; height:26px; fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; opacity:0; transform:scale(.6); transition:opacity var(--m-fast) var(--m-ease), transform var(--m-base) var(--m-ease-out); }
.num span { transition:opacity var(--m-fast) var(--m-ease); }
.card.done .num { background:#10a38f; }
.card.done .num span { opacity:0; } .card.done .num svg { opacity:1; transform:none; }
.card h2 { font-size:21px; line-height:1.25; font-weight:700; letter-spacing:-.01em; }
html[lang=th] .card h2, html[lang=hi] .card h2 { line-height:1.4; }
.chip { font-style:normal; font-size:11.5px; font-weight:700; line-height:1; color:#7a2318; background:#fff3f0; border:1px solid var(--coral); border-radius:99px; padding:4px 8px; }
.desc { font-size:14.5px; line-height:1.4; color:var(--mut); margin:2px 0 6px; }
.btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; width:100%; padding:10px 16px; border:0; border-radius:16px; background:var(--acc); color:#fff; font:inherit; font-size:17px; font-weight:700; text-decoration:none; cursor:pointer; box-shadow:0 10px 20px -12px rgba(12,99,92,.9); transition:transform var(--m-fast) var(--m-spring), background-color var(--m-fast) var(--m-ease); }
.btn:hover { background:var(--acc-d); }
.btn svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn svg.gp { fill:currentColor; stroke:none; }
.btn.ghost { background:var(--tint); color:var(--acc-d); box-shadow:none; width:auto; }
.btn.ghost:hover { background:var(--mint); }
.card.done .btn { background:#10a38f; }
/* steps 2-3 before the closed test is published (join-config.json optInLive=false): visible but dimmed, and the page says why */
.card[data-locked] .btn { opacity:.55; filter:saturate(.6); cursor:not-allowed; }
.card[data-locked] .tap { display:none; }
.pend { margin-top:9px; padding:9px 12px; border-radius:14px; background:var(--tint); color:var(--acc-d); font-size:14px; line-height:1.45; font-weight:600; }
.pend.nudge { animation:m-pop var(--m-slow) var(--m-ease-out); }
.remind { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:10px; color:var(--acc-d); font-size:15px; }
.remind svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; }
.all { display:flex; gap:12px; align-items:center; margin-top:10px; padding:14px; border-radius:20px; background:linear-gradient(135deg,var(--acc),#10a38f); color:#fff; box-shadow:0 16px 30px -16px rgba(12,99,92,.9); }
.all[hidden] { display:none; }
.all:not([hidden]) { animation:m-scale-in var(--m-slow) var(--m-ease-out) backwards; }
.all > svg { flex:none; width:40px; height:40px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.all b { font-size:19px; } .all p { font-size:15px; opacity:.95; margin-top:2px; }

.notes, .two, .faq { margin-top:22px; }
.ncard { display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:20px; background:var(--soft); }
.ncard > svg { flex:none; width:28px; height:28px; fill:none; stroke:var(--acc); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
.ncard h2, .panel h2 { font-size:18px; line-height:1.3; }
.ncard p { color:var(--mut); font-size:15px; margin:3px 0 10px; }
.two { display:grid; gap:12px; }
.panel { padding:16px; border-radius:20px; border:1.5px solid var(--line); background:#fff; box-shadow:var(--sh); }
.panel .row { margin-top:10px; }
.note { color:var(--mut); font-size:14.5px; margin-top:8px; min-height:1.2em; }
.qr img { width:168px; height:168px; margin:10px 0 2px; border-radius:12px; }
.faq h2 { font-size:22px; margin-bottom:10px; }
.faqs { display:grid; gap:8px; }
details { border:1.5px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
summary { list-style:none; cursor:pointer; min-height:52px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; font-weight:600; font-size:16.5px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:""; flex:none; width:10px; height:10px; border-right:2.4px solid var(--acc); border-bottom:2.4px solid var(--acc); transform:rotate(45deg) translateY(-2px); transition:transform var(--m-base) var(--m-ease-out); }
details[open] summary::after { transform:rotate(-135deg) translateY(-2px); }
details[open] > p { animation:m-fade-in var(--m-base) var(--m-ease) backwards; }
details > p { padding:0 14px 14px; color:var(--mut); font-size:15.5px; }
.ft { margin-top:28px; padding:18px 0 28px; border-top:1px solid var(--line); text-align:center; font-size:14px; color:var(--mut); }
.ft .wrap { display:flex; flex-wrap:wrap; gap:6px 10px; justify-content:center; }
.ft a { color:var(--mut); }
@media (min-width:680px) { h1 { font-size:34px; } .two { grid-template-columns:1fr 1fr; } }
@media (prefers-reduced-motion:reduce) { .tap .ring { animation:none; opacity:.6; } .pend.nudge, .all:not([hidden]), details[open] > p { animation:none; } .bar i, .num svg, summary::after { transition:none; } }

/* first paint in a non-Thai language: hidden until the script has swapped the baked Thai text (fails open after 1.5 s) */
html.pl body { opacity:0; animation:plshow .01s linear 1.5s forwards; } @keyframes plshow { to { opacity:1; } }

/* in-app browser (Facebook/LINE) hint: shown by join.js only inside such a browser */
.iab { display:flex; gap:10px; align-items:flex-start; margin-top:8px; padding:10px 12px; border-radius:16px; background:#fff8e1; border:2px solid #f2b705; }
.iab[hidden] { display:none; }
.iab > svg { flex:none; width:28px; height:28px; fill:#fff; stroke:#a67c00; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.iab div { min-width:0; }
.iab b { display:block; font-size:17px; line-height:1.4; font-weight:700; color:#5c4300; }
.iab span { display:block; font-size:14px; line-height:1.5; color:#4a3700; margin-top:2px; }
.iabrow { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.iabrow .btn { min-height:44px; padding:8px 14px; font-size:15px; }
.iab small { display:block; min-height:1em; margin-top:4px; font-size:13px; color:#4a3700; }

/* "See all apps" -> the owner's app collection page (AA common rule 2026-11-02). Ghost pill, line icon (same stroke style as the other icons), whole words only; grows taller instead of overflowing at 200% text. */
.btn.apps { width:100%; margin-top:12px; max-width:100%; height:auto; min-height:48px; white-space:normal; text-align:center; line-height:1.3; }
.btn.apps span { word-break:keep-all; overflow-wrap:normal; hyphens:none; text-wrap:balance; }
html[lang=th] .btn.apps span, html[lang=hi] .btn.apps span { white-space:nowrap; }
.btn.apps svg.ai { width:22px; height:22px; transition:transform var(--m-base) var(--m-ease-out); }
.btn.ghost.apps { box-shadow:inset 0 0 0 2px var(--acc); }
.btn.apps:hover svg.ai { transform:translateX(3px); }
@media (prefers-reduced-motion:reduce) { .btn.apps svg.ai { transition:none; } .btn.apps:hover svg.ai { transform:none; } }

/* owner rule 2026-11-02 15:02: info cards (retry note, "invite others", "open on device" QR, the all-done banner) are centred: title, text, buttons, QR, icon. The 3 step cards keep their phone-left layout. */
.ncard, .panel, .all { text-align:center; }
.ncard { flex-direction:column; align-items:center; gap:8px; }
.ncard > svg { margin-top:0; }
.ncard > div { width:100%; }
.panel .row { display:flex; justify-content:center; }
.panel .note { text-align:center; }
.qr img { margin:10px auto 2px; }
.all { flex-direction:column; justify-content:center; gap:6px; }

/* Korean: wrap only at spaces, never inside a word (owner rule; 2026-11-10) */
:lang(ko) { word-break:keep-all; overflow-wrap:break-word; }