/* ===========================================================
   SalonX TH — stylesheet

   COLOUR  = the live Framer design system (verified 19 Aug 2026).
             The Thai brand guideline's warm palette (Canvas Cream,
             Warm Slate, brown ramp) is MARKETING-only — do not
             bring it onto the site.
   TYPE    = the Thai brand guideline (pp.24-27), NOT Framer's
             JP type styles. TWO fonts on the website, not four:
               IBM Plex Sans Thai — headings & subheadings  (primary)
               Anuphan            — body, buttons, tags     (secondary)
             Kerning 0. Extra leading where Thai tone marks stack.

             Mitr (display) and Sriracha (accent) are in the brand
             guideline but are NOT website fonts — social, print and
             campaign only (Lukzo, 14 Sep 2026). They were imported
             here and drawn by nothing, so every visitor downloaded
             two faces the site never used. The guideline lists four
             because it covers every surface; a website runs on two.

   Rule from the system: neutrals carry the site; orange is a
   purposeful accent, never a section fill. Card surface is
   #FCFCFC, not pure white.
   =========================================================== */
:root{
  /* ── TYPE SCALE (added 2 Sep 2026) ────────────────────────────────────
     Ten steps, built from the sizes the site already leaned on. Body is
     19px because Thai vowel and tone marks stop resolving much under 18.
     --fs-price sits outside the text ramp on purpose: a price figure is a
     display numeral, not body copy.
     Being adopted page by page. Anything still hardcoded predates this. */
  --fs-micro:12px;   --lh-micro:1.5;
  --fs-caption:13px; --lh-caption:1.5;
  --fs-small:15px;   --lh-small:1.6;
  --fs-body-s:17px;  --lh-body-s:1.65;
  --fs-body:19px;    --lh-body:1.6;
  --fs-lede:22px;    --lh-lede:1.6;
  --fs-h3:26px;      --lh-h3:1.4;
  --fs-h2:32px;      --lh-h2:1.35;
  --fs-h1:44px;      --lh-h1:1.2;
  --fs-display:56px; --lh-display:1.12;
  --fs-price:48px;   --lh-price:1;

  /* brand */
  --orange:#FF9419; --orange-hover:#E07D0A;
  --warm-glow:#FBC384; --light-primary:#FCEBDB;
  --blue:#408FFF; --clear-sky:#95C1FF; --mist-blue:#EBF2FF;
  --craft-brown:#332D28;

  /* neutrals — the workhorse */
  --n50:#FAFAF9; --n100:#F5F5F4; --n200:#E7E5E4; --n300:#D7D3D1;
  --n400:#A8A29F; --n500:#808080;
  --n600:#4C4C4C; --n700:#3D3D3D; --n800:#2D2D2D; --n900:#1E1E1E;
  --surface:#FCFCFC;

  /* status & social */
  --error:#DC2626; --success:#16A34A;
  --line-green:#32CC12; --line-green-hover:#8DD180;

  /* semantic aliases used through the sheet */
  --ink:var(--n900); --mid:var(--n600); --soft:var(--n400);
  --line:var(--n300); --line-2:var(--n200);
  --bg:var(--surface); --bg-2:var(--n100); --box:var(--n200);
  --link:var(--blue);

  /* radius — measured off salonx.jp, 19 Aug 2026 */
  /* Corner radius — 8 / 12 / 18 / 26, agreed 7 Sep 2026.
     These used to be out of order: --r-xs was 12px and --r-sm was 10px, so
     "extra small" was LARGER than "small" and anything reaching for the
     smaller step picked the bigger one. Now xs < sm < md < lg. */
  --r-xs:8px;    /* inputs, buttons, small chips */
  --r-sm:12px;   /* card images, thumbnails, quotes */
  --r-md:18px;   /* feature and pain cards — verified live */
  --r-lg:26px;   /* large surfaces, bands */
  --r-full:999px;/* pills */

  /* elevation — UNVERIFIED. The live site uses NO shadow on cards;
     hover is a flat background tint, not a lift. Kept only in case a
     future surface needs one. Do not apply to cards. */
  --e-sm:0 2px 8px rgba(51,45,40,.06);
  --e-md:0 8px 24px rgba(51,45,40,.10);
  --e-lg:0 16px 40px rgba(51,45,40,.16);

  /* motion — the system's easing, measured live */
  --ease:cubic-bezier(0.44,0,0.56,1);
  --dur:.4s;

  /* type — roles from the Thai brand guideline */
  --thai-fallback:"Noto Sans Thai","Leelawadee UI",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-head:"IBM Plex Sans Thai",var(--thai-fallback);      /* headings & subheadings */
  --font:"Anuphan",var(--thai-fallback);                      /* body, buttons, tags */
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--n50);line-height:1.6}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---- wireframe chrome ---- */
.wf-bar{background:var(--ink);color:#fff;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.04em;padding:8px 0}
.wf-bar .wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.wf-bar a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.wf-bar .who{margin-left:auto;color:#9A9A9A}

/* ---- review notes ---- */
.notes{background:var(--bg-2);border-bottom:1px solid var(--line);padding:16px 0;font-size:var(--fs-caption)}
.notes h2{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--mid);margin-bottom:8px}
.notes ul{margin:0 0 0 16px}
.notes li{margin-bottom:4px;color:var(--mid)}
.notes b{color:var(--ink)}
.notes button{background:none;border:1px solid var(--line);border-radius:8px;padding:4px 12px;font:inherit;font-size:var(--fs-caption);cursor:pointer;margin-top:12px}
.notes.collapsed ul{display:none}
.flag{display:inline-block;border:1px solid var(--ink);font-family:var(--mono);font-size:var(--fs-caption);padding:1px 4px;border-radius:3px;margin-left:4px;text-transform:uppercase}

/* ---- header ----
   Floating pill on scroll. Every value measured off live salonx.asia
   (1639px viewport, 20 Aug 2026):
     at rest   bar 1200x50, transparent, no radius, no shadow
     scrolled  bar 1050x70, #FCFCFC, radius 12px,
               shadow 0 4px 8px rgba(0,0,0,.05), padding 10px 20px
   The outer bar carries the page colour at rest so content is hidden
   behind it, then goes transparent so the pill floats over the page.
   Scaled to this site's 1080px wrap: 1080 -> 945 is the same 87.5%. */
header{position:sticky;top:0;z-index:40;padding:16px 0;background:var(--n50);
  border-bottom:0;transition:background var(--dur) var(--ease)}
header.scrolled{background:transparent}
.bar{display:flex;align-items:center;gap:24px;height:50px;
  background:transparent;border-radius:0;box-shadow:none;padding:0 16px;
  transition:background var(--dur) var(--ease),border-radius var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),max-width var(--dur) var(--ease),
             height var(--dur) var(--ease)}
