/* Expert Godlike Program 2.0 · by ConsultingThai
   Ecosystem reskin 27 Oct 2026 (CI v1 §1, §4.9, §7.2):
   - Parent half (shared with kantawee.com / ConsultingThai): Inter + Noto Sans Thai, tokens-core.css scale,
     pill buttons 48px with no shadow, 20px cards with 1px hairline and no hover lift, kicker style,
     one-question form, calm motion kit (motion.css/js), eco strip, "by ConsultingThai" lockup.
   - Own half (Godlike, Tum 27 Oct: "ใช้สีอื่น ไม่เอาแบบเว็บหลัก"): warm paper + forest green + brass.
   Needs tokens-core.css loaded first. config.theme may override --bg/--ink/--accent at runtime. */

:root{
  /* Godlike own palette (contrast checked on --bg #FAF8F4) */
  --bg:#FAF8F4; --bg-alt:#F2EEE7; --surface:#FFFFFF; --ink:#14110E;
  --accent:#1A6B54;          /* forest · white text 6.41:1 */
  --accent-2:#13513F;        /* forest hover · 9.22:1 */
  --forest-deep:#0F3B2F;     /* dark bands + footer · cream 11.74:1 */
  --cta-alt:#B8862F; --highlight:#B8862F;
  --brass:#B8862F;           /* decoration only (3.05:1 on paper) */
  --brass-ink:#7A5A1E;       /* brass as text on light · 5.98:1 */
  --brass-soft:#E6C98F;      /* brass on dark · 7.77:1 on forest-deep */
  --brass-tint:rgba(184,134,47,.26);
  --danger:#9B2C2C;
  --muted:#6B6258;           /* 5.64:1 */
  --muted-on-dark:#B9C7BF;   /* 7.1:1 on forest-deep */
  --hairline:rgba(20,17,14,.12); --hairline-2:rgba(20,17,14,.07);
  --forest-tint:rgba(26,107,84,.07);
  --shadow:0 24px 60px rgba(20,17,14,.10);
  --shadow-sm:none;
  /* shared type system */
  --font-sans:"Inter","Noto Sans Thai",-apple-system,system-ui,"Segoe UI",sans-serif;
  --font-thai:var(--font-sans); --font-latin:var(--font-sans);
  --ease-out:var(--m-ease, cubic-bezier(.22,1,.36,1));
  --maxw:880px; --maxw-wide:1140px; --r:20px; --r-sm:12px;
  /* motion kit hooks */
  --m-mark:var(--brass-tint); --m-rule:var(--hairline);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:var(--text-base,1.0625rem); line-height:var(--leading-body,1.7);
  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}
button,input,textarea,select{font:inherit}
.container,.card,section,article{min-width:0; overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px}

/* ---------- top bar · lockup "Expert Godlike Program by ConsultingThai" ---------- */
.gl-top{padding:16px 0 4px}
.gl-top .container{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:var(--maxw-wide)}
.gl-lockup{display:inline-flex; align-items:center; gap:10px; color:var(--ink); line-height:1.15; padding-right:110px}
.gl-lockup img{width:34px; height:34px; flex:0 0 auto}
.gl-lockup b{display:block; font-weight:700; font-size:.98rem; letter-spacing:-.01em}
.gl-lockup small{display:block; font-family:"Inter",sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.04em; color:var(--brass-ink); margin-top:2px}

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

