@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;500;600&family=Sriracha&display=swap');

/* ===========================================================
   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.
               IBM Plex Sans Thai — headings & subheadings
               Anuphan            — body, buttons, tags, tight space
               Mitr               — display / hero headline
               Sriracha           — accent, sparingly
             Kerning 0. Extra leading where Thai tone marks stack.
             Display fonts never for body copy or small text.

   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{
  /* 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 */
  --r-sm:10px;  /* buttons, inputs — UNVERIFIED, from screenshot */
  --r-xs:12px;  /* card images, testimonial cards — verified live */
  --r-md:18px;  /* feature + pain cards — verified live */
  --r-lg:20px;  /* large surfaces — UNVERIFIED, from screenshot */
  --r-full:999px;

  /* 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 */
  --font-display:"Mitr",var(--thai-fallback);                 /* hero headline only */
  --font-accent:"Sriracha",var(--thai-fallback);              /* accent, sparingly */
  --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:12px;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:18px 0;font-size:14px}
.notes h2{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);margin-bottom:10px}
.notes ul{margin:0 0 0 18px}
.notes li{margin-bottom:5px;color:var(--mid)}
.notes b{color:var(--ink)}
.notes button{background:none;border:1px solid var(--line);border-radius:6px;padding:6px 14px;font:inherit;font-size:13px;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:10px;padding:1px 6px;border-radius:3px;margin-left:6px;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:20px 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 20px;
  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:16px;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 22px;font-weight:600;font-size:16px;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:14px 30px;font-size:17px}
.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:17px;cursor:pointer}

/* ---- generic ---- */
/* no divider rules between sections — spacing and background do the
   separating, the way the live site does it. */
section{padding:56px 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:44px;line-height:1.32;font-weight:700}
/* every section heading and its lede sit centred (Lukzo, 21 Aug) */
h2.sec{font-size:28px;line-height:1.38;font-weight:700;text-align:center}
/* Mitr — hero headline only. Never body, never small text. */
.display{font-family:var(--font-display);font-weight:600;letter-spacing:0}
/* Sriracha — accent, sparingly. */
.accent{font-family:var(--font-accent);font-weight:400}
.center{text-align:center}
p.lede{color:var(--mid);font-size:18px;margin-top:10px;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 */
section::before,.hero::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);max-width:1080px;margin:0 auto 18px;padding:0 24px}

/* ---- hero ---- */
.hero{padding:56px 0}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero p.sub{font-size:20px;color:var(--mid);margin:18px 0 12px;max-width:32em}
.mech{font-size:18px;font-weight:600;margin-bottom:26px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ---- image placeholders ---- */
.ph,.thumb{background:var(--box);border:1px solid var(--line);color:var(--soft);font-family:var(--mono);font-size:12px;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:14px}
.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:20px;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:18px;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:22px;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:21px;margin-bottom:6px}
.card p{color:var(--mid);font-size:18px}
/* "ดูรายละเอียด" — 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:14px;text-decoration:none;
  color:var(--orange);font-weight:400;font-size:15px;
  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)}
.tag{display:inline-block;border:1px solid var(--line);font-family:var(--mono);font-size:11px;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:20px;margin-top:32px}
.why h3{font-size:21px;margin-bottom:6px}
/* 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:11px;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:18px}
/* :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:16px;display:inline-block;margin-top:10px}

/* ---- quotes ---- */
blockquote{border:1px solid var(--line);padding:22px;font-size:18px}
blockquote footer{margin-top:14px;color:var(--mid);font-size:15px}
.origin{display:inline-block;border:1px solid var(--line);color:var(--mid);font-family:var(--mono);font-size:11px;padding:1px 7px;margin-bottom:10px}

/* ---- band ---- */
.band{border:2px solid var(--ink);padding:40px 28px;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:14px;font-weight:600}
input{width:100%;padding:13px 14px;border:1px solid var(--line);font:inherit;font-size:16px;background:var(--bg)}
input:focus{outline:2px solid var(--ink);outline-offset:1px}
.consent{font-size:14px;color:var(--mid)}
.consent a{color:var(--ink)}

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