header.scrolled .bar{max-width:945px;height:70px;background:var(--surface);
  border-radius:12px;box-shadow:0 4px 8px rgba(0,0,0,.05)}
/* real SalonX wordmark, vector. Height drives it; width follows the
   logo's own 3.99:1 ratio so it can never be squashed. */
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo img{height:26px;width:auto;display:block}
/* header-scoped: the footer's link columns are <nav> too, and unscoped rules
   here put underlines and a flex row on them. */
header nav{margin-left:auto;display:flex;gap:24px}
header nav a{color:var(--ink);text-decoration:none;font-size:var(--fs-small);border-bottom:1px solid var(--line)}
.btn{display:inline-block;border:1px solid var(--orange);background:var(--orange);color:#fff;
  text-decoration:none;padding:12px 24px;font-weight:600;font-size:var(--fs-small);cursor:pointer;
  font-family:inherit;text-align:center;transition:background .15s,border-color .15s}
.btn:hover{background:var(--orange-hover);border-color:var(--orange-hover)}
.btn-lg{padding:12px 32px;font-size:var(--fs-body-s)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--n300);font-weight:600}
.btn-ghost:hover{background:var(--n100);border-color:var(--n300)}
/* LINE button — the system has a dedicated one */
.btn-line{background:var(--line-green);border-color:var(--line-green);color:#fff}
.btn-line:hover{background:var(--line-green-hover);border-color:var(--line-green-hover)}
.menu-btn{display:none;border:1px solid var(--line);background:none;width:42px;height:42px;font-size:var(--fs-body-s);cursor:pointer}

/* ---- generic ---- */
/* no divider rules between sections — spacing and background do the
   separating, the way the live site does it. */
section{padding:48px 0}
.alt{background:var(--n100)}
/* headings = IBM Plex Sans Thai. Kerning 0; leading kept loose enough
   that Thai tone marks (่ ้ ๊ ๋) don't collide with the line above. */
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);letter-spacing:0}
h1{font-size:var(--fs-h1);line-height:1.32;font-weight:700}
/* every section heading and its lede sit centred (Lukzo, 21 Aug) */
h2.sec{font-size:var(--fs-h3);line-height:1.38;font-weight:700;text-align:center}
.center{text-align:center}
p.lede{color:var(--mid);font-size:var(--fs-body-s);margin-top:8px;text-align:center;
  max-width:52em;margin-left:auto;margin-right:auto}
.center p.lede{margin-left:auto;margin-right:auto;max-width:44em}
/* the see-all links are gone, so this is just a centred header block now */
.head-row{display:block;text-align:center}
.seeall{color:var(--link);font-weight:600;text-decoration:none;white-space:nowrap}

/* section labels so you can name what you're looking at */
/* Wireframe section labels. No page ships data-label any more, so the
   pseudo-element was rendering empty and still pushing content down 18px.
   Neutralised where the attribute is absent (1 Sep 2026). */