/* ---------- type ---------- */
.headline{
  font-family:var(--font-sans); font-weight:700;
  font-size:clamp(2.1rem,1.4rem + 2.6vw,3.3rem); line-height:var(--leading-display,1.22);
  letter-spacing:0; margin:0; color:var(--ink); padding-block:.1em;
  overflow-wrap:anywhere; text-wrap:balance;
}
.mobile-br{display:none}
.section-title{
  font-family:var(--font-sans); font-weight:700;
  font-size:var(--text-3xl, clamp(1.6rem,3.6vw,2.4rem)); line-height:1.28;
  letter-spacing:0; margin:0 0 6px; padding-block:.06em;
  overflow-wrap:anywhere; text-wrap:balance;
}
.subhead{font-size:var(--text-lg,1.1875rem); color:var(--muted); font-weight:400; margin:18px auto 0; line-height:1.7}
.lead{font-size:var(--text-base,1.0625rem); color:var(--muted); margin:0; line-height:1.75}
.ink{color:var(--ink)}
.eyebrow,.preheadline{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-sans); font-weight:700;
  font-size:var(--text-sm,.9375rem); letter-spacing:0;
  color:var(--brass-ink); margin:0 0 18px; line-height:1.5;
}
.eyebrow::before,.preheadline::before{content:""; width:28px; height:1.5px; background:var(--brass); flex:0 0 auto}
.hero .preheadline{
  font-weight:600; color:var(--accent-2);
  background:var(--forest-tint); border:1px solid rgba(26,107,84,.18); border-radius:999px; padding:7px 18px;
}
.hero .preheadline::before{width:8px; height:8px; border-radius:50%; background:var(--accent)}
.highlight{
  background:linear-gradient(transparent 62%, var(--brass-tint) 62%, var(--brass-tint) 92%, transparent 92%);
  padding:0 .04em;
}
.divider{width:56px; height:1.5px; background:var(--brass); margin:18px auto 30px; border-radius:2px}
.divider.left{margin-left:0}
.red{color:var(--accent)}

/* ---------- buttons (kantawee.com shape: pill · 48px · 600 · no shadow) ---------- */
.btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; cursor:pointer; border:1px solid var(--accent); border-radius:999px;
  background:var(--accent); color:#fff; min-height:48px;
  font-family:var(--font-sans); font-weight:600; font-size:1rem;
  padding:10px 26px; line-height:1.4; text-align:center; white-space:normal; text-wrap:balance;
  max-width:100%; box-shadow:none;
  transition:transform .2s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.btn:hover{background:var(--accent-2); border-color:var(--accent-2); transform:translateY(-1px)}
.btn:active{transform:translateY(1px); transition-duration:.08s}
.btn:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
.btn.big{font-size:1.08rem; min-height:56px; padding:12px 34px}
.btn.small{min-height:44px; padding:8px 20px; font-size:.95rem}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--hairline)}
.btn.ghost:hover{background:var(--bg-alt); border-color:var(--hairline)}
.btn.alt{background:var(--brass-soft); border-color:var(--brass-soft); color:var(--ink)}
.btn.alt:hover{background:#D9B774; border-color:#D9B774}
.btn-sub{font-weight:400; font-size:.85rem; opacity:.9}
.btn-pulse{position:relative} /* calm motion: no looping pulse (CI §4.8) */

.line-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  background:#06C755; color:#fff; border:0;
  font-family:var(--font-sans); font-weight:600; padding:10px 26px; border-radius:999px;
  transition:transform .2s var(--ease-out), filter .2s}
.line-btn:hover{transform:translateY(-1px); filter:brightness(.95)}

/* ---------- hero ---------- */
.hero{padding:40px 0 56px; position:relative; overflow:hidden}
.hero .container{max-width:940px}
.hero .microtrust{margin:22px auto 0; font-size:var(--text-sm,.95rem); color:var(--muted); max-width:46ch}
.hero.center .cta-block{align-items:center}
.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:var(--text-sm,.9375rem); line-height:1.65}
.cta-note.center{margin:10px auto 0}

/* ---------- checklists ---------- */
.checklist{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.checklist li{position:relative; padding:2px 0 2px 38px; font-size:var(--text-base,1.0625rem); color:var(--ink)}
.checklist li::before{
  content:""; position:absolute; left:0; top:.42em; 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:2px solid var(--hairline);
  color:var(--muted); background:var(--surface); border-radius:0 var(--r-sm) var(--r-sm) 0}

.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 (white · 1px · 20px · no shadow · no hover lift) ---------- */
.card{background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r); padding:32px; box-shadow:none}

