/* =========================================================================
   Patient Engine by ConsultingThai · "clinic blue + peach" (Tum 29 Oct 2026: no green, it reads as Expert Solution)
   white ground · CT navy for text · clinic blue for buttons and emphasis · peach for the badge and accents only ·
   sky washes · CT gold only on "by ConsultingThai".
   Anuphan headings + IBM Plex Sans Thai body. One light theme.
   Motion ~20% of the ecosystem kit (CI v1 §10.6.1): short load fade in the hero, small lift on buttons/cards, one reveal per
   section. transform/opacity only; prefers-reduced-motion lands everything in its final state.
   Styles every class the shared engine renders (app.js topbar/footer/cookie, apply.js steps, book.js slot picker).
   ========================================================================= */
:root{
  --paper:#FFFFFF; --surface:#FFFFFF; --soft:#F6F8FC; --cream:#FFF9F6;
  --ink:#13233A; --muted:#55657A; --faint:#7C8B98; --line:#DDE3EE; --line-2:#EDF1F7;
  --brand:#2A62F0; --brand-d:#1D4FD6; --brand-ink:#FFFFFF; --sky:#E6EEFF; --sky-2:#F2F6FF;
  --peach:#FF7A59; --peach-soft:#FFE9E2; --peach-ink:#A23F22;
  --lilac:#EEEAFF; --lilac-ink:#5A48C8; --sun:#FFC94D;
  --gold:#B99559; --line-green:#06C755; --danger:#B42318;
  --display:"Anuphan","IBM Plex Sans Thai",system-ui,sans-serif;
  --body:"IBM Plex Sans Thai",system-ui,sans-serif;
  --r:20px; --r-sm:12px; --maxw:1120px; --maxw-n:760px;
  --shadow:0 24px 60px -36px rgba(19,35,58,.35);
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.75 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip}
img{display:block; max-width:100%}
a{color:inherit}
button{font:inherit}
[hidden]{display:none !important}
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right))}
.wrap.narrow{max-width:var(--maxw-n)}
.center{text-align:center}
.nowrap{white-space:nowrap}
@media(max-width:1099px){ .br-desk{display:none} }

/* ---------- type ---------- */
.h1{margin:0; font:700 clamp(1.75rem,4.2vw,2.75rem)/1.38 var(--display); letter-spacing:-.005em; text-wrap:balance; overflow-wrap:anywhere}
.h1.sm{font-size:clamp(1.5rem,3.4vw,2.2rem)}
.h2{margin:0; font:700 clamp(1.4rem,2.8vw,1.95rem)/1.42 var(--display); text-wrap:balance}
.h3{margin:0 0 14px; font:600 1.2rem/1.45 var(--display)}
.lede{margin:14px auto 0; max-width:62ch; color:var(--muted); font-size:1.04rem; line-height:1.8}
.label{margin:0 0 10px; font-weight:600; font-size:.92rem; color:var(--brand)}
.fine{margin:22px auto 0; max-width:72ch; font-size:.82rem; line-height:1.7; color:var(--faint)}
mark.hl,.highlight{background:none; color:var(--brand); padding:0}
strong{font-weight:600}
.ico{width:22px; height:22px; flex:none}

