/* ------------------------------------------------------------------ tokens */
/* Northern Thai, by material rather than by flag: mo hom indigo, the dyer's
   cloth of Phrae and Chiang Mai, against rice paper; temple gold for small
   marks; Sangkhalok celadon for anything that means yes. Every pair on the
   page is measured — tools/contrast.py fails the build if one drops below
   its target. */
:root{
  --paper:#F7F4EC;
  --paper-2:#EFE9DD;
  --card:#FFFFFF;
  --ink:#14161C;
  --ink-2:#454C59;
  --ink-3:#5F6775;
  --line:#DED7C9;
  --field-bg:#FFFFFF;
  --field-line:#8C8474;

  --indigo:#24406E;
  --indigo-deep:#1B3157;
  --accent:#24406E;
  --btn-ink:#FFFFFF;
  --focus:#24406E;

  --gold:#8E6310;
  --gold-line:#C79A3A;
  --chip-bg:#F4E7CE;
  --chip-ink:#7A540D;
  --pill-bg:#F4E7CE;
  --pill-ink:#7A540D;

  --celadon:#3B7361;
  --pill2-bg:#DFEDE6;
  --pill2-ink:#2F5F50;

  /* kept for rules written before the palette moved */
  --marigold:#8E6310;
  --marigold-soft:#F4E7CE;
  --jade:#3B7361;
  --teak:#7A540D;

  --line-green:#06C755;
  --line-green-ink:#0A2113;
  --err:#96301A;

  --shadow:0 1px 2px rgba(20,22,28,.05),0 10px 30px -12px rgba(20,22,28,.18);
  --shadow-lift:0 2px 4px rgba(20,22,28,.06),0 26px 50px -18px rgba(20,22,28,.26);
  --r:14px;
  --r-lg:22px;
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1120px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#111319;
    --paper-2:#171A22;
    --card:#1C202A;
    --ink:#F1EEE5;
    --ink-2:#C4C9D4;
    --ink-3:#9AA1AF;
    --line:#2E3440;
    --field-bg:#171A22;
    --field-line:#626D80;

    --indigo:#9DBAE8;
    --indigo-deep:#7FA3DC;
    --accent:#3C63A6;
    --btn-ink:#FFFFFF;
    --focus:#DCA93D;

    --gold:#DCA93D;
    --gold-line:#8A6A24;
    --chip-bg:#2E2416;
    --chip-ink:#EAC57E;
    --pill-bg:#2E2416;
    --pill-ink:#EAC57E;

    --celadon:#7DC4A6;
    --pill2-bg:#163026;
    --pill2-ink:#8FD3B5;

    --err:#FF9C82;
    --marigold:#DCA93D;
    --marigold-soft:#2E2416;
    --jade:#7DC4A6;
    --teak:#EAC57E;

    --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px -12px rgba(0,0,0,.65);
    --shadow-lift:0 2px 4px rgba(0,0,0,.4),0 26px 50px -18px rgba(0,0,0,.72);
  }
}
/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 clamp(16px,.55vw + 15px,18px)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.12;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--card);padding:.6rem 1rem;border-radius:10px;box-shadow:var(--shadow)}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ------------------------------------------------------------------ header */
.top{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.4) blur(14px);
  background:color-mix(in srgb,var(--paper) 82%,transparent);border-bottom:1px solid transparent}
.top.stuck{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:1.25rem;min-height:68px}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--serif);
  font-size:1.12rem;font-weight:600;letter-spacing:-.02em;margin-right:auto}