/* ---------- 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)}
.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:var(--text-sm,.9375rem); line-height:1.65; 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:26px 22px 28px;
  border:1px solid var(--hairline); border-radius:var(--r); background:var(--surface); overflow:hidden;
}
.insight-card::after{content:""; position:absolute; left:22px; right:22px; top:0; height:1.5px; background:var(--brass)}
.card-icon{display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:14px; border-radius:50%;
  background:var(--forest-tint); color:var(--accent); flex:0 0 auto}
.card-icon svg{width:22px; height:22px}
.card-label{display:inline-flex; min-height:28px; align-items:center; padding:3px 0;
  color:var(--brass-ink); font-size:var(--text-xs,.8125rem); font-weight:700; line-height:1.5}
.insight-card h3,.flow-step h3,.proof-step h3,.case-point h3,.readiness-item h3{
  margin:12px 0 8px; font-family:var(--font-sans); font-weight:700;
  font-size:var(--text-xl,1.25rem); line-height:1.4; 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:var(--text-sm,.9375rem); line-height:1.7}
.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)}
.flow-step:not(:last-child)::after{content:""; position:absolute; top:42px; right:-18px; width:24px; height:1.5px; 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-weight:700; font-size:.95rem; line-height:1; font-variant-numeric:tabular-nums}
.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-size:2rem; line-height:1.2; color:var(--brass-ink); font-weight:700; font-variant-numeric:tabular-nums}
.case-points{display:grid; gap:12px}
.case-point{padding:18px 20px; border-left:1.5px solid var(--brass); background:var(--surface); border-radius:0 var(--r-sm) var(--r-sm) 0}
.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-weight:700; font-size:var(--text-2xl,clamp(1.5rem,3vw,2.1rem)); color:var(--accent); line-height:1.3; font-variant-numeric:tabular-nums lining-nums}
.proof-cap .small{display:block; margin-top:8px; font-size:var(--text-sm,.9375rem); color:var(--muted)}

/* gallery headline */
.gallery-headline{font-weight:700; color:var(--ink); font-size:var(--text-xl,1.45rem); line-height:1.5; max-width:46ch; margin:0 auto 30px; text-wrap:balance}

/* bio */
.bio-card{display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:center}
.bio-card img{border-radius:var(--r-sm); aspect-ratio:4/5; object-fit:cover; object-position:center top;
  box-shadow:10px 10px 0 -1px var(--accent), 10px 10px 0 0 var(--brass-tint)}

/* 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; 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); font-size:.85rem; margin-bottom:8px}
.tcard .tname{font-weight:700; font-size:1.2rem; line-height:1.4}
.tcard .trole{color:var(--brass-ink); font-size:var(--text-sm,.9375rem); margin:4px 0 10px; font-weight:600}
.tcard .tresult{color:var(--muted); font-size:var(--text-sm,.9375rem)}

/* 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 (reads like a kicker chip) */
.badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm,.9375rem);
  letter-spacing:0; color:var(--accent-2); background:var(--forest-tint); border:1px solid rgba(26,107,84,.18);
  padding:6px 16px; border-radius:999px; line-height:1.5}
.badge::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* ---------- quiz (apply.html) · one question per screen ---------- */
.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:6px; background:var(--bg-alt); border-radius:99px; overflow:hidden}
.progress i{display:block; height:100%; width:10%; background:var(--accent); border-radius:99px; transition:width .35s var(--ease-out)}
.progress-text{font-size:var(--text-xs,.8125rem); color:var(--muted); margin:10px 0 22px; font-variant-numeric:tabular-nums}
.q-step{display:none; animation:fade .32s var(--ease-out)}
.q-step.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.q-title{font-weight:700; font-size:var(--text-xl,1.45rem); line-height:1.45; margin-bottom:6px; padding-block:.04em}
.q-title.warn{color:var(--danger)}
.q-help{color:var(--muted); font-size:var(--text-sm,.9375rem); margin-bottom:18px}
.opt{display:block; width:100%; text-align:left; background:var(--surface); border:1px solid var(--hairline); color:var(--ink);
  border-radius:var(--r-sm); padding:15px 20px; margin:10px 0; font-family:var(--font-sans); font-size:var(--text-base,1.0625rem); line-height:1.6; cursor:pointer;
  transition:border-color .2s ease, background .2s ease}