section:not([data-label])::before,.hero:not([data-label])::before{content:none;display:none}
section::before,.hero::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);max-width:1080px;margin:0 auto 16px;padding:0 24px}

/* ---- hero ---- */
.hero{padding:64px 0 48px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero p.sub{font-size:var(--fs-body);color:var(--mid);margin:16px 0 12px;max-width:32em}
.mech{font-size:var(--fs-body-s);font-weight:600;margin-bottom:24px}
/* The two hero buttons need 440px and the copy column is 437 — a 3px miss
   that wrapped them onto two rows at every desktop width. Slightly tighter
   gap and side padding buys ~17px, so they hold one row. */
.hero-cta{display:flex;gap:8px;flex-wrap:wrap}
.hero-cta .btn-lg{padding-left:24px;padding-right:24px}

/* ---- image placeholders ---- */
.ph,.thumb{background:var(--box);border:1px solid var(--line);color:var(--soft);font-family:var(--mono);font-size:var(--fs-caption);display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;position:relative}
.ph{min-height:280px}
.thumb{min-height:120px;margin-bottom:12px}
.ph::after,.thumb::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top right,transparent calc(50% - 1px),var(--line),transparent calc(50% + 1px)),
  linear-gradient(to top left,transparent calc(50% - 1px),var(--line),transparent calc(50% + 1px));
  opacity:.7}

/* ---- cards ---- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
/* .grid4 is the ประเภทร้าน row. Three columns since the spa card came out
   (20 Aug 2026) — the three cards share the full row width. Class name kept
   so the page-scoped `.grid4 .card` rules in index.html still apply. */
.grid4{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
/* Card + hover measured off the live salonx.jp Feature Card, 19 Aug 2026.
   The system's card hover is a FLAT BACKGROUND TINT — no lift, no shadow,
   no border change — plus the "more" label sliding in from a clipped edge.
   Do not reintroduce elevation here. */
.card{background:var(--surface);border:1px solid var(--n200);
  padding:24px;text-decoration:none;color:inherit;display:block;overflow:hidden;
  transition:background var(--dur) var(--ease)}
.card:hover{background:var(--n200)}           /* #FCFCFC → #E7E5E4 */
.card h3{font-size:var(--fs-lede);margin-bottom:4px}
.card p{color:var(--mid);font-size:var(--fs-body-s)}
/* "ดูรายละเอียด" — right-aligned, brand orange. Lukzo's call, 20 Aug:
   one behaviour and one colour for every card on the page. */
.more{display:block;text-align:right;margin-top:12px;text-decoration:none;
  color:var(--orange);font-weight:400;font-size:var(--fs-small);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease)}

/* Hidden until hover, on EVERY card — why-cards, ประเภทร้าน and features alike.

   Pinned bottom-right: the card is a flex column and the label takes
   margin-top:auto, so it sits on the bottom edge no matter how long the
   list above it runs. At rest it is parked one full label-height plus the
   card's bottom padding BELOW that line — i.e. outside the card — and the
   card's overflow:hidden clips it away. On hover it slides straight up
   into place. No fade: the mask does the work. */
.card{display:flex;flex-direction:column}
.card .more{margin-top:auto;transform:translateY(calc(100% + 32px))}
.card:hover .more,.card:focus-within .more{transform:translateY(0)}
/* touch devices have no hover, so the slide-up never fires and the link
   sat permanently out of sight while still holding its space. Show it. */
@media (hover:none){.card .more{transform:none}}
.tag{display:inline-block;border:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-caption);padding:2px 8px;margin-bottom:8px;text-transform:uppercase;color:var(--mid)}
.soon{border-style:dashed}

/* ---- why blocks ---- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.why h3{font-size:var(--fs-lede);margin-bottom:4px}
/* eyebrow — was --soft (#A8A29F), about 2.2:1 on the card and unreadable.
   --n600 gives ~8:1 and 600 weight holds it at 13px. Still quieter than the
   h3 below it, so it labels the card without competing with the headline. */
.why .kick{font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--n600);font-weight:600;margin-bottom:12px;line-height:1.3}
.why p{color:var(--mid);font-size:var(--fs-body-s)}
/* :not(.more) so the why-card link keeps the shared orange "ดูรายละเอียด"
   treatment above instead of the blue text-link colour. */
.why a:not(.more){color:var(--link);font-weight:600;text-decoration:none;font-size:var(--fs-small);display:inline-block;margin-top:8px}

/* ---- quotes ---- */
blockquote{border:1px solid var(--line);padding:24px;font-size:var(--fs-body-s)}
/* Testimonial card (promoted from index.html, 2 Sep 2026 — now used on the
   homepage AND the pricing page, so it belongs here rather than duplicated).
   Owner photo beside the name, pinned to the bottom so every name row lines
   up however long the quote runs. .q wraps the quote body so the origin tag
   stays out of the flex flow. */