.mark .stamp{width:30px;height:30px;flex:none;color:var(--ink)}
.nav{display:flex;gap:1.4rem;align-items:center}
.nav a{text-decoration:none;color:var(--ink-2);font-size:.95rem}
.nav a:hover{color:var(--ink)}
@media (max-width:760px){.nav a:not(.btn){display:none}}
/* ------------------------------------------------------------------ buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:0;cursor:pointer;
  font:600 .95rem/1 var(--sans);padding:.85rem 1.3rem;border-radius:999px;text-decoration:none;
  background:var(--ink);color:var(--paper);transition:transform .22s cubic-bezier(.2,.8,.3,1.2),box-shadow .22s,opacity .2s}
.btn.accent{background:var(--accent);color:var(--btn-ink)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
@media (prefers-reduced-motion:no-preference){
  .btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:var(--shadow-lift)}
  .btn:active{transform:translateY(0) scale(.99)}
}
/* ------------------------------------------------------------------ hero */
.hero{position:relative;padding:clamp(3.5rem,8vw,7rem) 0 clamp(2.5rem,5vw,4rem);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:70vh;pointer-events:none;
  background:radial-gradient(60% 60% at 20% 20%,color-mix(in srgb,var(--indigo) 18%,transparent),transparent 70%),
             radial-gradient(50% 50% at 85% 10%,color-mix(in srgb,var(--gold-line) 20%,transparent),transparent 70%);
  filter:blur(10px);opacity:.75}
.hero .wrap{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:1.1rem}
.eyebrow .dot{width:7px;height:7px;border-radius:99px;background:var(--celadon)}
h1{font-size:clamp(2.35rem,5.2vw,4.1rem);max-width:16ch}
.lede{margin-top:1.15rem;font-size:clamp(1.08rem,.7vw + 1rem,1.3rem);color:var(--ink-2);max-width:46ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem;align-items:center}
.reassure{font-size:.9rem;color:var(--ink-3);margin-top:1rem}
/* ------------------------------------------------------------------ ref chip */
.chip{display:none;align-items:center;gap:.55rem;margin-top:1.6rem;padding:.5rem .9rem;
  border-radius:999px;background:var(--chip-bg);color:var(--chip-ink);
  font-size:.85rem;width:max-content;max-width:100%}
.chip.on{display:inline-flex}
.chip code{font:600 .85rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
/* ------------------------------------------------------------------ sections */
section{padding:clamp(3rem,6vw,5.5rem) 0}
.section-head{max-width:54ch;margin-bottom:2.4rem}
.section-head h2{font-size:clamp(1.8rem,2.6vw,2.6rem)}
.section-head p{margin-top:.85rem;color:var(--ink-2)}
.alt{background:var(--paper-2)}
/* ------------------------------------------------------------------ cards */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.6rem 1.5rem;box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
@media (prefers-reduced-motion:no-preference){
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
}
.card h3{font-size:1.2rem;margin-bottom:.55rem}
.card p{color:var(--ink-2);font-size:.98rem}
.card .ico{width:34px;height:34px;margin-bottom:1rem;color:var(--indigo)}
/* ------------------------------------------------------------------ steps */
.steps{counter-reset:s;display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{position:relative;padding-top:3.2rem}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;
  width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:999px;
  background:var(--ink);color:var(--paper);font:600 1rem/1 var(--sans)}
.step h3{font-size:1.15rem;margin-bottom:.5rem}
.step p{color:var(--ink-2);font-size:.98rem}
/* ------------------------------------------------------------------ form */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.6rem);box-shadow:var(--shadow)}
.fields{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.field{position:relative;display:flex;flex-direction:column;gap:.4rem}
.field.wide{grid-column:1/-1}
.field label{font-size:.86rem;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{
  font:400 1rem/1.4 var(--sans);color:var(--ink);background:var(--field-bg);
  border:1.5px solid var(--field-line);border-radius:var(--r);padding:.8rem .9rem;width:100%;
  transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:104px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 30%,transparent)}
.hint{font-size:.82rem;color:var(--ink-3)}
.form-foot{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.6rem}
.status{font-size:.92rem;color:var(--ink-2)}
.status.ok{color:var(--celadon);font-weight:600}
.status.err{color:var(--err);font-weight:600}
.hp{position:absolute;left:-9999px}
/* ------------------------------------------------------------------ faq */
.faq{display:grid;gap:.6rem;max-width:74ch}
details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
summary{cursor:pointer;list-style:none;padding:1.05rem 1.25rem;font-weight:600;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .25s}
details[open] summary::after{transform:rotate(-135deg)}
details p{padding:0 1.25rem 1.2rem;color:var(--ink-2);font-size:.98rem}
/* ------------------------------------------------------------------ share */
.share{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.6rem}
.linkbox{display:flex;gap:.5rem;align-items:center;background:var(--paper);border:1.5px dashed var(--line);
  border-radius:var(--r);padding:.6rem .8rem;font:500 .88rem/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink-2);overflow:auto;white-space:nowrap;max-width:100%}