.opt:hover{border-color:var(--accent); background:#FBFCFB}
.opt.selected{border-color:var(--accent); background:var(--forest-tint); box-shadow:inset 3px 0 0 var(--accent)}
.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 rgba(20,17,14,.28); 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:var(--text-sm,.9375rem); color:var(--ink); margin-bottom:6px; font-weight:600}
.field input,.field textarea{width:100%; font-family:var(--font-sans); font-size:var(--text-base,1.0625rem); color:var(--ink); line-height:1.6;
  background:var(--surface); border:1px solid rgba(20,17,14,.2); border-radius:var(--r-sm); padding:12px 16px; min-height:48px}
.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,.14)}
.err{display:none; color:var(--danger); font-size:var(--text-sm,.9375rem); margin-top:6px}
.consent{display:flex; gap:12px; align-items:flex-start; margin:18px 0 4px; font-size:var(--text-sm,.9375rem); color:var(--muted)}
.consent input{margin-top:5px; width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto}

/* ---- booking slot picker ---- */
.tz{text-align:center; font-size:var(--text-sm,.9375rem); 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 0 0 1px var(--hairline)}
.booker-host span{font-size:1rem; color:var(--ink); font-weight:600}
.booker-step-label{text-align:center; font-weight:700; 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:var(--text-xs,.8125rem); font-weight:700; color:var(--brass-ink); 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-sans); background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-sm); cursor:pointer; text-align:center; color:var(--ink);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease}
.day-chip{flex:0 0 84px; width:84px; padding:10px 8px 12px; line-height:1.35}
.slot-chip{min-width:104px; min-height:48px; padding:12px 18px; font-size:1.05rem; font-weight:600; font-variant-numeric:tabular-nums}
.day-chip:hover,.slot-chip:hover{border-color:var(--accent)}
.day-chip.selected,.slot-chip.selected{border-color:var(--accent); background:var(--forest-tint); box-shadow:inset 0 -3px 0 var(--accent)}
.day-chip .dow{display:block; font-size:var(--text-xs,.8125rem); color:var(--muted)}
.day-chip .dnum{display:block; font-size:1.35rem; font-weight:700; color:var(--ink); margin:2px 0; font-variant-numeric:tabular-nums}
.day-chip .mon{display:block; font-size:var(--text-xs,.8125rem); color:var(--muted)}
.pick-summary{display:none; text-align:center; margin:22px auto 0; max-width:fit-content;
  padding:12px 20px; border-radius:var(--r-sm); background:var(--forest-tint); 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:var(--text-sm,.9375rem); color:var(--muted)}
.slot-confirm{display:flex; justify-content:center; margin-top:22px}
.slot-confirm .btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.booker-line-fallback{text-align:center; margin:14px 0 0}
.booker-line-fallback a{font-size:var(--text-sm,.9375rem); color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.booker-line-fallback a:hover{color:var(--accent)}
.sticky-confirm{position:fixed; left:16px; right:16px; bottom:16px; z-index:60; border:none; border-radius:999px; min-height:52px;
  padding:14px 16px; font-family:var(--font-sans); font-weight:600; font-size:1.05rem; color:#fff; background:var(--accent);
  box-shadow:0 12px 34px rgba(20,17,14,.22); transform:translateY(160%); transition:transform .25s var(--ease-out); cursor:pointer}
.sticky-confirm.show{transform:none}
@media(min-width:700px){ .sticky-confirm{display:none} }

/* ---- language switcher (injected by config.js, top-right) ---- */
.lang-switch{position:fixed; top:14px; right:14px; z-index:90; display:inline-flex; gap:2px;
  padding:3px; border-radius:999px; background:rgba(250,248,244,.94); border:1px solid var(--hairline);
  backdrop-filter:saturate(1.1) blur(4px)}
.lang-switch button{font-family:var(--font-sans); font-weight:600; font-size:.8125rem; line-height:1;
  min-height:32px; padding:7px 12px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer;
  transition:background .2s ease, color .2s ease}
.lang-switch button.on{background:var(--accent); color:#fff}
.lang-switch button:not(.on):hover{color:var(--ink)}

.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:var(--surface)}
.readiness-panel h2{margin:0 0 10px; font-size:1.45rem; line-height:1.4; font-weight:700; letter-spacing:0}
.readiness-panel > p{margin:0 0 18px; color:var(--muted); font-size:var(--text-sm,.9375rem); line-height:1.7}
.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:var(--forest-tint); color:var(--accent); font-weight:700}
.readiness-item h3{grid-column:2; margin:0 0 2px; font-size:1.05rem}
.readiness-item p{grid-column:2; font-size:var(--text-sm,.9375rem); line-height:1.65}