.grid3 blockquote{display:flex;flex-direction:column;height:100%}
.grid3 blockquote .q{flex:1 1 auto}
blockquote footer{display:flex;align-items:flex-start;gap:12px;margin-top:auto;padding-top:16px}
blockquote .avatar{flex:0 0 54px;width:54px;height:54px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);
  font-size:9px;color:var(--soft);text-align:center;line-height:1.1}
blockquote .avatar img{width:100%;height:100%;object-fit:cover;border-radius:8px}
blockquote .who{display:flex;flex-direction:column;gap:4px;min-width:0;min-height:64px}
blockquote .who b{font-size:var(--fs-small);font-weight:600;line-height:1.4}
blockquote .who i{font-style:normal;font-size:var(--fs-caption);line-height:1.5;color:var(--soft)}
/* Japan-origin tag: the flag in a rectangle. Label survives via aria-label. */
.origin.origin-flag{display:block;width:fit-content;border:0;border-radius:2px;padding:0;line-height:0}
.origin-flag svg{display:block}
blockquote footer{margin-top:12px;color:var(--mid);font-size:var(--fs-small)}
.origin{display:inline-block;border:1px solid var(--line);color:var(--mid);font-family:var(--mono);font-size:var(--fs-caption);padding:1px 8px;margin-bottom:8px}

/* ---- band ---- */
.band{border:2px solid var(--ink);padding:32px 24px;text-align:center}

/* ---- forms ---- */
form{display:grid;gap:12px;margin-top:24px;text-align:left;max-width:520px}
.center form{margin-left:auto;margin-right:auto}
label{font-size:var(--fs-caption);font-weight:600}
input{width:100%;padding:12px 12px;border:1px solid var(--line);font:inherit;font-size:var(--fs-small);background:var(--bg)}
input:focus{outline:2px solid var(--ink);outline-offset:1px}
.consent{font-size:var(--fs-caption);color:var(--mid)}
.consent a{color:var(--ink)}

/* ---- faq ---- */
.faq{max-width:none;margin:24px 0 0}
details{border:1px solid var(--line);margin-bottom:12px}
summary{list-style:none;cursor:pointer;padding:16px 48px 16px 16px;font-weight:600;font-size:var(--fs-small);position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:var(--fs-lede);color:var(--mid);font-weight:400;line-height:1}
details[open] summary::after{content:"−"}
details .ans{padding:0 16px 16px;color:var(--mid);font-size:var(--fs-small)}

/* ---- steps ---- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.steps div{position:relative;padding-top:32px}
.steps div::before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:30px;height:30px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--fs-caption)}
.steps h3{font-size:var(--fs-body-s);margin-bottom:4px}
.steps p{color:var(--mid);font-size:var(--fs-small)}

/* ---- breadcrumb ---- */
.crumb{padding:16px 0 0;font-size:var(--fs-caption);color:var(--mid)}
.crumb a{color:var(--mid)}

/* ---- start-here board ---- */
.board{width:100%;border-collapse:collapse;margin-top:24px;font-size:var(--fs-small)}
.board th{text-align:left;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);border-bottom:1px solid var(--line);padding:0 12px 8px 0;font-weight:400}
.board td{border-bottom:1px solid var(--line-2);padding:12px 12px 12px 0;vertical-align:top}
.board a{color:var(--link);font-weight:600}
.st{font-family:var(--mono);font-size:var(--fs-caption);border:1px solid var(--line);padding:2px 8px;white-space:nowrap;text-transform:uppercase}
.st-done{border-color:var(--ink);color:var(--ink)}
.st-todo{border-style:dashed;color:var(--soft)}
.st-you{border-color:var(--ink);background:var(--ink);color:#fff}

/* ---- site footer ----
   Every value measured off the live salonx.asia footer, 21 Aug:
     panel      #2D2D2D  (Neutral/800)
     heading    #FCFCFC  24px / 600
     link       #E7E5E4  16px / 500
     social +
     copyright  #808080  16px / 500                                        */
footer.site{background:var(--n800);color:var(--surface);padding:64px 0 32px;margin-top:0}
footer.site .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px;
  align-items:start;padding-bottom:48px}
/* the header's `nav` rules (flex row, margin-left:auto, gap) also match these
   <nav> columns, so undo them here or the links lay out sideways. */
footer.site .foot-col{display:block;margin-left:0;gap:0}
footer.site .foot-logo img{height:34px;width:auto;display:block}
footer.site .foot-head{font-family:var(--font-head);font-size:var(--fs-lede);font-weight:600;
  color:var(--surface);margin:0 0 16px}
footer.site .foot-col a{display:flex;align-items:center;gap:8px;
  color:var(--n200);text-decoration:none;font-size:var(--fs-small);font-weight:500;
  padding:8px 0;transition:color var(--dur) var(--ease)}
