/* Hallmark · genre: editorial · macrostructure: mobile-first sales letter · tone: premium expert authority · anchor hue: emerald/brass
   Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
   Expert Godlike Program 2.0 — "Light Editorial Premium" design system
   Warm off-white · deep emerald · brass · serif display.
   Colors come from config.theme via CSS vars; the rest is defined here.
   ========================================================================= */

:root{
  --bg:#FAF8F4; --bg-alt:#F2EEE7; --surface:#FFFFFF; --ink:#14110E;
  --accent:#1A6B54; --accent-2:#13513F; --cta-alt:#B8862F;
  --danger:#9B2C2C; --highlight:#B8862F;
  --brass:#B8862F; --brass-soft:rgba(184,134,47,.26);
  --muted:#6B6258; --hairline:rgba(20,17,14,.12); --hairline-2:rgba(20,17,14,.07);
  --shadow:0 18px 50px -28px rgba(20,17,14,.35);
  --shadow-sm:0 8px 26px -18px rgba(20,17,14,.30);
  --font-thai:'Noto Sans Thai','IBM Plex Sans Thai',sans-serif;
  --font-latin:'Fraunces','Noto Serif Thai',Georgia,serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --maxw:880px; --maxw-wide:1140px; --r:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-thai); font-size:18px; line-height:1.75;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* ---------- layout ---------- */
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 22px}
.container.wide{max-width:var(--maxw-wide)}
section{padding:68px 0}
section.tight{padding:44px 0}
section.alt{background:var(--bg-alt)}
.center{text-align:center}

/* ---------- type ---------- */
.headline{
  font-family:var(--font-latin); font-weight:600;
  font-size:clamp(2.1rem,5.4vw,3.5rem); line-height:1.3;
  letter-spacing:0; margin:0; color:var(--ink);
  overflow-wrap:anywhere; word-break:break-word;
}
.mobile-br{display:none}
.section-title{
  font-family:var(--font-latin); font-weight:600;
  font-size:clamp(1.6rem,3.6vw,2.4rem); line-height:1.2;
  letter-spacing:0; margin:0 0 6px;
  overflow-wrap:anywhere; word-break:break-word;
}
.subhead{font-size:clamp(1.05rem,2vw,1.22rem); color:var(--muted); font-weight:400; margin:18px auto 0}
.lead{font-size:1.08rem; color:var(--muted); margin:0}
.ink{color:var(--ink)}
.eyebrow,.preheadline{
  display:inline-block; font-family:var(--font-thai); font-weight:600;
  font-size:.82rem; letter-spacing:0; text-transform:uppercase;
  color:var(--brass); margin:0 0 18px;
}
.hero .preheadline{
  font-weight:500; text-transform:none; color:var(--bg);
  background:var(--accent-2); border-radius:999px; padding:8px 20px;
  line-height:1.35;
}
/* editorial "highlighter" — subtle brass underline instead of a loud marker */
.highlight{
  background:linear-gradient(transparent 60%, var(--brass-soft) 60%);
  padding:0 .04em;
}
.divider{width:54px; height:2px; background:var(--brass); margin:18px auto 30px; border-radius:2px}
.divider.left{margin-left:0}
.red{color:var(--accent)} /* legacy hook → emerald */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; cursor:pointer; border:0; border-radius:999px;
  background:var(--accent); color:#fff;
  font-family:var(--font-thai); font-weight:700; font-size:1.05rem;
  padding:16px 34px; line-height:1.3; text-align:center; white-space:nowrap;
  max-width:100%; box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
}
.btn:hover{background:var(--accent-2); transform:translateY(-2px); box-shadow:0 16px 34px -18px rgba(26,107,84,.7)}
.btn:active{transform:translateY(1px); transition-duration:.08s}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--bg), 0 0 0 6px var(--brass)}
.btn.big{font-size:1.18rem; padding:20px 46px}
.btn.small{padding:11px 22px; font-size:.95rem}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--hairline); box-shadow:none}
.btn.ghost:hover{background:var(--bg-alt); transform:none; box-shadow:none}
.btn.alt{background:var(--brass)} .btn.alt:hover{background:#9d7126}
.btn-sub{font-family:var(--font-thai); font-weight:400; font-size:.82rem; opacity:.9}
.btn-pulse{position:relative}
.btn-pulse::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(26,107,84,.45); animation:pulse 2.4s infinite}
@keyframes pulse{to{box-shadow:0 0 0 18px rgba(26,107,84,0)}}