/* booking details (.detail-list: hairline rows, key muted / value ink 700) */
.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:700; text-align:right; color:var(--ink)}
.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:var(--text-base,1.0625rem)}
.ty-steps li::before{counter-increment:s; content:counter(s, decimal-leading-zero); position:absolute; left:0; top:0;
  width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.8rem; font-variant-numeric:tabular-nums}
.check-seal{width:72px; height:72px; border-radius:50%; background:var(--forest-tint); 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:var(--r); background:var(--surface)}
.booking-summary .bs-label{font-size:var(--text-sm,.9375rem); color:var(--muted); font-weight:600}
.booking-summary .bs-time{font-size:1.3rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums}

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

/* ---------- footer (dark forest band, like CT's navy-deep footer) ---------- */
footer{background:var(--forest-deep); color:var(--muted-on-dark); font-size:var(--text-sm,.9375rem); padding:36px 0 0; line-height:1.7}
footer .container{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:center; text-align:center; padding-bottom:26px}
footer a{color:#F5F1E6; border-bottom:1px solid rgba(245,241,230,.28)}
footer a:hover{color:var(--brass-soft); border-color:var(--brass-soft)}
.footer-dot{opacity:.45}
footer .eco-strip{--eco-ink:#F5F1E6; --eco-line:rgba(245,241,230,.16)}
footer .eco-strip a{border:0}

/* ---------- trust bar ---------- */
.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-weight:700; font-size:var(--text-xl,1.6rem); line-height:1.5; margin:0 0 20px; text-wrap:balance}

/* ---------- dark CTA band (final CTA) ---------- */
section.final-cta{background:var(--forest-deep); color:#F5F1E6}
.final-cta .section-title{color:#F5F1E6}
.final-cta .lead,.final-cta .cta-note{color:var(--muted-on-dark)}
.final-cta .divider{background:var(--brass-soft)}
.final-cta .btn{background:var(--brass-soft); border-color:var(--brass-soft); color:var(--ink)}
.final-cta .btn:hover{background:#F0D9A8; border-color:#F0D9A8}
.final-cta + section.tight{background:var(--bg)}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:55; display:block;
  background:var(--accent); color:#fff; text-align:center; font-family:var(--font-sans); font-weight:600; border-radius:999px;
  font-size:1.02rem; line-height:1.4; padding:15px 18px; box-shadow:0 12px 30px -10px rgba(20,17,14,.45);
  transform:translateY(160%); transition:transform .3s var(--ease-out)}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .arrow{margin-left:6px}
@media(min-width:821px){ .sticky-cta{display:none !important} }

.continue-note{font-size:var(--text-sm,.9375rem); 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:var(--r); box-shadow:var(--shadow); max-width:760px; margin:0 auto}
.cookie p{margin:0; font-size:var(--text-sm,.9375rem); line-height:1.6}
.cookie .btn{flex:0 0 auto; background:var(--brass-soft); border-color:var(--brass-soft); color:var(--ink)}

/* ---------- reveal (legacy data-reveal from config.js; calm values) ---------- */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .68s var(--ease-out), transform .75s var(--ease-out)}
[data-reveal].in{opacity:1; transform:none}
.hidden{display:none !important}

/* ---------- teaser boxes ---------- */
.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:26px 22px 28px; border:1px solid var(--hairline); border-radius:var(--r); background:var(--surface); overflow:hidden}
.teaser-card::after{content:""; position:absolute; left:22px; right:22px; top:0; height:1.5px; background:var(--brass)}
.teaser-card h3{margin:12px 0 8px; font-weight:700; font-size:var(--text-xl,1.25rem); line-height:1.4; color:var(--ink)}
.teaser-card p{margin:0; color:var(--muted); font-size:var(--text-sm,.9375rem); line-height:1.7}

/* ---------- 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)}
.fit-col h3{margin:0 0 16px; font-weight:700; font-size:1.3rem}
.fit-yes{border-top:3px solid var(--accent)} .fit-yes h3{color:var(--accent)}
.fit-no{border-top:3px 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:var(--text-base,1.0625rem); color:var(--ink)}
.list-neg li::before{
  content:""; position:absolute; left:0; top:.45em; 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;
}

/* ---------- 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 48s linear infinite}
.gallery-track:hover{animation-play-state:paused}
.gallery-item{flex:0 0 auto; padding:0; width:280px; border-radius:var(--r-sm); 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(15,59,47,.86)}
.lightbox .lb-figure{position:relative; z-index:1; margin:0; max-width:900px; width:100%; background:var(--surface); border-radius:var(--r); overflow:hidden}
.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.7}
.lightbox .lb-close{position:absolute; top:10px; right:10px; z-index:2; width:44px; height:44px; 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:var(--text-sm,.9375rem); 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:1px solid var(--hairline); border-top:1.5px solid var(--brass); background:var(--surface); padding:34px 26px}
.proof-captions.feature .proof-cap .big{font-size:var(--text-3xl,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 (page 2) ---------- */
.proof-rows{display:grid; gap:22px; max-width:900px; margin:0 auto}
.proof-row-img{background:var(--bg-alt)}
.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); font-size:.85rem; margin-bottom:6px}
.client-story-head h3{margin:0 0 4px; font-weight:700; font-size:1.5rem; line-height:1.4}
.client-story-head .trole{color:var(--brass-ink); font-size:var(--text-sm,.9375rem); 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); border:1px solid var(--hairline); display:block}