/* ---------- urgency bar + top bar ---------- */
.bar{padding:9px max(16px, env(safe-area-inset-left)); text-align:center; font-size:.88rem; font-weight:500; line-height:1.5; background:var(--brand); color:#fff}
.bar.warm{background:var(--peach)}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 0; border-bottom:1px solid var(--line-2)}
.wordmark{display:flex; align-items:baseline; gap:8px; text-decoration:none; min-width:0}
.wordmark b{font:700 1.18rem/1 var(--display); color:var(--ink); white-space:nowrap}
.wordmark b span{color:var(--brand); margin-right:.28em}
.wordmark small{font-size:.74rem; font-weight:500; color:var(--gold); white-space:nowrap}
.stepper{display:flex; flex-direction:column; align-items:flex-end; gap:6px; font-size:.82rem; color:var(--muted)}
.stepper-text b{margin-left:6px; color:var(--ink); font-weight:600}
.stepper-bar{display:flex; gap:4px}
.stepper-bar i{display:block; width:26px; height:4px; border-radius:2px; background:var(--line)}
.stepper-bar i.on{background:var(--brand)}
@media(max-width:430px){ .wordmark small{display:none} .stepper-text b{display:none} }

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:12px; max-width:100%; cursor:pointer; border:0; text-decoration:none;
  border-radius:var(--r-sm); padding:16px 28px; background:var(--brand); color:var(--brand-ink);
  font:600 1.04rem/1.35 var(--display); text-align:center; box-shadow:0 14px 30px -18px rgba(42,98,240,.75);
  transition:transform .2s var(--ease), background .2s}
.btn:hover{background:var(--brand-d); transform:translateY(-1px)}
.btn:focus-visible,.opt:focus-visible,.day-chip:focus-visible,.slot-chip:focus-visible{outline:3px solid rgba(42,98,240,.35); outline-offset:3px}
.btn.big{padding:19px 34px; font-size:1.1rem}
.btn.small{padding:10px 16px; font-size:.9rem}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none}
.btn.ghost:hover{background:var(--soft)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn .ar{transition:transform .2s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.nav-cta{display:none}
.cta-block{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:26px}
.cta-note{margin:0; font-size:.86rem; color:var(--muted)}
.line-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:var(--r-sm);
  background:var(--line-green); color:#fff; font-weight:600; text-decoration:none}
.line-btn.big{padding:17px 30px; font-size:1.05rem}

/* ---------- VSL hero ---------- */
.badge{display:inline-block; margin-bottom:16px; padding:6px 14px; border-radius:999px; background:var(--peach-soft); color:var(--peach-ink); font-weight:600; font-size:.88rem; line-height:1.4}
.hero{padding:34px 0 52px; background:linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%)}
.video-wrap{max-width:860px; margin-top:28px}
.player{border-radius:var(--r); overflow:hidden; background:#0F1E2E; box-shadow:var(--shadow)}
.player video{display:block; width:100%; aspect-ratio:16/9}
.poster{position:relative; aspect-ratio:16/9; max-width:100%}
.poster img{width:100%; height:100%; object-fit:cover; object-position:50% 28%; filter:saturate(1.05)}
.poster::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,30,46,.05) 40%, rgba(15,30,46,.55))}
.poster-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; display:grid; place-items:center;
  width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--brand); box-shadow:0 10px 30px rgba(0,0,0,.25)}