/* hover DIMS the link rather than brightening it — that's what the live
   footer does (Lukzo, 21 Aug). Transition is the site's own
   0.4s cubic-bezier(0.44,0,0.56,1), read off the live link. */
footer.site .foot-col a:hover{color:var(--n500)}
/* the social row sits a shade quieter at rest, same as live. Its hover
   direction is UNVERIFIED — brightening so the link still answers. */
footer.site .foot-col a[target="_blank"]{color:var(--n500)}
footer.site .foot-col a[target="_blank"]:hover{color:var(--n200)}
footer.site .foot-col svg{width:20px;height:20px;flex:none;fill:none;
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
footer.site .foot-legal{border-top:1px solid rgba(255,255,255,.14);
  padding-top:24px;margin:0;font-size:var(--fs-small);font-weight:500;color:var(--n500)}
@media(max-width:900px){
  footer.site{padding:48px 0 24px}
  /* two link columns side by side under a full-width logo, rather than
     three stacked blocks that make the footer very tall */
  footer.site .foot-top{grid-template-columns:1fr 1fr;gap:32px 24px;padding-bottom:32px}
  footer.site .foot-logo{grid-column:1 / -1}
}

@media(max-width:900px){
  /* the header pill is full-bleed on tablet because .wrap has no max-width
     to bite on at this size — inset it so it does not touch the edges */
  header .bar{margin-left:16px;margin-right:16px}
  header nav{display:none}
  .menu-btn{display:block;margin-left:auto;order:2}
  /* the bar's 24px gaps left the CTA no room and it wrapped to two lines.
     Tighter gap + padding, and nowrap so it can never split again. */
  /* less air inside the header pill itself on small screens */
  .bar{gap:8px;padding:0 12px}
  header{padding:12px 0}
  .bar .btn{order:3;padding:8px 12px;font-size:var(--fs-caption);white-space:nowrap}
  .logo{order:1}
  /* the open panel now lines up with the inset pill instead of running
     edge to edge, and hangs off the bar's real bottom in both the plain
     and the scrolled (taller) header states. */
  /* same treatment as the desktop .dd dropdown: 12px clear of the bar,
     1px line, 10px radius, same shadow. The bar's bottom sits 20px above
     the header's, so the gap is calc(100% - 20px + 12px). */
  header nav.open{display:flex;position:absolute;top:calc(100% - 8px);
    left:auto;right:16px;width:min(340px,calc(100% - 32px));
    background:var(--bg);flex-direction:column;gap:0;padding:16px 16px 16px;
    border:1px solid var(--line);border-radius:8px;
    box-shadow:0 10px 28px rgba(0,0,0,.09);z-index:70}
  /* no rules between rows, and the top-level links line up with the
     section headers rather than sitting hard against the panel edge */
  header nav.open a{padding:12px 0;border-bottom:0}
  header nav.open > a{padding:12px 12px}
  h1{font-size:var(--fs-h2)}
  h2.sec{font-size:var(--fs-lede)}
  .hero-grid,.steps{grid-template-columns:1fr}
  /* the three ทำไมร้านถึงเลือก cards stay in one row on tablet */
  .why{grid-template-columns:repeat(3,1fr);gap:12px}
  /* the three ประเภทร้าน cards stay side by side on tablet */
  .grid4{grid-template-columns:repeat(3,1fr);gap:12px}
  /* tablet keeps two cards per row — one per row makes the section
     scroll for ages on an iPad. Single column starts at phone width. */
  .grid3{grid-template-columns:1fr 1fr}
  section{padding:32px 0}
  /* the hero needs clear air under the sticky bar — 40px put the headline
     right against it on tablet */
  .hero{padding:64px 0 32px}
  .board thead{display:none}
  .board td{display:block;border:0;padding:4px 0}
  .board tr{display:block;border-bottom:1px solid var(--line);padding:12px 0}
}

/* ── corner radius, one scale ──────────────────────────────────────────
   Set once here so nothing drifts.
     xs 12px  card images, testimonial cards        — VERIFIED on salonx.jp
     md 18px  feature cards, pain cards             — VERIFIED on salonx.jp
     sm 10px  buttons, inputs, menu rows            — unverified
     lg 20px  panels, CTA band, large surfaces      — unverified            */


.btn,.btn-lg,.btn-ghost,.menu-btn,.notes button,
input,textarea,select{border-radius:var(--r-sm)}
.ph,.thumb,blockquote{border-radius:var(--r-sm)}
.card,.paincard,.faq details{border-radius:var(--r-md)}
.band,.notes,.dd,.steps>div{border-radius:var(--r-lg)}
.tag,.soon,.flag,.st,.origin,.pill{border-radius:var(--r-full)}
.dd a{border-radius:var(--r-sm)}
/* เกี่ยวกับเรา menu — same breathing room as the ประเภทร้าน / ฟีเจอร์ menus,
   which use .dd-wide. ID selector so it wins over the page-scoped .dd rules. */
#dd-about{padding:12px 12px;min-width:250px}
#dd-about a{padding:12px 12px;font-size:var(--fs-small);line-height:1.4;
  /* 50px matches the icon-bearing rows in the ประเภทร้าน / ฟีเจอร์ menus,
     whose 24px icons make each row taller than its text alone. */
  min-height:50px;box-sizing:border-box}