/* ---------- 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,.07),var(--surface))}
.line-cta-card .line-cta-icon{font-size:2rem; margin-bottom:8px}
.line-cta-card h3{margin:0 0 10px; font-weight:700; font-size:var(--text-xl,1.35rem); line-height:1.45}
.line-cta-card p{margin:0 0 20px; color:var(--muted); font-size:1rem; line-height:1.75}
.line-btn.big{font-size:1.08rem; min-height:56px; padding:12px 32px}
.sticky-line{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:55; display:block; background:#06C755; color:#fff; border-radius:999px;
  text-align:center; font-family:var(--font-sans); font-weight:600; font-size:1.02rem; padding:15px 18px;
  box-shadow:0 12px 30px -10px rgba(20,17,14,.45); transform:translateY(160%); transition:transform .3s var(--ease-out)}
.sticky-line.show{transform:translateY(0)}
@media(min-width:821px){ .sticky-line{display:none !important} }

.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:var(--text-sm,.9375rem); color:var(--muted)}

/* ---------- case-study email gate dialog (index.html #csGate) ---------- */
.cs-gate{width:min(440px, calc(100vw - 32px)); padding:30px 24px 24px; border:1px solid var(--hairline); border-radius:var(--r);
  background:var(--surface); color:var(--ink); box-shadow:0 30px 80px rgba(15,59,47,.28); font-family:var(--font-sans)}