/* ---- steps ---- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
.steps div{position:relative;padding-top:40px}
.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:13px}
.steps h3{font-size:17px;margin-bottom:5px}
.steps p{color:var(--mid);font-size:15px}

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

/* ---- start-here board ---- */
.board{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px}
.board th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);border-bottom:1px solid var(--line);padding:0 12px 10px 0;font-weight:400}
.board td{border-bottom:1px solid var(--line-2);padding:14px 12px 14px 0;vertical-align:top}
.board a{color:var(--link);font-weight:600}
.st{font-family:var(--mono);font-size:11px;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:72px 0 32px;margin-top:0}
footer.site .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;
  align-items:start;padding-bottom:56px}
/* 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:24px;font-weight:600;
  color:var(--surface);margin:0 0 20px}
footer.site .foot-col a{display:flex;align-items:center;gap:10px;
  color:var(--n200);text-decoration:none;font-size:16px;font-weight:500;
  padding:7px 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:26px;margin:0;font-size:16px;font-weight:500;color:var(--n500)}
@media(max-width:900px){
  footer.site{padding:52px 0 28px}
  footer.site .foot-top{grid-template-columns:1fr;gap:34px;padding-bottom:36px}
}

@media(max-width:900px){
  header nav{display:none}
  .menu-btn{display:block;margin-left:auto;order:2}
  .bar .btn{order:3;padding:9px 16px;font-size:14px}
  .logo{order:1}
  header nav.open{display:flex;position:absolute;top:66px;left:0;right:0;background:var(--bg);flex-direction:column;gap:0;padding:6px 24px 16px;border-bottom:1px solid var(--line)}
  header nav.open a{padding:13px 0;border-bottom:1px solid var(--line-2)}
  h1{font-size:32px}
  h2.sec{font-size:23px}
  .hero-grid,.grid3,.grid4,.why,.steps{grid-template-columns:1fr}
  section,.hero{padding:40px 0}
  .board thead{display:none}
  .board td{display:block;border:0;padding:4px 0}
  .board tr{display:block;border-bottom:1px solid var(--line);padding:14px 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-xs)}
.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:14px 12px;min-width:250px}
#dd-about a{padding:13px 14px;font-size:15px;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%}
.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:6px;font-family:var(--mono);font-size:10px;
  letter-spacing:.04em;color:var(--n500);background:var(--n100);
  border:1px solid var(--line-2);border-radius:4px;padding:1px 6px}

/* ---- 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}
section:has(+ .logos){padding-bottom:24px}
.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-xs);padding:12px 24px;
  margin-right:20px;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:9px 16px;margin-right:14px}
}

/* ---- 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:44px 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:24px;
  padding:56px 40px}
.stat{text-align:center}
.stat-num{font-family:var(--font-head);font-size:56px;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:20px;line-height:1.5;color:var(--mid);margin-top:10px}
@media(max-width:900px){
  .stat-row{grid-template-columns:1fr;gap:28px}
  .stat-num{font-size:44px}
  .stat-label{font-size:17px}
}

/* ---- outcome checks (industry pages, under the hero image) ---- */
.checks{list-style:none;margin:22px 0 0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px}
.checks li{display:flex;align-items:center;gap:9px;font-size:17px;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:10px}
  .checks li{font-size:15px}
}

/* ---- 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 72px}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.cta-pitch .ph{margin-bottom:28px;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:36px 32px}
.cta-form h3{font-family:var(--font-head);font-size:26px;line-height:1.35;
  font-weight:700;margin-bottom:10px}
.cta-form>p{color:var(--mid);font-size:17px;margin-bottom:26px}
.cta-form form{display:flex;flex-direction:column;gap:14px}
.cta-form input{width:100%;padding:16px 18px;font:inherit;font-size:17px;
  color:var(--ink);background:var(--n100);border:1px solid transparent;
  border-radius:var(--r-sm);transition:border-color var(--dur) var(--ease),
  background var(--dur) var(--ease)}
.cta-form input::placeholder{color:var(--n500)}
.cta-form input:focus{outline:none;background: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:28px 22px}
  .cta-pitch .ph{min-height:200px}
}

/* 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:22px}

/* ---- 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:stretch}
/* 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{flex:1;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 52px 24px 26px;position:relative;
  font-size:18px;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:21px;font-weight:400;color:inherit;transition:transform .18s}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 22px;padding:0 52px 0 26px;font-size:17px;line-height:1.7;color:var(--mid)}
@media(max-width:900px){.faq{grid-template-columns:1fr}}