/* ------------------------------------------------------------------ footer */
footer{border-top:1px solid var(--line);padding:2.6rem 0 3.4rem;color:var(--ink-3);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:flex-start}
footer a{color:var(--ink-2)}
footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}
/* ------------------------------------------------------------------ reveal */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
  .rise.in{opacity:1;transform:none}
}

/* ------------------------------------------------------------- hero layout */
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)}
}
.hero-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.9rem 1.8rem;box-shadow:var(--shadow-lift)}
.hero-card h2{font-size:1.18rem;margin-bottom:1.1rem}
.hero-stamp{position:absolute;right:-26px;top:-22px;width:150px;height:150px;
  color:var(--gold-line);opacity:.30;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .hero-stamp{animation:drift 9s ease-in-out infinite}
  @keyframes drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(7px) rotate(-3deg)}}
}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.ticks li{position:relative;padding-left:1.85rem;color:var(--ink-2);font-size:.98rem;line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:.36em;width:.95rem;height:.55rem;
  border-left:2.4px solid var(--celadon);border-bottom:2.4px solid var(--celadon);
  transform:rotate(-45deg);border-radius:1px}

/* three across reads better than four */
.grid{grid-template-columns:repeat(auto-fit,minmax(296px,1fr))}

@media (max-width:520px){
  .mark{font-size:.98rem;gap:.45rem}
  .mark .stamp{width:26px;height:26px}
  .top .wrap{gap:.6rem}
  .btn{padding:.75rem 1.05rem}
  .hero-stamp{width:110px;height:110px;right:-20px;top:-16px;opacity:.09}
}

/* ---------------------------------------------------------- language + nav */
.nav .lang{font-size:.9rem;color:var(--ink-2);text-decoration:none;
  padding:.35rem .7rem;border-radius:999px;box-shadow:inset 0 0 0 1.3px var(--line)}
.nav .lang:hover{color:var(--ink);box-shadow:inset 0 0 0 1.3px var(--marigold)}
@media (max-width:760px){.nav .lang{display:inline-flex}}
:lang(th) h1,:lang(th) h2,:lang(th) h3{letter-spacing:0;line-height:1.28}
html[lang="th"] body{font-family:"Sukhumvit Set","Noto Sans Thai",Thonburi,"Leelawadee UI","Krungthep",var(--sans);line-height:1.78}
html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3{font-family:inherit;font-weight:700}

/* ------------------------------------------------------------- visa tables */
.lane{max-width:66ch}
.lane li{font-size:1.02rem}
.jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.6rem}
.jump a{text-decoration:none;font-size:.88rem;color:var(--ink-2);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;
  transition:transform .2s cubic-bezier(.2,.8,.3,1.2),border-color .2s,color .2s}
.jump a:hover{color:var(--ink);border-color:var(--indigo)}
@media (prefers-reduced-motion:no-preference){.jump a:hover{transform:translateY(-2px)}}