.poster-play .ico{width:30px; height:30px; margin-left:4px}
.poster-label{position:absolute; left:16px; bottom:14px; z-index:1; color:#fff; font-size:.86rem; font-weight:500}

/* ---------- sections ---------- */
.sec{padding:72px 0}
.sec.tight{padding:40px 0}
.sec.mint{background:var(--sky-2)}
.sec.soft{background:var(--soft)}
.sec.final{background:var(--sky-2)}
.steps{list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
.steps li{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 20px}
.step-ico{display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--sky); color:var(--brand); margin-bottom:14px}
.step-n{position:absolute; top:18px; right:20px; font:700 .95rem var(--display); color:var(--line)}
.steps h3{margin:0 0 6px; font:600 1.08rem/1.45 var(--display)}
.steps p{margin:0; font-size:.95rem; line-height:1.7; color:var(--muted)}
.install{margin:28px auto 0; max-width:60ch; font-size:1rem; color:var(--ink)}
.install strong{color:var(--brand)}
@media(max-width:900px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .steps{grid-template-columns:minmax(0,1fr)} }

.cases{margin-top:34px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
.case{display:grid; grid-template-columns:150px minmax(0,1fr); background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.case-img{background:var(--soft)}
.case-img img{width:100%; height:100%; min-height:190px; object-fit:cover; object-position:50% 25%}
.case-body{padding:18px 20px; min-width:0}
.case-type{display:flex; align-items:center; gap:8px; margin:0 0 4px; font-size:.82rem; color:var(--muted)}
.case-logo{height:18px; width:auto}
.case h3{margin:0 0 8px; font:600 1.12rem/1.4 var(--display)}
.case-result{margin:0 0 8px; padding-left:12px; border-left:3px solid var(--brand); font-weight:600; font-size:.98rem; line-height:1.6}
.case-did{margin:0; font-size:.9rem; line-height:1.65; color:var(--muted)}
.case-link{display:inline-block; margin-top:10px; font-size:.88rem; font-weight:600; color:var(--brand); text-decoration:none}
.case-link:hover{text-decoration:underline}
@media(max-width:900px){ .cases{grid-template-columns:minmax(0,1fr)} }
@media(max-width:520px){ .case{grid-template-columns:minmax(0,1fr)} .case-img img{min-height:0; aspect-ratio:16/10} }

.orgs{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px 34px}
.orgs img{height:34px; width:auto; max-width:120px; object-fit:contain; filter:grayscale(1); opacity:.75}

.bio{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:44px; align-items:center}
.bio img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r)}
.bio-text p{margin:14px 0 0; color:var(--muted)}
@media(max-width:760px){ .bio{grid-template-columns:minmax(0,1fr); gap:24px} .bio img{max-width:300px; margin:0 auto} }
.disclaimer{margin-top:36px}

/* ---------- forms: page head + stage card ---------- */
.page-head{padding:34px 0 26px}
.stage{padding:0 0 64px}
.stage-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px 26px 22px; box-shadow:var(--shadow)}
.progress{height:5px; border-radius:3px; background:var(--line-2); overflow:hidden}
.progress i{display:block; height:100%; width:0; background:var(--brand); transition:width .35s var(--ease)}
.progress-text{margin:8px 0 18px; font-size:.82rem; color:var(--faint); text-align:right}
.q-step{display:none}
.q-step.active{display:block}
.q-title{font:600 1.28rem/1.5 var(--display); margin-bottom:6px}
.q-title.long{font-size:1.1rem}
.q-help{margin-bottom:14px; font-size:.92rem; color:var(--muted)}
.opts{display:grid; gap:10px; margin-top:14px}
.opt{display:block; width:100%; text-align:left; cursor:pointer; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink); font-size:1rem; line-height:1.5; transition:border-color .15s, background .15s}
.opt:hover{border-color:var(--brand)}
.opt.selected{border-color:var(--brand); background:var(--sky-2); box-shadow:inset 0 0 0 1px var(--brand)}
.opts.multi .opt{padding-left:46px; position:relative}
.opts.multi .opt::before{content:""; position:absolute; left:16px; top:50%; width:18px; height:18px; margin-top:-9px; border:1.5px solid var(--faint); border-radius:5px; background:var(--surface)}
.opts.multi .opt.selected::before{border-color:var(--brand); background:var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/14px no-repeat}
.contact-fields{display:grid; gap:12px; margin-top:16px}
.field{display:block}
.field input,.field textarea{width:100%; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
  color:var(--ink); font:400 1rem/1.5 var(--body)}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(42,98,240,.15)}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.err{display:none; margin-top:6px; font-size:.86rem; color:var(--danger)}
.consent-field{margin-top:14px}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.86rem; line-height:1.6; color:var(--muted); cursor:pointer}
.consent input{width:18px; height:18px; margin-top:3px; accent-color:var(--brand); flex:none}
.consent a{color:var(--brand)}
.q-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px}
.q-nav .btn{padding:14px 22px}
@media(max-width:520px){ .stage-card{padding:20px 16px 18px} .q-nav .btn:not(.ghost){flex:1} }