.line-btn{
  display:inline-flex; align-items:center; gap:8px; background:#06C755; color:#fff;
  font-family:var(--font-thai); font-weight:700; padding:14px 28px; border-radius:999px;
  box-shadow:var(--shadow-sm); transition:transform .18s ease}
.line-btn:hover{transform:translateY(-2px)}

/* ---------- hero ---------- */
.hero{padding:64px 0 48px; position:relative; overflow:hidden}
.hero .container{max-width:920px}
.hero .microtrust{margin:22px auto 0; font-size:.95rem; color:var(--muted); max-width:46ch}
.hero.center .cta-block{align-items:center}      /* centered hero → centered CTA */
.cta-block{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:30px}
.cta-note{
  margin:0; max-width:42ch; color:var(--muted); font-size:.88rem;
  line-height:1.55;
}
.cta-note.center{margin:10px auto 0}

/* ---------- checklists (what-you-see / who-for / before-call) ---------- */
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.checklist li{
  position:relative; padding:2px 0 2px 40px; font-size:1.06rem; color:var(--ink);
}
.checklist li::before{
  content:""; position:absolute; left:0; top:.5em; width:22px; height:22px; border-radius:50%;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.05 4.5 12l1.4-1.4 3.65 3.6 8.15-8.15 1.4 1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.05 4.5 12l1.4-1.4 3.65 3.6 8.15-8.15 1.4 1.4z'/%3E%3C/svg%3E") center/16px no-repeat;
}
.checklist.plain li::before{background:var(--brass)}
.note-neg{
  margin-top:26px; padding:16px 20px; border-left:3px solid var(--hairline);
  color:var(--muted); font-style:italic; background:var(--surface); border-radius:0 10px 10px 0}

/* fascination legacy hooks reuse checklist look */
.fascinations{display:grid; gap:14px}
.fascination{position:relative; padding-left:40px}
.fascination::before{content:""; position:absolute; left:0; top:.35em; width:22px; height:22px; border-radius:50%; background:var(--accent)}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r);
  padding:30px; box-shadow:var(--shadow-sm)}

/* ---------- visual storytelling ---------- */
.visual-split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.95fr);
  gap:clamp(24px,4vw,54px); align-items:center;
}
.visual-split.reverse{grid-template-columns:minmax(280px,.95fr) minmax(0,1fr)}
.visual-split.reverse .generated-figure{order:2}
.generated-figure{
  margin:0; overflow:hidden; border-radius:var(--r); border:1px solid var(--hairline);
  background:var(--surface); box-shadow:var(--shadow);
}
.generated-figure:empty{display:none}
.generated-figure img{width:100%; aspect-ratio:16/9; object-fit:cover}
.generated-figure figcaption{
  padding:14px 18px 16px; font-size:.88rem; line-height:1.55; color:var(--muted);
  border-top:1px solid var(--hairline-2); background:var(--surface);
}
.section-intro{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(280px,1fr);
  gap:28px; align-items:end; margin-bottom:30px;
}
.section-intro .lead{max-width:58ch}
.insight-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
}
.insight-card{
  position:relative; min-height:260px; padding:24px 22px 26px;
  border:1px solid var(--hairline); border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),rgba(255,255,255,.62));
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.insight-card::after{
  content:""; position:absolute; left:22px; right:22px; bottom:0; height:4px;
  background:var(--brass);
}
.card-icon{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:14px; border-radius:50%;
  background:rgba(26,107,84,.08); color:var(--accent); flex:0 0 auto;
}
.card-icon svg{width:23px; height:23px}
.card-label{
  display:inline-flex; min-height:28px; align-items:center; padding:4px 10px;
  border:1px solid var(--hairline); border-radius:999px; color:var(--accent);
  font-size:.82rem; font-weight:700; line-height:1.35; background:rgba(26,107,84,.06);
}
.insight-card h3,.flow-step h3,.proof-step h3,.case-point h3,.readiness-item h3{
  margin:18px 0 8px; font-family:var(--font-latin); font-weight:600;
  font-size:1.22rem; line-height:1.25; letter-spacing:0; overflow-wrap:anywhere;
}
.insight-card p,.flow-step p,.proof-step p,.case-point p,.readiness-item p{
  margin:0; color:var(--muted); font-size:.96rem; line-height:1.65;
}
.flow-map{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.flow-step{
  position:relative; min-height:230px; padding:24px 20px;
  border:1px solid var(--hairline); border-radius:var(--r);
  background:var(--surface); box-shadow:var(--shadow-sm);
}
.flow-step:not(:last-child)::after{
  content:""; position:absolute; top:42px; right:-18px; width:24px; height:1px;
  background:var(--brass); z-index:2;
}
.flow-tag{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:var(--accent); color:#fff; font-family:var(--font-latin);
  font-weight:600; font-size:.96rem; line-height:1;
}
.proof-ladder{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:34px;
}
.proof-step{
  padding:24px 22px; border:1px solid var(--hairline); border-radius:var(--r);
  background:var(--bg-alt); position:relative; overflow:hidden;
}
.proof-step span{
  font-family:var(--font-latin); font-size:2rem; line-height:1; color:var(--brass);
  font-weight:600; opacity:.85;
}
.case-points{display:grid; gap:12px}
.case-point{
  padding:18px 20px; border-left:3px solid var(--brass);
  background:var(--surface); border-radius:0 12px 12px 0;
  box-shadow:var(--shadow-sm);
}
.case-point h3{margin-top:0; font-size:1.12rem}

/* proof captions */
.proof-captions{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:34px}
.proof-cap{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:26px 22px; text-align:center}
.proof-cap .big{font-family:var(--font-latin); font-weight:600; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--accent); line-height:1.1}
.proof-cap .small{display:block; margin-top:8px; font-size:.95rem; color:var(--muted)}