/* .avatar{border-radius:50%} removed 7 Sep — no element on the site matches it.
   Every avatar is a testimonial one and blockquote .avatar sets those to 8px. */
.wf-bar{border-radius:0}

/* image slot label — shows the exact filename to drop into public/img/th/.
   Delete this rule once every slot has a real image. */
.slot{display:inline-block;margin-top:4px;font-family:var(--mono);font-size:var(--fs-caption);
  letter-spacing:.04em;color:var(--n500);background:var(--n100);
  border:1px solid var(--line-2);border-radius:4px;padding:1px 4px}

/* ---- merchant logo strip ----
   Sits just before the testimonials: logos carry the "real shops use it"
   claim, the quotes below carry the detail. No heading — the row is read
   as texture, not as a section to stop at.

   Loops right to left. The logo set is in the markup twice, so animating
   the track to -50% lands exactly where it started and the loop is
   seamless. */
/* the marquee belongs to the testimonial block above it, so the two sit
   close together rather than reading as separate sections */
.logos{padding:0 0 48px;overflow:hidden}
/* Strip sitting INSIDE a section, between the intro and the cards
   (pricing). Even 40px above and below so it reads as part of the proof
   block rather than floating between two things. */
.logos.logos-inline{padding:32px 0}
section:has(+ .logos){padding-bottom:32px}
.logos::before{content:none}          /* no wireframe section label here */
.marquee{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* no flex gap: the spacing lives on each item as margin-right, so one copy's
   width includes its own trailing space. That's what makes -12.5% land
   exactly on a copy boundary. */
.track{display:flex;align-items:center;width:max-content;
  animation:logo-scroll 12s linear infinite}
.marquee:hover .track{animation-play-state:paused}
/* full colour, like salonx.asia — no greyscale, no hover change. */
.track img{height:82px;width:auto;max-width:280px;object-fit:contain;
  background:var(--surface);border-radius:var(--r-sm);padding:12px 24px;
  margin-right:16px;flex:none}
@keyframes logo-scroll{from{transform:translateX(0)}to{transform:translateX(-12.5%)}}
@media(prefers-reduced-motion:reduce){.track{animation:none}}
@media(max-width:640px){
  .track{animation-duration:9s}
  .track img{height:60px;max-width:190px;padding:8px 16px;margin-right:12px}
}

/* ---- stat band ----
   Measured off live salonx.asia: number 56px / weight 500 / brand orange,
   label 20px / Neutral/600 / centred. Numbers count up on first view. */
/* the card straddles the colour change: page colour behind its top half,
   the grey of the section below behind its bottom half, so it reads as
   bridging the two. Padding is even top and bottom so the 50% split lands
   on the card's middle. */
.stats{padding:48px 0;border-top:0;
  background:linear-gradient(to bottom,var(--n50) 50%,var(--n100) 50%)}
.stats::before{content:none}
/* the three figures sit on one card, not loose on the page */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start;
  background:var(--surface);border:1px solid var(--n200);border-radius:26px;
  padding:48px 32px}
.stat{text-align:center}
.stat-num{font-family:var(--font-head);font-size:var(--fs-display);line-height:1.1;font-weight:500;
  color:var(--orange);letter-spacing:0;
  font-variant-numeric:tabular-nums}   /* digits keep one width, so the
                                          number doesn't jitter as it counts */
/* the <br>s in the markup set the breaks; no max-width fighting them */
.stat-label{font-size:var(--fs-body);line-height:1.5;color:var(--mid);margin-top:8px}
@media(max-width:900px){
  /* tablet keeps the three numbers side by side — a vertical stack of three
     makes the band three screens tall on an iPad. Only the type steps down. */
  /* card sits further in from the screen edge on tablet, and carries less
     internal padding so it does not read as a full-bleed slab */
  .stat-row{gap:24px;margin:0 24px;padding:32px 24px}
  .stat-num{font-size:var(--fs-h1)}
  .stat-label{font-size:var(--fs-body-s)}
}
@media(max-width:640px){
  /* the three figures stay in one row at every width — stacked they made the
     band three screens tall. Type and gap step down instead. */
  .stat-row{gap:8px;margin:0 16px;padding:24px 12px}
  .stat-num{font-size:var(--fs-h2)}
  .stat-label{font-size:var(--fs-caption);line-height:1.4;margin-top:4px}
  /* less air above and below the band on a phone. The hero's own bottom
     padding stacks on top of this, so that comes down too. */
  .stats{padding:12px 0}
  .hero{padding-bottom:24px}
  .grid3,.grid4,.why{grid-template-columns:1fr}
}
/* two testimonials below desktop, not three. On tablet the third was
   stranded alone on a second row; on a phone it was just a third scroll.
   Hidden, not removed — it returns at desktop width. */