/* ---------- booking (step 2) ---------- */
.book-grid{display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:22px; align-items:start}
.call-card,.cal-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px}
.cal-card{box-shadow:var(--shadow)}
.host{display:flex; align-items:center; gap:12px}
.host img{width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:50% 20%}
.host b{display:block; font-weight:600; font-size:.98rem; line-height:1.4}
.host span{font-size:.84rem; color:var(--muted)}
.call-title{display:flex; justify-content:space-between; gap:10px; margin:18px 0 10px; font:600 1.1rem/1.4 var(--display)}
.call-len{color:var(--brand)}
.call-facts{margin:0; display:grid; gap:10px}
.call-facts div{display:grid; grid-template-columns:80px minmax(0,1fr); gap:8px; font-size:.9rem; line-height:1.55; padding-top:10px; border-top:1px solid var(--line-2)}
.call-facts dt{color:var(--faint)}
.call-facts dd{margin:0}
.call-note{margin:16px 0 0; font-size:.86rem; color:var(--muted)}
@media(max-width:860px){ .book-grid{grid-template-columns:minmax(0,1fr)} .call-card{order:2} }
.tz{margin:0 0 6px; font-size:.82rem; color:var(--faint)}
.booker-step-label{margin:18px 0 10px; font-weight:600; font-size:.95rem}
.week-group{margin-bottom:10px}
.week-label{display:block; margin-bottom:6px; font-size:.8rem; color:var(--faint)}
.day-row,.slot-row{display:flex; flex-wrap:wrap; gap:8px}
.day-chip{display:flex; flex-direction:column; align-items:center; min-width:62px; padding:8px 6px; cursor:pointer; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); line-height:1.25}
.day-chip .dow{font-size:.78rem; color:var(--muted)}
.day-chip .dnum{font:700 1.2rem var(--display)}
.day-chip .mon{font-size:.74rem; color:var(--muted)}
.slot-chip{padding:10px 14px; cursor:pointer; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:.95rem}
.day-chip:hover,.slot-chip:hover{border-color:var(--brand)}
.day-chip.selected,.slot-chip.selected{background:var(--brand); border-color:var(--brand); color:#fff}
.day-chip.selected .dow,.day-chip.selected .mon{color:rgba(255,255,255,.85)}
.pick-summary{display:none; margin-top:16px; padding:12px 14px; border-radius:var(--r-sm); background:var(--sky-2); font-size:.95rem}
.pick-summary.show{display:block}
.pick-summary a{color:var(--brand)}
.slot-confirm{margin-top:18px}
.slot-confirm .btn{width:100%}
.invite-contact{display:grid; gap:10px}
.booker-empty{margin:0; color:var(--muted)}
.booker-line-fallback{margin:16px 0 0; font-size:.88rem; text-align:center}
.booker-line-fallback a{color:var(--brand)}
.sticky-confirm{position:fixed; left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom) + var(--lift,0px)); z-index:40;
  display:none; padding:16px; border:0; border-radius:var(--r-sm); background:var(--brand); color:#fff; font:600 1rem var(--display); box-shadow:var(--shadow)}
.sticky-confirm.show{display:block}
@media(min-width:700px){ .sticky-confirm{display:none !important} }