/* gallery headline (page 2) */
.gallery-headline{
  font-family:var(--font-latin); font-weight:600; color:var(--ink);
  font-size:clamp(1.3rem,2.6vw,1.62rem); line-height:1.35;
  max-width:46ch; margin:0 auto 30px;
}

/* bio */
.bio-card{display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:center}
.bio-card img{border-radius:var(--r); border:1px solid var(--hairline); aspect-ratio:4/5; object-fit:cover; object-position:center top}

/* client roster */
.tgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.tcard{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.tcard .photo{aspect-ratio:4/3; overflow:hidden; background:var(--bg-alt)}
.tcard .photo img{width:100%; height:100%; object-fit:cover}
.tcard .body{padding:20px 22px 24px}
.tcard .stars{color:var(--brass); letter-spacing:2px; font-size:.85rem; margin-bottom:8px}
.tcard .tname{font-family:var(--font-latin); font-weight:600; font-size:1.2rem; line-height:1.2}
.tcard .trole{color:var(--brass); font-size:.86rem; margin:4px 0 10px; font-weight:600}
.tcard .tresult{color:var(--muted); font-size:.96rem}

/* video */
.video-wrap{position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--hairline); box-shadow:var(--shadow); background:#11100e; margin:8px 0}
.video-wrap iframe,.video-wrap video{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-wrap .voomly-embed{margin:0; border-radius:0 !important}
.video-wrap .voomly-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#cdc6ba}
.video-ph .play{width:74px; height:74px; border-radius:50%; border:1px solid rgba(255,255,255,.4); display:grid; place-items:center; font-size:1.6rem; color:#fff}

/* badge */
.badge{display:inline-block; font-family:var(--font-thai); font-weight:700; font-size:.8rem;
  letter-spacing:0; text-transform:uppercase; color:var(--accent);
  background:rgba(26,107,84,.10); border:1px solid rgba(26,107,84,.25);
  padding:7px 16px; border-radius:999px}

/* ---------- quiz (apply.html) ---------- */
.application-layout{
  display:grid; grid-template-columns:minmax(0,680px) minmax(280px,1fr);
  gap:24px; align-items:start;
}
.quiz-card{max-width:680px; margin:0 auto; padding:34px}
.progress{height:5px; background:var(--hairline-2); border-radius:99px; overflow:hidden}
.progress i{display:block; height:100%; width:10%; background:var(--accent); border-radius:99px; transition:width .35s ease}
.progress-text{font-size:.82rem; color:var(--muted); margin:10px 0 22px; letter-spacing:0}
.q-step{display:none; animation:fade .35s ease}
.q-step.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.q-title{font-family:var(--font-latin); font-weight:600; font-size:1.5rem; line-height:1.3; margin-bottom:6px}
.q-title.warn{color:var(--danger)}
.q-help{color:var(--muted); font-size:.95rem; margin-bottom:18px}
.opt{display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--hairline);
  border-radius:12px; padding:16px 20px; margin:10px 0; font-family:var(--font-thai); font-size:1.05rem; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .1s ease}
.opt:hover{border-color:var(--accent); background:#fbfcfb}
.opt.selected{border-color:var(--accent); background:rgba(26,107,84,.07); box-shadow:inset 3px 0 0 var(--accent)}
/* multi-select: checkbox affordance */
.opts.multi .opt{padding-left:52px; position:relative}
.opts.multi .opt::before{content:""; position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border:1.5px solid var(--hairline); border-radius:6px; background:var(--surface); transition:background .15s, border-color .15s}
.opts.multi .opt.selected::before{background:var(--accent); border-color:var(--accent)}
.opts.multi .opt.selected::after{content:""; position:absolute; left:22.5px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.05 4.5 12l1.4-1.4 3.65 3.6 8.15-8.15 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.55 17.05 4.5 12l1.4-1.4 3.65 3.6 8.15-8.15 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.field{margin:16px 0}
.field label{display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px; font-weight:600}
.field input,.field textarea{width:100%; font-family:var(--font-thai); font-size:1.05rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline); border-radius:12px; padding:14px 16px}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(26,107,84,.12)}
.err{display:none; color:var(--danger); font-size:.85rem; margin-top:6px}
.consent{display:flex; gap:12px; align-items:flex-start; margin:18px 0 4px; font-size:.95rem; color:var(--muted)}
.consent input{margin-top:5px; width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto}

/* ---- Self-hosted booking slot picker ---- */
.tz{text-align:center; font-size:.86rem; color:var(--muted); margin:0 0 18px}
.booker-host{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 18px}
.booker-host img{width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:center top; border:2px solid var(--surface); box-shadow:0 3px 12px rgba(20,17,14,.16)}
.booker-host span{font-size:1rem; color:var(--ink); font-weight:600}
.booker-step-label{text-align:center; font-weight:600; color:var(--ink); font-size:1rem; margin:24px 0 12px}
.booker-empty{text-align:center; color:var(--muted); font-size:1rem; margin:0}
.week-group{margin:0 auto 14px; max-width:520px}
.week-label{display:block; text-align:center; font-size:.76rem; font-weight:700; letter-spacing:.02em;
  color:var(--brass); text-transform:none; margin:0 0 10px}
.day-row,.slot-row{display:flex; flex-wrap:wrap; gap:10px; justify-content:center}
.day-chip,.slot-chip{font-family:var(--font-thai); background:var(--surface); border:1px solid var(--hairline);
  border-radius:12px; cursor:pointer; text-align:center; color:var(--ink);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease}
.day-chip{flex:0 0 84px; width:84px; padding:10px 8px 12px; line-height:1.2}
.slot-chip{min-width:104px; padding:14px 18px; font-size:1.05rem; font-weight:600}
.day-chip:hover,.slot-chip:hover{border-color:var(--accent)}
.day-chip.selected,.slot-chip.selected{border-color:var(--accent); background:rgba(26,107,84,.08); box-shadow:inset 0 -3px 0 var(--accent)}
.day-chip .dow{display:block; font-size:.76rem; color:var(--muted)}
.day-chip .dnum{display:block; font-family:var(--font-latin); font-size:1.35rem; font-weight:700; color:var(--ink); margin:2px 0}
.day-chip .mon{display:block; font-size:.72rem; color:var(--muted)}
.pick-summary{display:none; text-align:center; margin:22px auto 0; max-width:fit-content;
  padding:12px 20px; border-radius:12px; background:rgba(26,107,84,.07); border:1px solid rgba(26,107,84,.22);
  font-size:1rem; color:var(--ink)}
.pick-summary.show{display:block}
.pick-summary strong{color:var(--accent); font-weight:700}
.reassure{display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; margin:18px auto 0; max-width:520px}
.reassure span{font-size:.85rem; color:var(--muted)}
.slot-confirm{display:flex; justify-content:center; margin-top:22px}
.slot-confirm .btn:disabled{opacity:.45; cursor:not-allowed}
.booker-line-fallback{text-align:center; margin:14px 0 0}
.booker-line-fallback a{font-size:.85rem; color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.booker-line-fallback a:hover{color:var(--accent)}
/* sticky mobile confirm — only shows on phones once a slot is chosen and the inline button scrolls away */
.sticky-confirm{position:fixed; left:16px; right:16px; bottom:16px; z-index:60; border:none; border-radius:14px;
  padding:16px; font-family:var(--font-thai); font-weight:700; font-size:1.05rem; color:#fff; background:var(--accent);
  box-shadow:0 12px 34px rgba(20,17,14,.28); transform:translateY(160%); transition:transform .25s ease; cursor:pointer}
.sticky-confirm.show{transform:none}
@media(min-width:700px){ .sticky-confirm{display:none} }

/* ---- Language switcher (injected on every page, top-right) ---- */
.lang-switch{position:fixed; top:12px; right:12px; z-index:90; display:inline-flex; gap:2px;
  padding:3px; border-radius:999px; background:rgba(250,248,244,.92); border:1px solid var(--hairline);
  box-shadow:0 2px 10px rgba(20,17,14,.12); backdrop-filter:saturate(1.1) blur(4px)}
.lang-switch button{font-family:var(--font-thai); font-weight:600; font-size:.8rem; line-height:1;
  padding:7px 12px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer;
  transition:background .15s ease, color .15s ease}
.lang-switch button.on{background:var(--accent); color:#fff}
.lang-switch button:not(.on):hover{color:var(--ink)}
@media (max-width:480px){ .lang-switch{top:8px; right:8px} .lang-switch button{padding:6px 10px; font-size:.75rem} }

.q-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:26px}
.q-nav .btn{flex-direction:row}
.stop-screen{text-align:center; padding:8px 0}
.stop-screen .icon{font-size:2.4rem; margin-bottom:10px}
.readiness-panel{
  position:sticky; top:20px; padding:28px;
  border:1px solid var(--hairline); border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),rgba(242,238,231,.72));
  box-shadow:var(--shadow-sm);
}
.readiness-panel h2{
  margin:0 0 10px; font-family:var(--font-latin); font-size:1.55rem;
  line-height:1.2; font-weight:600; letter-spacing:0;
}
.readiness-panel > p{margin:0 0 18px; color:var(--muted); font-size:.95rem; line-height:1.65}
.readiness-map{display:grid; gap:12px}
.readiness-item{
  display:grid; grid-template-columns:42px minmax(0,1fr); column-gap:14px; align-items:start;
  padding:14px 0; border-top:1px solid var(--hairline-2);
}
.readiness-item span{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:rgba(26,107,84,.10); color:var(--accent); font-family:var(--font-latin); font-weight:600;
}
.readiness-item h3{grid-column:2; margin:0 0 2px; font-size:1.05rem}
.readiness-item p{grid-column:2; font-size:.9rem; line-height:1.55}

/* booking details */
.detail-list{display:grid; gap:0; border:1px solid var(--hairline); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.detail-row{display:flex; justify-content:space-between; gap:16px; padding:16px 22px; border-bottom:1px solid var(--hairline-2)}
.detail-row:last-child{border-bottom:0}
.detail-row .k{color:var(--muted)}
.detail-row .v{font-weight:600; text-align:right}
.embed-holder{border:1px solid var(--hairline); border-radius:var(--r); overflow:hidden; background:var(--surface); min-height:300px}
.embed-ph{padding:48px 24px; text-align:center; color:var(--muted)}

/* thank-you */
.ty-steps{counter-reset:s; list-style:none; padding:0; margin:0 auto; max-width:480px; text-align:left; display:grid; gap:14px}
.ty-steps li{position:relative; padding-left:46px; font-size:1.06rem}
.ty-steps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:-2px;
  width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.95rem}
.check-seal{width:72px; height:72px; border-radius:50%; background:rgba(26,107,84,.10); border:1px solid rgba(26,107,84,.3);
  display:grid; place-items:center; margin:0 auto 20px; color:var(--accent); font-size:2rem}
.booking-summary{display:inline-flex; flex-direction:column; align-items:center; gap:4px; margin:0 auto 30px;
  padding:16px 30px; border:1px solid var(--hairline); border-radius:14px; background:var(--surface)}
.booking-summary .bs-label{font-size:.85rem; color:var(--muted); font-weight:600}
.booking-summary .bs-time{font-family:var(--font-latin); font-size:1.3rem; font-weight:600; color:var(--accent)}

/* legal pages */
.legal-body{max-width:720px; margin:0 auto}
.legal-body p{color:var(--muted); margin:0 0 18px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--hairline); padding:34px 0; color:var(--muted); font-size:.9rem}
footer .container{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:center; text-align:center}
footer a{color:var(--muted); border-bottom:1px solid var(--hairline)}
footer a:hover{color:var(--ink)}
.footer-dot{opacity:.4}