@media(max-width:900px){
  .grid3 > blockquote:nth-of-type(3){display:none}
}

/* ---- outcome checks (industry pages, under the hero image) ---- */
.checks{list-style:none;margin:24px 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px}
.checks li{display:flex;align-items:center;gap:8px;font-size:var(--fs-body-s);color:var(--ink)}
.checks .tick{width:20px;height:20px;flex:none;fill:none;stroke:var(--orange);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){
  .checks{flex-direction:column;align-items:flex-start;gap:8px}
  .checks li{font-size:var(--fs-small)}
}

/* ---- closing CTA: pitch + lead form ----
   Two columns on desktop, stacked on phone. The form card is the page's one
   conversion point, so it gets the light surface and the only orange button
   in the section. */
.cta-split{padding:64px 0 64px}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cta-pitch .ph{margin-bottom:24px;min-height:280px}
/* the CTA is a two-column block, so its left side aligns left with the form
   beside it — the centred section rule doesn't apply here. */
.cta-pitch{text-align:left}
.cta-pitch .sec,.cta-pitch .lede{text-align:left;margin-left:0;margin-right:0;max-width:none}
.cta-pitch .sec{margin-bottom:12px}
.cta-form{background:var(--surface);border:1px solid var(--n200);
  border-radius:var(--r-md);padding:32px 32px}
.cta-form h3{font-family:var(--font-head);font-size:var(--fs-h3);line-height:1.35;
  font-weight:700;margin-bottom:8px}
.cta-form>p{color:var(--mid);font-size:var(--fs-body-s);margin-bottom:24px}
/* the global form rule caps every form at 520px; inside the CTA card that
   left a dead strip down the right, so this one fills its card. */
.cta-form form{display:flex;flex-direction:column;gap:12px;max-width:none}
.cta-form input,.cta-form select{width:100%;padding:16px 16px;font:inherit;font-size:var(--fs-body-s);
  color:var(--ink);background-color:var(--n100);border:1px solid transparent;
  border-radius:var(--r-sm);transition:border-color var(--dur) var(--ease),
  background-color var(--dur) var(--ease)}
.cta-form input::placeholder{color:var(--n500)}
/* appearance:none, or Safari draws its native mini-select and ignores the box
   styles above; chevron re-added by hand. background-color (not the shorthand)
   everywhere in this form, or the focus rule would wipe the chevron image. */
.cta-form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
/* required select while its placeholder option is shown — matches ::placeholder */
.cta-form select:invalid{color:var(--n500)}
.cta-form select option{color:var(--ink)}
.cta-form input:focus,.cta-form select:focus{outline:none;background-color:var(--surface);border-color:var(--orange)}
.cta-form button{margin-top:8px;width:100%}
@media(max-width:900px){
  .cta-grid{grid-template-columns:1fr;gap:32px}
  .cta-form{padding:24px 24px}
  .cta-pitch .ph{min-height:200px}
  /* stacked on tablet, so the pitch centres under its image and the gap
     between headline and lede tightens */
  .cta-pitch .sec,.cta-pitch .lede{text-align:center}
  /* balance the lede so it breaks into two even lines instead of leaving
     a two-word orphan on the last line */
  .cta-pitch .lede{text-wrap:balance;margin-left:auto;margin-right:auto}
  .cta-pitch .sec{margin-bottom:4px}
  /* the form card's own heading and line centre to match */
  .cta-form h3,.cta-form>p{text-align:center}
}

/* icon placeholder — same size and position as a real .ico, so swapping in
   the finished SVG changes nothing else. Filename is in the title attribute. */
.ico-ph{width:34px;height:34px;display:block;margin:0 0 24px;border-radius:8px;
  background:var(--n100);border:1px dashed var(--n300);position:relative}
.ico-ph::after{content:"";position:absolute;inset:7px;
  background:linear-gradient(to top right,transparent 47%,var(--n300) 47%,var(--n300) 53%,transparent 53%),
             linear-gradient(to bottom right,transparent 47%,var(--n300) 47%,var(--n300) 53%,transparent 53%)}

/* ---- page-in ----
   Framer's "appear" behaviour, rebuilt in CSS: content fades and rises a
   little as the page loads, so moving between pages feels like a transition
   rather than a jump.

   Deliberately NOT applied to <header>: a transform on a sticky element
   makes it a containing block and breaks the floating nav.

   Uses animation with fill-mode both rather than a JS-toggled class — if
   anything fails, the content still ends up visible. */