/* ---------- confirmed / not-yet ---------- */
.seal{display:grid; place-items:center; width:58px; height:58px; margin:0 auto 16px; border-radius:50%; background:var(--brand); color:#fff; font-size:1.6rem}
.booked{display:grid; gap:10px; max-width:460px; margin:24px auto 0; text-align:left}
.booked div{display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.booked dt{color:var(--faint); font-size:.9rem}
.booked dd{margin:0; font-weight:600}
.sla{margin:20px auto 0; max-width:56ch; color:var(--muted)}
.ics-row{margin:16px 0 0}
.ty-video{margin:26px 0 0}
.ty-video-frame iframe,.ty-video-frame video{width:100%; aspect-ratio:16/9; border:0; border-radius:var(--r)}
.prep{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px}
.prep li{display:grid; grid-template-columns:48px minmax(0,1fr); gap:14px; padding:18px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.prep .badge{display:grid; place-items:center; width:48px; height:48px; margin:0; padding:0; border-radius:12px; background:var(--sky); color:var(--brand)}
.prep-step{font-size:.78rem; color:var(--faint)}
.prep h3{margin:0 0 4px; font:600 1.06rem/1.45 var(--display)}
.prep p{margin:0; font-size:.94rem; color:var(--muted)}
.prep-act{margin-top:12px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.qr-box{display:none; align-items:center; gap:12px; font-size:.84rem; color:var(--muted)}
.qr-box img{width:96px; height:96px}
.qr-box p{margin:0}
@media(min-width:861px){ .qr-box:not([hidden]){display:flex} }
.outcomes{margin:24px auto 0; padding-left:22px; display:grid; gap:10px; max-width:62ch}
.outcomes li::marker{color:var(--brand); font-weight:700}
.line-cta-card{display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:28px}
.back-link{display:inline-block; margin-bottom:12px; font-size:.9rem; color:var(--brand); text-decoration:none}
.legal-body p{margin:16px 0 0; color:var(--muted)}

/* ---------- footer, sticky CTA, cookie ---------- */
footer{margin-top:0; padding:28px 0 12px; border-top:1px solid var(--line); background:var(--surface); font-size:.82rem; color:var(--faint)}
.foot-legal{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 8px; text-align:center; line-height:1.7}
.foot-legal a{text-decoration:none}
.foot-legal a:hover{color:var(--brand)}
.footer-dot{opacity:.5}
.foot-others{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 8px; margin-top:6px; text-align:center; line-height:1.7}
.foot-others a{text-decoration:none; color:var(--muted, inherit)}
.foot-others a:hover{color:var(--brand)}
.foot-others em{font-style:normal; opacity:.7}
.eco-strip{--eco-line:var(--line-2); --eco-ink:var(--muted); margin-top:18px}
.sticky-cta{position:fixed; left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom) + var(--lift,0px)); z-index:40;
  display:block; padding:15px; border-radius:var(--r-sm); background:var(--brand); color:#fff; text-align:center; text-decoration:none;
  font:600 1rem var(--display); box-shadow:var(--shadow); transform:translateY(140%); transition:transform .3s var(--ease)}
.sticky-cta.show{transform:none}
@media(min-width:861px){ .sticky-cta{display:none !important} }
.cookie{position:fixed; left:max(12px, env(safe-area-inset-left)); right:max(12px, env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom)); z-index:50;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; max-width:720px; margin:0 auto; padding:14px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow); font-size:.86rem}
.cookie p{margin:0; flex:1 1 260px}
.cookie a{color:var(--brand)}
.cookie-actions{display:flex; gap:8px}

@media(prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto !important} }

body.has-sticky footer{padding-bottom:84px}
@media(min-width:861px){ body.has-sticky footer{padding-bottom:12px} }

/* =========================================================================
   v4 refined layer (Tum 29 Oct 2026: "ลูกเล่น 20% · ไม่ดูเด็ก · น่าเชื่อถือ") — overrides the base rules above.
   No doodles, offset shadows or sawtooth bands. Motion: a short fade-up on load, one reveal per section, a 2–3px lift
   on buttons and cards. Peach is kept to the badge and the guarantee seal.
   ========================================================================= */