/* ---------- trust bar (under hero) ---------- */
.trustbar{border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:var(--surface)}
.trustbar .container{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 30px; padding-top:18px; padding-bottom:18px}
.trustbar .ti{display:flex; align-items:center; gap:9px; font-size:.95rem; color:var(--ink)}
.trustbar .ti::before{content:""; width:18px; height:18px; flex:0 0 auto; background:var(--brass);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E") center/contain no-repeat}
.trustbar .sep{color:var(--hairline)}

/* ---------- mid-page CTA ---------- */
.midcta{text-align:center}
.midcta .line{font-family:var(--font-latin); font-weight:600; font-size:clamp(1.3rem,2.6vw,1.7rem); margin:0 0 20px}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:55; display:block;
  background:var(--accent); color:#fff; text-align:center; font-family:var(--font-thai); font-weight:700;
  font-size:1.05rem; padding:16px 18px; box-shadow:0 -10px 30px -14px rgba(20,17,14,.5);
  transform:translateY(110%); transition:transform .3s ease}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .arrow{margin-left:6px}
@media(min-width:821px){ .sticky-cta{display:none !important} }

/* booking continue helper text */
.continue-note{font-size:.9rem; color:var(--muted); margin:0 0 4px}

/* ---------- cookie ---------- */
.cookie{position:fixed; left:14px; right:14px; bottom:14px; z-index:60; display:flex; gap:16px; align-items:center; justify-content:space-between;
  background:var(--ink); color:#f3efe7; padding:14px 18px; border-radius:14px; box-shadow:var(--shadow); max-width:760px; margin:0 auto}
.cookie p{margin:0; font-size:.86rem; line-height:1.5}
.cookie .btn{flex:0 0 auto}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
[data-reveal].in{opacity:1; transform:none}
.hidden{display:none !important}

/* ---------- two teaser boxes (landing) — matches .insight-card visual language ---------- */
.teaser-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:900px; margin:0 auto}
.teaser-card{
  position:relative; padding:24px 22px 26px; border:1px solid var(--hairline);
  border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),rgba(255,255,255,.62)); box-shadow:var(--shadow-sm); overflow:hidden;
}
.teaser-card::after{
  content:""; position:absolute; left:22px; right:22px; bottom:0; height:4px;
  background:var(--brass);
}
.teaser-card h3{margin:0 0 8px; font-family:var(--font-latin); font-weight:600; font-size:1.22rem; line-height:1.25; color:var(--ink)}
.teaser-card p{margin:0; color:var(--muted); font-size:.96rem; line-height:1.65}