@media (prefers-reduced-motion: no-preference){
  .hero,section,footer.site{animation:page-in .45s var(--ease) both}
  /* a short stagger down the first screen; everything below the fold is
     off-screen anyway, so it only reads on the opening */
  .hero{animation-delay:.02s}
  .stats{animation-delay:.10s}
}
@keyframes page-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* pain-card icon placeholder — matches .paincard svg's box and 22px gap */
.ico-ph-pain{margin-bottom:24px}

/* ---- FAQ (shared) ----
   These rules used to live only in each page's own <style> block, so pages
   added later missed them. They belong here. Pages that still carry their
   own copy override with identical values — harmless. */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;align-items:start}
/* both cards in a row take the taller one's height, and the question sits
   centred in it so a one-line question does not float at the top. */
.faq details{display:flex;flex-direction:column}
.faq details:not([open]) summary{display:flex;align-items:center}
.faq-band{background:var(--n200)}
.faq details{background:var(--n100);border:1px solid transparent;border-radius:12px;
  padding:2px 0;margin:0;transition:background var(--dur) var(--ease)}
.faq details:hover{background:var(--n200);border-color:var(--n300)}
/* Open is its own state, not a repeat of hover (Lukzo, 24 Aug). Closed sits
   on Neutral/100, hover darkens to Neutral/200 so it recedes, and the open
   row goes to Surface so it lifts out of the band — the one you are reading. */
.faq details[open]{background:var(--surface);border-color:var(--n200)}
.faq details[open]:hover{background:var(--surface);border-color:var(--n300)}

.faq summary{cursor:pointer;list-style:none;padding:24px 48px 24px 24px;position:relative;
  font-size:var(--fs-body-s);font-weight:400;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:26px;top:50%;transform:translateY(-50%);
  font-size:var(--fs-lede);font-weight:400;color:inherit;transition:transform .18s}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 24px;padding:0 48px 0 24px;font-size:var(--fs-body-s);line-height:1.7;color:var(--mid)}
@media(max-width:900px){.faq{grid-template-columns:1fr}}

/* ---- FAQ motion (th-ui.js animates the answer; this animates the icon) ----
   The − glyph cannot morph, so the open icon is the same + rotated 45° into
   an ×. Overrides the global details[open] "−" swap above. */
.faq summary::after{transition:transform .28s cubic-bezier(.33,0,.2,1)}
.faq details[open] summary::after{content:"+";transform:translateY(-50%) rotate(45deg)}
@media (prefers-reduced-motion: reduce){.faq summary::after{transition:none}}

/* the lead card was built for desktop room: tall fields and deep padding make
   it a very long scroll on a phone. Tighter, but the inputs stay above the
   44px tap-target floor. */
@media(max-width:640px){
  .cta-form{padding:16px 12px}
  .cta-form h3{font-size:var(--fs-lede);line-height:1.35;margin-bottom:8px}
  .cta-form>p{font-size:var(--fs-small);line-height:1.55;margin-bottom:16px}
  .cta-form form{gap:8px}
  .cta-form input,.cta-form select{padding:12px 12px;font-size:var(--fs-small)}
}

/* the outcome checks read as a row on a phone too, wrapping rather than
   stacking. Three on one line needs 431px in a 328px column, so they flow
   to a second row instead of running down the page. */
@media(max-width:640px){
  .checks{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px 12px}
  .checks li{font-size:var(--fs-caption);gap:4px}
  .checks .tick{width:17px;height:17px}
}

/* once the hero stacks, the 48px column gap becomes dead vertical space
   between the copy and the picture. Half it on a phone. */
@media(max-width:640px){
  .hero-grid{row-gap:16px}
}

/* phone: the closing CTA drops its picture. On a small screen it was a full
   screen of image before the pitch, pushing the form further away. Hidden,
   not removed — it returns at tablet width and up. */
@media(max-width:640px){
  .cta-pitch .ph{display:none}
}

/* phone: footer links step down so นโยบายความเป็นส่วนตัว holds one line.
   The column is 152px and that label needs 158px at 16px; 14px needs 138px. */
@media(max-width:640px){
  footer.site .foot-col a{font-size:var(--fs-caption)}
  footer.site .foot-head{font-size:var(--fs-body)}
  /* the legal line holds one row: it needs 326px at 13px in a 328px column,
     so 12px leaves a little slack. */
  footer.site .foot-legal{font-size:var(--fs-caption)}
}

/* the closing CTA photo. .ph is written for the grey placeholder box, so the
   real image needs its own sizing: it fills the pitch column and crops rather
   than stretching, since the column's height is set by the form beside it. */
.cta-pitch img.ph{display:block;width:100%;height:100%;object-fit:cover;
  object-position:center;padding:0;background:none;border:0;border-radius:var(--r-md)}
/* grid items default to min-width:auto, so the photo's intrinsic 1065px was
   forcing its column and pushing the form off the page on all ten pages. */
.cta-grid{min-width:0}
.cta-grid > *{min-width:0}