/* highlight: brand blue on a flat sky marker */
mark.hl,.highlight{color:var(--brand); background:linear-gradient(transparent 62%, var(--sky) 62%, var(--sky) 92%, transparent 92%); padding:0 2px; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.h1 .nowrap{white-space:nowrap}

/* buttons: solid blue, soft shadow, small lift */
.btn{border-radius:12px; background:var(--brand); color:var(--brand-ink);
  box-shadow:0 1px 2px rgba(19,35,58,.12), 0 10px 24px -14px rgba(42,98,240,.8);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s}
.btn:hover{background:var(--brand-d); transform:translateY(-2px); box-shadow:0 1px 2px rgba(19,35,58,.12), 0 16px 30px -14px rgba(42,98,240,.85)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:none}
.btn.ghost:hover{background:var(--soft)}
.btn:disabled{opacity:1; background:#C9D3E6; color:#fff; transform:none; box-shadow:none}
.btn:focus-visible{outline:3px solid rgba(42,98,240,.35); outline-offset:3px}
.q-nav .btn{padding:13px 22px}

/* urgency bar + badge */
.bar{background:var(--ink); color:#fff}
.bar.warm{background:var(--peach); color:#fff}
.badge{background:var(--peach-soft); color:var(--peach-ink)}
.wordmark b span{color:var(--brand)}

/* hero: quiet wash + short load sequence */
.hero{position:relative; background:linear-gradient(180deg, var(--sky-2), var(--paper) 70%)}
.js .load{opacity:0; transform:translateY(12px); animation:rise .6s var(--ease) forwards; animation-delay:var(--d,0ms)}
@keyframes rise{to{opacity:1; transform:none}}
.player{border:1px solid var(--line); box-shadow:var(--shadow)}
.poster-play{color:var(--brand); transition:transform .25s var(--ease)}
.player:hover .poster-play{transform:translate(-50%,-50%) scale(1.04)}

/* sections + cards: hairline borders, soft shadows, small lift */
.sec.mint,.sec.final{background:var(--soft); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.sec.soft{background:var(--paper)}
.steps li,.case,.prep li{border:1px solid var(--line); box-shadow:0 1px 2px rgba(19,35,58,.04); transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.steps li:hover,.case:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.step-ico{background:var(--sky); color:var(--brand); border-radius:12px}
.step-n{color:#C9D3E6}
.install strong{color:var(--brand)}
.case-result{border-left-color:var(--brand)}
.case-link{color:var(--brand)}
.case-tag{display:inline-block; margin:0 0 6px; padding:2px 10px; border-radius:999px; background:var(--sky); color:var(--brand-d); font-size:.76rem; font-weight:600}
.cases-group{margin:36px 0 0; font:600 1.05rem var(--display); color:var(--ink)}
.cases-group + .cases{margin-top:14px}
.bio img{border-radius:var(--r); box-shadow:var(--shadow)}

/* guarantee */
.guarantee{position:relative; margin:34px auto 0; max-width:760px; padding:26px 26px 24px 92px; border:1px solid var(--line); border-top:3px solid var(--brand); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow); text-align:left}
.guarantee .seal-g{position:absolute; left:22px; top:24px; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--sky); color:var(--brand)}
.guarantee .seal-g .ico{width:26px; height:26px}
.guarantee h3{margin:0 0 8px; font:700 1.2rem/1.45 var(--display)}
.guarantee p{margin:0; color:var(--muted); font-size:.98rem}
.guarantee ul{margin:12px 0 0; padding-left:20px; color:var(--muted); font-size:.9rem}
.guarantee .fine{margin:12px 0 0; text-align:left}
@media(max-width:520px){ .guarantee{padding:84px 18px 20px} .guarantee .seal-g{left:18px; top:18px} }

/* forms + booking */
.stage-card,.cal-card{border:1px solid var(--line); box-shadow:var(--shadow)}
.opt.selected{background:var(--sky-2); border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand)}
.day-chip.selected,.slot-chip.selected{background:var(--brand); border-color:var(--brand)}
.seal{background:var(--brand); box-shadow:0 0 0 8px var(--sky)}
.prep .badge{background:var(--sky); color:var(--brand)}
.sticky-cta,.sticky-confirm{background:var(--brand); border-radius:12px}
.stepper-bar i.on,.progress i{background:var(--brand)}

/* one reveal per section */
.js .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .reveal.in{opacity:1; transform:none}

@media(prefers-reduced-motion:reduce){
  .js .load{animation:none; opacity:1; transform:none}
  .js .reveal{opacity:1; transform:none; transition:none}
}
.case.noimg{grid-template-columns:minmax(0,1fr)}
/* cases: three cards per row with the photo on top; one per row (photo left) on tablets, stacked on phones */
.cases{grid-template-columns:repeat(3,minmax(0,1fr))}
.case{grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr}
.case-img img{min-height:0; aspect-ratio:4/3}
.case.noimg{grid-template-rows:1fr}
@media(max-width:900px){
  .cases{grid-template-columns:minmax(0,1fr)}
  .case{grid-template-columns:170px minmax(0,1fr); grid-template-rows:auto}
  .case.noimg{grid-template-columns:minmax(0,1fr)}
  .case-img img{height:100%; aspect-ratio:auto; min-height:200px}
}
@media(max-width:520px){
  .case{grid-template-columns:minmax(0,1fr)}
  .case-img img{min-height:0; aspect-ratio:16/10}
}

/* =========================================================================
   main site (index · results · pricing) — same refined layer, no extra motion
   ========================================================================= */
.site-nav{display:flex; align-items:center; gap:6px}
.site-nav a:not(.btn){padding:8px 12px; border-radius:10px; color:var(--muted); font-weight:500; font-size:.95rem; text-decoration:none; transition:color .15s, background .15s}
.site-nav a:not(.btn):hover{color:var(--ink); background:var(--soft)}
.site-nav a[aria-current="page"]{color:var(--brand); background:var(--sky-2)}
.site-nav .btn{margin-left:8px}
@media(max-width:860px){
  .topbar:has(.site-nav){flex-wrap:wrap; row-gap:8px; padding-bottom:10px}
  .site-nav{width:100%; justify-content:space-between; margin:0 -12px}
  .site-nav .btn{display:none}
}

.home-hero{padding:48px 0 40px}
.home-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center}
.home-copy .lede{margin-left:0}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.cta-row .btn .ico{width:18px; height:18px}
.home-photo{margin:0; border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5}
.home-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.home-grid.has-video{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:48px}
/* home video slot: same player box as vsl.html; until video.src is set it shows a brand card (no photo of Tum) that opens /vsl */
.home-video{margin:0; aspect-ratio:16/9}
.home-video > *{height:100%}
.player iframe{display:block; width:100%; aspect-ratio:16/9; border:0}
.poster-card{display:grid; place-content:center; justify-items:center; gap:4px; height:100%; padding:24px; text-align:center; text-decoration:none; color:#fff;
  background:radial-gradient(120% 90% at 85% 0%, rgba(255,255,255,.16), transparent 60%), linear-gradient(140deg, var(--brand) 0%, var(--brand-d) 100%)}
.poster-card::after{content:none}
.poster-card .poster-play{position:static; transform:none; width:64px; height:64px; margin-bottom:10px}
.poster-card .poster-play .ico{width:26px; height:26px}
.player:hover .poster-card .poster-play{transform:scale(1.04)}
.pc-label{font:600 1.15rem/1.4 var(--display)}
.pc-len{font-size:.92rem; opacity:.8}
.facts{list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden}
.facts li{padding:20px 24px; display:grid; gap:4px}
.facts li + li{border-left:1px solid var(--line)}
.facts b{font:700 1.45rem/1.3 var(--display); color:var(--brand)}
.facts span{font-size:.92rem; line-height:1.6; color:var(--muted)}
@media(max-width:860px){
  .home-hero{padding-top:32px}
  .home-grid{grid-template-columns:minmax(0,1fr); gap:32px}
  .home-photo{max-width:360px; aspect-ratio:1/1}
  .home-grid.has-video{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts li + li{border-left:0; border-top:1px solid var(--line)}
}
@media(max-width:520px){ .cta-row .btn{width:100%} }

.steps.fit{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){ .steps.fit{grid-template-columns:minmax(0,1fr)} }
.more{margin:28px 0 0}

.price-teaser{padding:36px 32px; border:1px solid var(--line); border-top:3px solid var(--brand); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow); text-align:center}
.price-teaser .lede{margin-bottom:0}
.price-from{margin:20px auto 22px; max-width:46ch; font-size:1.05rem; line-height:1.8}
.price-from strong{color:var(--brand)}

.faq-list{margin-top:28px; border-bottom:1px solid var(--line)}
.faq-item{border-top:1px solid var(--line)}
.faq-item > summary{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 2px; cursor:pointer; list-style:none; font:600 1.02rem/1.6 var(--display)}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-plus{position:relative; flex:none; width:14px; height:14px}
.faq-plus::before,.faq-plus::after{content:""; position:absolute; left:0; top:6px; width:14px; height:2px; border-radius:1px; background:var(--brand); transition:transform .25s var(--ease)}
.faq-plus::after{transform:rotate(90deg)}
.faq-item[open] .faq-plus::after{transform:rotate(0)}
.faq-item > p{margin:0; padding:0 2px 20px; max-width:64ch; line-height:1.85; color:var(--muted)}

.sub-hero{padding:48px 0 36px}
.sec.top-0{padding-top:8px}
.gallery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:28px}
.gallery figure{margin:0}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-sm)}
.gallery figcaption{margin-top:8px; font-size:.86rem; line-height:1.6; color:var(--muted)}
@media(max-width:760px){ .gallery{grid-template-columns:minmax(0,1fr)} }
.press-title{margin-top:44px}
.press{list-style:none; margin:0 auto; padding:0; max-width:640px}
.press-item{display:flex; gap:16px; align-items:center; padding:14px 18px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); text-decoration:none; color:var(--ink); line-height:1.6; transition:border-color .2s}
.press-item:hover{border-color:var(--brand)}
.press-item img{flex:0 0 72px; max-height:36px; object-fit:contain}
.press-item small{display:block; font-size:.8rem; color:var(--muted)}