.vgroup{scroll-margin-top:84px;margin-bottom:3rem}
.vgroup h3{font-size:clamp(1.35rem,2vw,1.7rem)}
.gblurb{margin-top:.4rem;color:var(--ink-3);font-size:.98rem;max-width:56ch}
.visas{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:.55rem}
.visa{display:grid;gap:.35rem 1.1rem;align-items:start;
  grid-template-columns:minmax(96px,132px) minmax(0,1fr);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.15rem;transition:border-color .22s,transform .22s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion:no-preference){
  .visa:hover{transform:translateX(3px);border-color:var(--indigo)}
}
.visa .code{font:700 .92rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--chip-ink);letter-spacing:.02em;padding-top:.1rem}
.visa .body{display:block}
.visa .body strong{display:block;font-size:1.02rem}
.visa .blurb{display:block;color:var(--ink-2);font-size:.95rem;margin-top:.2rem}
.visa .pills{grid-column:2;display:flex;flex-wrap:wrap;gap:.4rem}
.visa .pills:empty{display:none}
.pill{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px;white-space:nowrap}
.pill.asked{background:var(--pill-bg);color:var(--pill-ink)}
.pill.value{background:var(--pill2-bg);color:var(--pill2-ink)}
@media (max-width:560px){
  .visa{grid-template-columns:1fr}
  .visa .pills{grid-column:1}
}

/* ------------------------------------------------------------------- app */
.app-grid{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media (min-width:900px){.app-grid{grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)}}
.phone{position:relative;margin-inline:auto;width:min(272px,100%);aspect-ratio:9/17.5;
  border-radius:38px;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-lift);overflow:hidden;padding:1.5rem 1.2rem;display:grid;
  align-content:start;gap:.7rem}
.phone::before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:76px;height:6px;border-radius:99px;background:var(--line)}
.phone .pday{font:700 clamp(2.4rem,9vw,3.1rem)/1 var(--serif);color:var(--marigold);
  margin-top:1.3rem}
.phone .plabel{font-size:.8rem;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.phone .prow{display:flex;justify-content:space-between;gap:.6rem;font-size:.86rem;
  color:var(--ink-2);border-top:1px solid var(--line);padding-top:.55rem}
.phone .prow b{color:var(--ink);font-weight:600}
.qr{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap;margin-top:1.6rem}
.qr img{width:124px;height:124px;border-radius:12px;background:#fff;padding:8px;
  border:1px solid var(--line)}
.qr p{font-size:.9rem;color:var(--ink-2);max-width:32ch}
.steps-tight{counter-reset:s;display:grid;gap:.7rem;margin:1.4rem 0 0;padding:0;list-style:none;max-width:56ch}
.steps-tight li{position:relative;padding-left:2.4rem;color:var(--ink-2);font-size:.98rem}
.steps-tight li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-.1em;
  width:1.7rem;height:1.7rem;display:grid;place-items:center;border-radius:999px;
  background:var(--paper-2);color:var(--ink);font:600 .82rem/1 var(--sans);
  box-shadow:inset 0 0 0 1px var(--line)}
.free{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;
  background:var(--pill2-bg);color:var(--pill2-ink)}

/* ------------------------------------------------------------------ LINE */
.btn.line{background:var(--line-green);color:var(--line-green-ink)}
.btn.line:hover{background:#05B94E;color:var(--line-green-ink)}
.sico{width:1.05em;height:1.05em;flex:none;display:inline-block;vertical-align:-.15em}
.linebtn{padding:.7rem 1rem}
@media (max-width:760px){.linebtn span{display:none}}
.linelink{color:var(--celadon);font-weight:600;text-decoration:none}
.linelink:hover{text-decoration:underline}

.linepanel{display:flex;gap:clamp(1.2rem,3vw,2.2rem);align-items:center;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow)}
.linepanel > div{flex:1 1 20rem}
.linepanel h3{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;color:var(--celadon)}
.linepanel p{margin:.7rem 0 1.2rem;color:var(--ink-2);max-width:44ch}
.lineqr{width:132px;height:132px;border-radius:14px;background:#fff;padding:8px;
  border:1px solid var(--line);flex:none}

/* --------------------------------------------------------------- share sheet */
.share{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1.6rem}
.sbtn{gap:.45rem}
.sbtn.line{background:var(--line-green);color:var(--line-green-ink);box-shadow:none}
.sbtn.line:hover{background:#05B94E;color:var(--line-green-ink)}

/* ------------------------------------------------------------------ credit */
.credit{margin-top:.6rem;font-size:.85rem;color:var(--ink-3)}
.credit a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.credit a:hover{color:var(--ink);border-bottom-color:var(--gold-line)}