.cs-gate::backdrop{background:rgba(15,59,47,.7)}
.cs-gate h2{margin:6px 0 8px; font-size:var(--text-xl,1.45rem); line-height:1.45; font-weight:700}
.cs-gate > p{margin:0; color:var(--muted); line-height:1.7}
.cs-gate__k{display:inline-flex; align-items:center; gap:10px; margin:0; font-size:var(--text-sm,.9375rem); font-weight:700; color:var(--brass-ink) !important}
.cs-gate__k::before{content:""; width:28px; height:1.5px; background:var(--brass)}
.cs-gate form[data-optin]{display:grid; gap:12px; margin-top:16px}
.cs-gate label span{display:block; font-size:var(--text-sm,.9375rem); font-weight:600; margin-bottom:4px}
.cs-gate input[type=text],.cs-gate input[type=email]{width:100%; min-height:48px; padding:0 14px; border:1px solid rgba(20,17,14,.2); border-radius:var(--r-sm); font:inherit; color:var(--ink); background:var(--surface)}
.cs-gate input[type=text]:focus,.cs-gate input[type=email]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(26,107,84,.14)}
.cs-gate__c{display:flex; gap:10px; align-items:flex-start; font-size:var(--text-sm,.9375rem); color:var(--muted); line-height:1.6}
.cs-gate__c input{margin-top:4px; width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto}
.cs-gate__c span{font-weight:400 !important; margin:0 !important}
.cs-gate__c a{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.cs-gate__x{position:absolute; top:6px; right:6px}
.cs-gate__x button{width:44px; height:44px; border:0; background:none; font-size:1.6rem; line-height:1; color:var(--muted); cursor:pointer; border-radius:50%}
.cs-gate__x button:hover{background:var(--bg-alt); color:var(--ink)}
.cs-gate .btn{width:100%}
.cs-gate small{color:var(--muted); font-size:var(--text-xs,.8125rem)}

/* ---------- 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){
  footer{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .hero{padding:12px 0 32px}
  .headline{font-size:clamp(1.75rem,7.35vw,2.1rem); line-height:1.3}
  .mobile-br{display:block}
  .hero .preheadline{font-size:.875rem; padding:6px 14px; margin-bottom:14px}
  .hero .subhead{font-size:1rem; line-height:1.7; margin:12px auto 0; text-wrap:balance}
  .hero .video-wrap{margin:20px 0 4px; border-radius:var(--r-sm)}
  .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.04rem; padding:12px 24px}
  .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:26px; text-align:center}
  .bio-card img{max-width:250px; margin:0 auto}
  .bio-card .divider.left{margin-left:auto}
  section{padding:56px 0}
  .insight-card,.flow-step{min-height:0}
  .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:.9375rem; line-height:1.6; text-align:left}
  .trustbar .ti::before{margin-top:.22em}
  .trustbar .sep{display:none}
}
@media(max-width:520px){
  .gl-top{padding-top:12px}
  .gl-lockup img{width:30px; height:30px}
  .gl-lockup b{font-size:.92rem}
  .section-title{font-size:clamp(1.45rem,7vw,1.9rem); line-height:1.35}
  .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}
  .insight-card::after{display:none}
  .insight-card h3{margin-top:10px}
  .teaser-grid{gap:0}
  .teaser-card{padding:22px 0; border:0; border-top:1px solid var(--hairline); border-radius:0; background:transparent}
  .teaser-card::after{display:none}
  .card{padding:24px 18px}
  .application-layout{gap:18px}
  .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}
  .detail-row{flex-direction:column; gap:2px}
  .detail-row .v{text-align:left}
}
@media(max-width:340px){
  .headline{font-size:1.6rem; line-height:1.3}
  .hero .subhead{font-size:.9375rem}
  .gl-lockup{padding-right:96px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{transition:none; opacity:1; transform:none}
  .q-step,.gated.revealed{animation:none}
  .btn,.line-btn,.sticky-cta,.sticky-line,.sticky-confirm,.progress i,.opt{transition:none}
  .btn:hover,.line-btn:hover{transform:none}
  .gallery-track{animation:none}
}
.rm .gallery-track{animation:none}