.plans{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; max-width:960px; margin:0 auto}
.plan{position:relative; display:flex; flex-direction:column; padding:30px 28px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:0 1px 2px rgba(19,35,58,.04)}
.plan.featured{border:1px solid var(--brand); box-shadow:var(--shadow)}
.plan-badge{position:absolute; top:-13px; left:28px; padding:4px 12px; border-radius:999px; background:var(--brand); color:#fff; font-size:.8rem; font-weight:600}
.plan h2{margin:0; font:700 1.3rem/1.4 var(--display)}
.plan-tag{margin:4px 0 0; color:var(--muted); font-size:.95rem}
.plan-price{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:22px 0 2px}
.plan-price b{font:700 2.5rem/1.1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums}
.plan-price span{color:var(--muted); font-size:.95rem}
.plan-terms{margin:0 0 22px; font-size:.86rem; color:var(--faint)}
.plan .btn{width:100%}
.ticks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px}
.ticks li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; font-size:.95rem; line-height:1.65}
.tick{display:grid; place-items:center; width:22px; height:22px; margin-top:2px; border-radius:50%; background:var(--sky); color:var(--brand)}
.tick .ico{width:14px; height:14px; stroke-width:2.4}
@media(max-width:860px){ .plans{grid-template-columns:minmax(0,1fr); max-width:560px} }
.both{max-width:960px; margin:28px auto 0; padding:22px 26px; border-radius:var(--r); background:var(--soft)}
.both h3{margin:0; font:600 1.05rem var(--display)}
.both .ticks{margin-top:12px}

/* case card whose image is a brand logo (no photo of the client) */
.case-img.logo{background:#fff; display:flex; align-items:center; justify-content:center; padding:24px; aspect-ratio:4/3; border-bottom:1px solid var(--line-2)}
.case-img.logo img{width:auto; height:auto; max-width:78%; max-height:64px; min-height:0; aspect-ratio:auto; object-fit:contain}
@media(max-width:900px){ .case-img.logo{aspect-ratio:auto; min-height:200px; border-bottom:0; border-right:1px solid var(--line-2)} }
@media(max-width:520px){ .case-img.logo{aspect-ratio:16/10; min-height:0; border-right:0; border-bottom:1px solid var(--line-2)} }