/* ---------- who is it for / not for ---------- */
.fit-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:920px; margin:0 auto}
.fit-col{padding:28px 26px; border:1px solid var(--hairline); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow-sm)}
.fit-col h3{margin:0 0 16px; font-family:var(--font-latin); font-weight:600; font-size:1.3rem}
.fit-yes{border-top:4px solid var(--accent)} .fit-yes h3{color:var(--accent)}
.fit-no{border-top:4px solid var(--danger); background:var(--bg-alt)} .fit-no h3{color:var(--danger)}
.list-neg{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.list-neg li{position:relative; padding:2px 0 2px 40px; font-size:1.06rem; color:var(--ink)}
.list-neg li::before{
  content:""; position:absolute; left:0; top:.5em; width:22px; height:22px; border-radius:50%; background:var(--danger);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.7 12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---------- infinite gallery marquee + lightbox (page 2) ---------- */
.gallery-marquee{
  width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.gallery-track{display:flex; gap:14px; width:max-content; animation:gallery-scroll 38s linear infinite}
.gallery-track:hover{animation-play-state:paused}
.gallery-item{
  flex:0 0 auto; padding:0; width:280px; border-radius:12px; overflow:hidden;
  border:1px solid var(--hairline); cursor:pointer; display:block; background:var(--bg-alt); font:inherit;
}
.gallery-item img{width:280px; height:190px; object-fit:cover; display:block}
.gallery-item:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
@keyframes gallery-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.lightbox{position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:24px}
.lightbox.open{display:flex}
.lightbox .lb-backdrop{position:absolute; inset:0; background:rgba(20,17,14,.82)}
.lightbox .lb-figure{position:relative; z-index:1; margin:0; max-width:900px; width:100%; background:var(--surface); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.lightbox .lb-figure img{width:100%; max-height:72vh; object-fit:contain; background:#11100e; display:block}
.lightbox .lb-figure figcaption{padding:16px 20px; color:var(--ink); font-size:1rem; line-height:1.6}
.lightbox .lb-close{position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:50%; border:0; background:rgba(20,17,14,.6); color:#fff; font-size:1rem; cursor:pointer}

/* ---------- case study gate ---------- */
.gated{display:none}
.gated.revealed{display:block; animation:fade .5s ease}
.locked-hint{margin:18px auto 0; color:var(--muted); font-size:.95rem; text-align:center}

/* ---------- highlighted stat bubbles (page 2) ---------- */
.proof-captions.feature{grid-template-columns:repeat(2,minmax(0,1fr))}
.proof-captions.feature .proof-cap{
  border:2px solid var(--brass); background:linear-gradient(180deg,rgba(26,107,84,.06),var(--surface));
  padding:34px 26px; box-shadow:var(--shadow-sm);
}
.proof-captions.feature .proof-cap .big{font-size:clamp(1.8rem,4vw,2.6rem)}

/* ---------- story rows (page 2) ---------- */
.story-row{margin:0 0 40px}
.story-row:last-child{margin-bottom:0}
.story-row .generated-figure img{aspect-ratio:4/3}

/* ---------- client proof rows (page 2) ---------- */
.proof-rows{display:grid; gap:22px; max-width:900px; margin:0 auto}
.proof-row-img{background:var(--bg-alt)}

/* ---------- client proof stories (page 2 — large stacked photos per case) ---------- */
.client-story{max-width:760px; margin:0 auto 64px}
.client-story:last-child{margin-bottom:0}
.client-story-head{margin-bottom:20px}
.client-story-head .stars{color:var(--brass); letter-spacing:2px; font-size:.85rem; margin-bottom:6px}
.client-story-head h3{margin:0 0 4px; font-family:var(--font-latin); font-weight:600; font-size:1.5rem}
.client-story-head .trole{color:var(--brass); font-size:.92rem; font-weight:600; margin-bottom:10px}
.client-story-head .lead{font-size:1.05rem}
.client-story-photos{display:flex; flex-direction:column; gap:16px}
.client-story-photos img{width:100%; height:auto; border-radius:var(--r); box-shadow:var(--shadow-sm); display:block}

/* ---------- prominent LINE confirmation ---------- */
.line-cta-card{text-align:center; padding:30px 26px; border:1px solid rgba(6,199,85,.4); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(6,199,85,.08),var(--surface)); box-shadow:var(--shadow-sm)}
.line-cta-card .line-cta-icon{font-size:2rem; margin-bottom:8px}
.line-cta-card h3{margin:0 0 10px; font-family:var(--font-latin); font-weight:600; font-size:1.35rem; line-height:1.3}
.line-cta-card p{margin:0 0 20px; color:var(--muted); font-size:1rem; line-height:1.7}
.line-btn.big{font-size:1.12rem; padding:16px 34px}
.sticky-line{position:fixed; left:0; right:0; bottom:0; z-index:55; display:block; background:#06C755; color:#fff;
  text-align:center; font-family:var(--font-thai); font-weight:700; font-size:1.05rem; padding:16px 18px;
  box-shadow:0 -10px 30px -14px rgba(20,17,14,.5); transform:translateY(110%); transition:transform .3s ease}
.sticky-line.show{transform:translateY(0)}
@media(min-width:821px){ .sticky-line{display:none !important} }

/* ---------- proof-row placeholder (no photo) ---------- */
.proof-row-img.placeholder{display:flex; align-items:center; justify-content:center; min-height:170px; background:var(--bg-alt); border-radius:var(--r)}
.proof-row-img.placeholder span{font-size:.85rem; color:var(--muted); opacity:.6}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .visual-split,.visual-split.reverse,.section-intro,.application-layout{grid-template-columns:1fr}
  .visual-split.reverse .generated-figure{order:2}
  .readiness-panel{position:static}
  .insight-grid,.flow-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-step:not(:last-child)::after{display:none}
  .teaser-grid,.fit-grid,.proof-captions.feature{grid-template-columns:1fr}
}
@media(max-width:820px){
  body{font-size:17px; padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .hero{padding:0 0 26px}
  .headline{
    font-size:clamp(1.75rem,7.35vw,2.02rem); line-height:1.14;
  }
  .mobile-br{display:block}
  .hero .preheadline{
    display:block; width:100vw; max-width:none;
    margin:0 calc(50% - 50vw) 14px; padding:8px 18px;
    border-radius:0; box-shadow:inset 0 -1px 0 rgba(245,241,230,.16);
    font-size:.78rem; text-align:center;
  }
  .hero .subhead{
    display:block; overflow:visible; font-size:.8rem; line-height:1.48;
    width:100%; max-width:none; margin:12px auto 0;
    text-wrap:balance;
  }
  .hero .video-wrap{margin:20px 0 4px; border-radius:calc(var(--r) - 4px)}
  .cta-block{align-items:stretch; margin-top:24px}
  .hero .microtrust{display:none}
  .hero .btn,.cta-block .btn{align-self:stretch}
  .btn.big{font-size:1.05rem; padding:16px 28px}
  .proof-captions{grid-template-columns:1fr}
  .proof-ladder{grid-template-columns:1fr}
  .gallery-item,.gallery-item img{width:200px}
  .gallery-item img{height:136px}
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bio-card{grid-template-columns:1fr; gap:22px; text-align:center}
  .bio-card img{max-width:260px; margin:0 auto}
  section{padding:52px 0}
  .insight-card,.flow-step{min-height:0}
  .sticky-cta{padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px)); transition:transform .24s var(--ease-out)}
  .trustbar .container{
    justify-content:flex-start; align-items:flex-start; gap:8px;
    padding-top:16px; padding-bottom:16px;
  }
  .trustbar .ti{
    width:100%; align-items:flex-start; gap:10px;
    font-size:.9rem; line-height:1.5; text-align:left;
  }
  .trustbar .ti::before{margin-top:.22em}
  .trustbar .sep{display:none}
}
@media(max-width:520px){
  .container{padding:0 18px}
  .section-title{font-size:clamp(1.45rem,8vw,2rem)}
  .insight-grid,.flow-map,.tgrid{grid-template-columns:1fr}
  .insight-grid{gap:0}
  .insight-card{
    padding:22px 0; border:0; border-top:1px solid var(--hairline);
    border-radius:0; background:transparent; box-shadow:none;
  }
  .insight-card::after{display:none}
  .card-label{background:transparent; border-color:var(--brass-soft); padding:3px 9px}
  .insight-card h3{margin-top:14px}
  .teaser-grid{gap:0}
  .teaser-card{
    padding:22px 0; border:0; border-top:1px solid var(--hairline);
    border-radius:0; background:transparent; box-shadow:none;
  }
  .teaser-card::after{display:none}
  .generated-figure figcaption{font-size:.82rem}
  .application-layout{gap:18px}
  .tgrid{grid-template-columns:1fr}
  .quiz-card{padding:24px 18px}
  .readiness-panel{padding:22px 18px}
  .q-nav{display:grid; grid-template-columns:1fr; gap:10px}
  .q-nav span{display:none}
  .q-nav .btn{width:100%}
  .cookie{flex-direction:column; align-items:stretch; text-align:center}
}
@media(max-width:340px){
  .headline{font-size:1.53rem; line-height:1.13}
  .hero .subhead{font-size:.76rem; line-height:1.38}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn-pulse::after{animation:none}
  [data-reveal]{transition:opacity .12s ease; transform:none}
  .gallery-item img,.btn,.line-btn,.sticky-cta,.progress i,.opt{transition:none}
  .gallery-track{animation:none}
}