/* ภาพเคลื่อนไหว / เดโม ของหน้า landing (Codex 14 ต.ค. 2569 + hero รอบ 5)
   สีชนิดไฟล์ (PDF แดง · Excel เขียว · โฟลเดอร์เหลือง · ธนาคารน้ำเงิน) ใช้เฉพาะไอคอนไฟล์ในภาพเคลื่อนไหว — ประกาศที่นี่ที่เดียว
   สีอื่นทั้งหมดใช้ token ของ css/site.css (:root) · ไม่ฝังรหัสสีในกฎ (ยกเว้นขาวโปร่งใส rgba(255,255,255,…) ของแสงสะท้อน) */
:root{
  --file-pdf:#b92330;--file-pdf-2:#dd3944;--file-pdf-3:#ef6570;--file-pdf-shadow:rgba(185,35,48,.2);
  --file-xlsx:#14633d;--file-xlsx-2:#21834f;--file-xlsx-3:#34965f;--file-xlsx-shadow:rgba(20,99,61,.2);
  --file-folder:#f4bd29;--file-folder-2:#ffce45;--file-folder-3:#ffe18a;--file-folder-ink:#563900;--file-folder-icon:#b67d08;--file-folder-shadow:rgba(231,172,36,.2);
  --file-bank:#233f72;--file-bank-2:#507db1;
}
/* Image motion only: finite entrance, pointer response, no continuous loops. */
#poster-wrap.mmn-motion-hero{position:relative;isolation:isolate;perspective:1000px}
#poster-wrap.mmn-motion-hero::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:var(--radius);background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.28) 48%,transparent 70%);background-size:300% 100%;background-position:150% 0;opacity:0}
#poster-wrap.mmn-motion-hero.mmn-motion-enter::after{animation:mmn-image-light 1.4s .25s ease-out 1 both}
.mmn-motion-image{transform-origin:center;backface-visibility:hidden}
@keyframes mmn-image-light{0%{background-position:150% 0;opacity:0}25%{opacity:1}100%{background-position:-50% 0;opacity:0}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .mmn-motion-image{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
  #deliverables-figure .mmn-motion-image:hover,#proof-figure .mmn-motion-image:hover{transform:translateY(-5px);box-shadow:0 20px 45px rgba(13,23,44,.2)}
  .gallery-item .mmn-motion-image:hover{transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){
  .mmn-motion-image{transform:none!important;animation:none!important;transition:none!important}
  #poster-wrap.mmn-motion-hero::after{display:none!important}
}

/* Three accounting Skills, one animated input → process → output diagram. */
#deliverables-figure.skill-workflow{align-self:center;background:var(--white);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 18px 55px color-mix(in srgb,var(--navy-900) 7%,transparent);min-width:0}
.sw-head{padding:24px 24px 20px;background:var(--grad-navy);color:var(--white)}
.sw-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--navy-200);margin-bottom:12px}
.sw-badge{display:inline-flex;align-items:center;gap:7px;color:var(--gold-300);font-weight:600}
.sw-badge svg{width:17px;height:17px}
.sw-head h3{font-size:22px;line-height:1.5;color:var(--white);min-height:66px}
.sw-head p{font-size:13px;color:var(--navy-200);margin-top:8px}
.sw-pause{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--navy-400);border-radius:30px;background:transparent;padding:5px 12px}
.sw-pause:hover{background:color-mix(in srgb,var(--white) 8%,transparent)}.sw-pause:focus-visible,.sw-select:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.sw-flow{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:start;padding:32px 20px 24px;gap:2px}
.sw-node{text-align:center;min-width:0}.sw-role{font:500 12px/1.4 'Sarabun',sans-serif;letter-spacing:.5px;color:var(--muted);margin-bottom:12px}
.sw-icon{display:grid;place-items:center;width:72px;height:72px;border:1px solid var(--navy-100);border-radius:20px;background:var(--stone-100);color:var(--navy-700);margin:0 auto 14px;position:relative}
.sw-icon svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sw-node:nth-child(3) .sw-icon{background:var(--orange-soft);border-color:var(--orange-3);color:var(--orange-ink)}.sw-node:nth-child(5) .sw-icon{background:var(--gold-50);border-color:var(--gold-300);color:var(--navy-900)}
.sw-node strong{font-size:14px;line-height:1.5;display:block;color:var(--navy-700)}.sw-node small{display:block;margin-top:5px;font-size:12px;line-height:1.5;color:var(--muted)}
.sw-link{height:2px;background:var(--line);margin-top:62px;position:relative}
.sw-link:after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-right:2px solid var(--navy-300);border-top:2px solid var(--navy-300);transform:rotate(45deg)}
.sw-link i{display:block;position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--orange);opacity:0}
.sw-note{margin:0 20px 22px;padding:12px 14px;border-radius:10px;background:var(--stone-100);display:flex;align-items:start;gap:9px;font-size:12px;line-height:1.6;color:var(--muted)}.sw-note svg{flex:0 0 18px;width:18px;height:18px;stroke:var(--orange-ink);fill:none;stroke-width:1.8}
.sw-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:14px;border-top:1px solid var(--line);background:var(--stone-50)}.sw-select{position:relative;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;padding:10px 4px 13px;font:500 13px 'Sarabun',sans-serif;overflow:hidden}.sw-select[aria-pressed=true]{background:var(--white);border-color:var(--line);color:var(--navy-700);box-shadow:0 2px 6px color-mix(in srgb,var(--navy-900) 4%,transparent)}.sw-select[aria-pressed=true]:after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--orange);transform-origin:left;animation:sw-time 8s linear both}
.sw-running .sw-node .sw-icon{animation:sw-node 1.2s ease both}.sw-running .sw-node:nth-child(3) .sw-icon{animation-delay:1.3s}.sw-running .sw-node:nth-child(5) .sw-icon{animation-delay:2.6s}.sw-running .sw-link i{animation:sw-packet 1s .65s ease-in-out 2}.sw-running .sw-link:nth-child(4) i{animation-delay:1.95s}.sw-paused .sw-select:after{animation-play-state:paused!important}
@keyframes sw-node{0%{transform:scale(.92);box-shadow:0 0 0 0 transparent}45%{transform:scale(1.06);box-shadow:0 0 0 7px color-mix(in srgb,var(--orange) 18%,transparent)}100%{transform:scale(1);box-shadow:0 0 0 0 transparent}}
@keyframes sw-packet{0%{left:0;opacity:0}20%,80%{opacity:1}100%{left:calc(100% - 5px);opacity:0}}
@keyframes sw-time{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:450px){.sw-head{padding:20px}.sw-head h3{font-size:20px}.sw-flow{padding:28px 12px 22px;grid-template-columns:1fr 18px 1fr 18px 1fr}.sw-icon{width:60px;height:60px;border-radius:17px}.sw-icon svg{width:32px;height:32px}.sw-node strong{font-size:13px}.sw-node small{font-size:12px}.sw-link{margin-top:56px}.sw-select{font-size:12px}.sw-controls{padding:10px;gap:3px}}
@media(prefers-reduced-motion:reduce){.skill-workflow *,.skill-workflow *:after{animation:none!important;transition:none!important}.sw-link i{display:none}.sw-select[aria-pressed=true]:after{transform:scaleX(1)}}
.sw-badge svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}

.sw-role{height:20px;display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.sw-skill-label{display:inline-block;padding:2px 6px;border-radius:999px;background:var(--grad-orange-deep);color:var(--white);font-size:12px;font-weight:700;letter-spacing:0}
@media(max-width:450px){.sw-role{font-size:12px;gap:3px}.sw-skill-label{padding:2px 4px;font-size:12px}}

/* Illustrative Claude Desktop walkthrough; no upload or external processing. */
#proof-figure.claude-demo{align-self:center;min-width:0;border:1px solid var(--navy-300);border-radius:20px;background:var(--stone-50);box-shadow:var(--shadow);overflow:hidden;color:var(--text)}
.cd-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--white);font-size:13px}.cd-brand{display:flex;align-items:center;gap:9px;font-weight:600}.cd-brand b{font-size:25px;color:var(--orange-ink);line-height:1}.cd-caption{font-size:12px;color:var(--muted)}
.cd-body{padding:22px}.cd-intro{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}.cd-intro strong{font-size:17px;color:var(--navy-900)}.cd-demo-tag{border-radius:20px;background:var(--gold-50);border:1px solid var(--gold-300);color:var(--navy-900);font-size:12px;padding:3px 8px;white-space:nowrap}
.cd-composer{border:1px solid var(--line);border-radius:14px;background:var(--white);padding:16px}.cd-files{display:flex;gap:7px;flex-wrap:wrap}.cd-file{font-size:12px;display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--stone-50)}.cd-file svg,.cd-result svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;flex-shrink:0}.cd-prompt{font-size:13px;line-height:1.8;color:var(--text)}.cd-skill{display:inline-flex;align-items:center;gap:5px;border-radius:6px;padding:2px 7px;background:var(--orange-soft);color:var(--orange-ink);font-weight:600;margin-bottom:5px}.cd-toolbar{display:flex;align-items:center;justify-content:space-between;color:var(--muted);margin-top:12px;font-size:12px}.cd-send{background:var(--grad-orange-deep);color:var(--white);width:28px;height:28px;display:grid;place-items:center;border-radius:8px;font-size:18px}
.cd-status{display:flex;align-items:center;gap:9px;min-height:46px;font-size:12px;color:var(--muted);margin:12px 0 0}.cd-status i{width:8px;height:8px;border-radius:50%;background:var(--orange);flex-shrink:0}.cd-result{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px;min-height:164px}.cd-result-title{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--navy-900);font-weight:600;margin-bottom:10px}.cd-result-title svg{color:var(--ok-700)}.cd-table{width:100%;border-collapse:collapse;font-size:12px;color:var(--text);line-height:1.5}.cd-table th{text-align:left;font-weight:500;color:var(--muted);padding:5px 3px;border-bottom:1px solid var(--line)}.cd-table td{padding:7px 3px;border-bottom:1px solid var(--line)}.cd-table th:first-child,.cd-table td:first-child{padding-left:0}.cd-output{font-size:12px;color:var(--orange-ink);margin-top:9px}.cd-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 16px 14px;background:var(--white);font-size:12px;color:var(--muted)}.cd-actions{display:flex;gap:10px;white-space:nowrap}.cd-actions button{font:inherit;font-size:12px;color:var(--orange-ink);border:0;padding:5px 0;background:none;cursor:pointer}.claude-demo button:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px}
.claude-demo[data-type="attach"] .cd-prompt,.claude-demo[data-type="folder"] .cd-prompt{opacity:.28}.claude-demo[data-type="attach"] .cd-files,.claude-demo[data-type="prompt"] .cd-skill{animation:cd-emphasis .7s ease both}.claude-demo[data-type="working"] .cd-status i{animation:cd-pulse .8s ease-in-out infinite alternate}.cd-result:not([hidden]){animation:cd-result .55s ease both}.claude-demo.cd-halted .cd-status i{animation-play-state:paused!important}
@keyframes cd-emphasis{from{transform:translateY(5px);opacity:.3}to{transform:translateY(0);opacity:1}}@keyframes cd-result{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes cd-pulse{to{opacity:.25;transform:scale(.8)}}
@media(max-width:450px){.cd-body{padding:16px}.cd-bar{padding:12px}.cd-intro strong{font-size:15px}.cd-file{font-size:12px;padding:6px}.cd-caption{font-size:12px}.cd-foot{padding:0 10px 12px}.cd-table{font-size:12px}}
@media(prefers-reduced-motion:reduce){.claude-demo *{animation:none!important;transition:none!important}}

/* One screen per step, with a stable stage height. */
.cd-screen{min-height:290px;display:flex;flex-direction:column;justify-content:center;gap:16px;animation:cd-result .4s ease both}
.cd-screen .cd-result{margin:0}.cd-screen .cd-files{justify-content:center}
.cd-screen .cd-prompt{opacity:1!important}
.cd-screen svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;flex-shrink:0}
.cd-dropzone{display:flex;flex-direction:column;align-items:center;gap:12px;border:1px dashed var(--orange-3);background:var(--white);padding:28px 12px;border-radius:14px;text-align:center}
.cd-dropzone>svg{width:38px;height:38px;color:var(--orange-ink)}.cd-dropzone strong,.cd-working strong{font-size:16px;color:var(--navy-900)}.cd-dropzone>span,.cd-working>span:not(.cd-orbit){font-size:12px;color:var(--muted)}
.cd-hint{font-size:12px!important;color:var(--muted)!important;text-align:center;line-height:1.7}
.cd-folder-picker{padding:16px;background:var(--white);border:1px solid var(--line);border-radius:12px;font-size:13px}.cd-picker-title{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:12px}.cd-folder-row{padding:9px 12px;color:var(--muted)}.cd-folder-row:nth-child(3){padding-left:24px}.cd-folder-selected{display:flex;align-items:center;gap:8px;margin-left:24px;background:var(--orange-soft);border:1px solid var(--orange-3);border-radius:8px;color:var(--orange-ink)}.cd-folder-selected span{margin-left:auto}.cd-picker-path{font-size:12px;color:var(--muted);margin:14px 0}.cd-confirm{display:block;text-align:center;background:var(--grad-orange-deep);color:var(--white);border-radius:7px;padding:8px}
.cd-working{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:24px 0}.cd-orbit{font-size:48px;color:var(--orange-ink);animation:cd-spin 7s linear infinite}.cd-working small{font-size:12px;color:var(--muted)}.cd-progress{width:75%;height:5px;background:var(--line);border-radius:10px;overflow:hidden}.cd-progress i{display:block;width:45%;height:100%;background:var(--orange);animation:cd-loading 1.5s ease-in-out infinite alternate}.cd-halted .cd-orbit,.cd-halted .cd-progress i{animation-play-state:paused!important}
@keyframes cd-spin{to{transform:rotate(360deg)}}@keyframes cd-loading{to{transform:translateX(125%)}}
@media(max-width:450px){.cd-screen{min-height:320px}.cd-screen-title{font-size:15px}}

/* Compact looping walkthrough: spotlight only the current action. */
.claude-demo .cd-body{padding:18px 22px 12px}.claude-demo .cd-intro{margin-bottom:12px}
.claude-demo .cd-screen{min-height:250px;gap:12px}.claude-demo .cd-hint{display:none}
.claude-demo .cd-dropzone{padding:18px 10px;gap:8px}.claude-demo .cd-dropzone>svg{width:30px;height:30px}
.claude-demo .cd-status{min-height:30px;margin-top:12px;font-size:12px}.claude-demo .cd-foot{padding:10px 16px;border-top:1px solid var(--line)}
.claude-demo .cd-folder-picker{padding:12px}.claude-demo .cd-folder-row{padding-top:6px;padding-bottom:6px}.claude-demo .cd-picker-path{margin:10px 0}
.claude-demo[data-type="attach"] .cd-file,.claude-demo[data-type="folder"] .cd-folder-selected,.claude-demo[data-type="prompt"] .cd-skill,.claude-demo[data-type="result"] .cd-output{border:1px solid var(--orange);background:var(--orange-soft);color:var(--orange-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 13%,transparent);animation:cd-focus .8s ease-out both}
.claude-demo[data-type="prompt"] .cd-skill{font-size:16px;padding:7px 10px;margin-bottom:12px}
.claude-demo[data-type="result"] .cd-output{padding:9px;border-radius:8px;display:flex;align-items:center;gap:6px;overflow-wrap:anywhere}
.claude-demo[data-type="result"] .cd-table tr:last-child td{background:var(--gold-50);color:var(--orange-ink);font-weight:600}
.claude-demo[data-type="working"] .cd-orbit{border-radius:50%;background:var(--orange-soft);width:70px;height:70px;display:grid;place-items:center;box-shadow:0 0 0 7px color-mix(in srgb,var(--orange) 10%,transparent)}
@keyframes cd-focus{from{box-shadow:0 0 0 8px color-mix(in srgb,var(--orange) 3%,transparent)}to{box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 13%,transparent)}}
@media(max-width:450px){.claude-demo .cd-body{padding:16px}.claude-demo .cd-screen{min-height:265px}.claude-demo .cd-file{font-size:12px}.claude-demo .cd-screen-title{font-size:14px}}

/* Warm glossy spotlight, matching the orange call-to-action. */
.claude-demo[data-type="attach"] .cd-file,
.claude-demo[data-type="folder"] .cd-folder-selected,
.claude-demo[data-type="prompt"] .cd-skill,
.claude-demo[data-type="result"] .cd-output,
.claude-demo[data-type="working"] .cd-orbit{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(115deg,var(--orange) 0%,var(--orange-2) 58%,var(--orange-3) 100%);
  color:var(--white);border-color:transparent;
  box-shadow:0 8px 24px var(--orange-shadow),inset 0 1px 0 rgba(255,255,255,.3);
  text-shadow:0 1px 1px var(--orange-shadow);
}
.claude-demo[data-type="attach"] .cd-file::after,
.claude-demo[data-type="folder"] .cd-folder-selected::after,
.claude-demo[data-type="prompt"] .cd-skill::after,
.claude-demo[data-type="result"] .cd-output::after,
.claude-demo[data-type="working"] .cd-orbit::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.48) 50%,rgba(255,255,255,.08) 60%,transparent 75%);
  transform:translateX(-120%);animation:cd-gloss 2.6s .25s ease-in-out infinite;
}
.claude-demo[data-type="attach"] .cd-file,.claude-demo[data-type="folder"] .cd-folder-selected,.claude-demo[data-type="prompt"] .cd-skill,.claude-demo[data-type="result"] .cd-output{animation:none}
.claude-demo[data-type="working"] .cd-orbit{animation:cd-glow 1.4s ease-in-out infinite alternate}
.claude-demo.cd-halted *::after{animation-play-state:paused!important}
@keyframes cd-gloss{0%{transform:translateX(-120%)}65%,100%{transform:translateX(120%)}}
@media(prefers-reduced-motion:reduce){.claude-demo *::after{animation:none!important}.claude-demo .cd-orbit{animation:none!important}}

@keyframes cd-glow{to{box-shadow:0 10px 30px var(--orange-shadow-hover),inset 0 1px 0 rgba(255,255,255,.3)}}


/* Focus enters with a small bounce, then recedes before the next step. */
.claude-demo[data-type="attach"] .cd-file,
.claude-demo[data-type="folder"] .cd-folder-selected,
.claude-demo[data-type="prompt"] .cd-skill,
.claude-demo[data-type="working"] .cd-orbit,
.claude-demo[data-type="result"] .cd-output{
  transform-origin:center;animation:cd-pop-in .65s cubic-bezier(.22,.8,.25,1) both;
}
.claude-demo.cd-exiting[data-type="attach"] .cd-file,
.claude-demo.cd-exiting[data-type="folder"] .cd-folder-selected,
.claude-demo.cd-exiting[data-type="prompt"] .cd-skill,
.claude-demo.cd-exiting[data-type="working"] .cd-orbit,
.claude-demo.cd-exiting[data-type="result"] .cd-output{
  animation:cd-pop-out .35s ease-in both;
}
@keyframes cd-pop-in{0%{opacity:0;transform:translateY(8px) scale(.84)}65%{opacity:1;transform:translateY(-2px) scale(1.045)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cd-pop-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:translateY(5px) scale(.9)}}
@media(prefers-reduced-motion:reduce){.claude-demo .cd-screen *{animation:none!important;transform:none!important}}

/* File-type colors retain the glossy focus and pop transitions. */
.claude-demo[data-type="attach"] .cd-file-pdf{
  background:linear-gradient(115deg,var(--file-pdf),var(--file-pdf-2) 60%,var(--file-pdf-3));
  box-shadow:0 8px 24px var(--file-pdf-shadow),inset 0 1px 0 rgba(255,255,255,.3);
}
.claude-demo[data-type="attach"] .cd-file-xlsx,
.claude-demo[data-type="result"] .cd-output.cd-file-xlsx{
  background:linear-gradient(115deg,var(--file-xlsx),var(--file-xlsx-2) 60%,var(--file-xlsx-3));
  box-shadow:0 8px 24px var(--file-xlsx-shadow),inset 0 1px 0 rgba(255,255,255,.3);
}
.claude-demo[data-type="folder"] .cd-folder-selected{
  background:linear-gradient(115deg,var(--file-folder),var(--file-folder-2) 60%,var(--file-folder-3));
  color:var(--file-folder-ink);text-shadow:none;
  box-shadow:0 8px 24px var(--file-folder-shadow),inset 0 1px 0 rgba(255,255,255,.5);
}
.claude-demo .cd-confirm{background:linear-gradient(115deg,var(--file-folder),var(--file-folder-3));color:var(--file-folder-ink)}
.claude-demo .cd-picker-title svg{color:var(--file-folder-icon)}

/* Recognizable PDF label and Excel X/table silhouette at chip size. */
.claude-demo .cd-file svg{width:26px;height:28px}
.claude-demo .cd-output svg{width:26px;height:28px}

/* Match the walkthrough: sequential glossy pop focus, then rotate Skills. */
.skill-workflow .sw-head{padding:20px}.skill-workflow .sw-head h3{min-height:0;font-size:21px}.skill-workflow .sw-head p{margin-top:8px}.skill-workflow .sw-controls[hidden]{display:none}
.skill-workflow .sw-flow{padding-top:24px}.skill-workflow .sw-icon{overflow:hidden;isolation:isolate;color:white;border-color:transparent;background:linear-gradient(115deg,var(--file-pdf),var(--file-pdf-3));box-shadow:0 8px 22px var(--file-pdf-shadow)}
.skill-workflow .sw-node:nth-child(3) .sw-icon{color:white;background:linear-gradient(115deg,var(--orange),var(--orange-3));box-shadow:0 8px 22px var(--orange-shadow);border-color:transparent}
.skill-workflow .sw-node:nth-child(5) .sw-icon{color:white;background:linear-gradient(115deg,var(--file-xlsx),var(--file-xlsx-3));box-shadow:0 8px 22px var(--file-xlsx-shadow);border-color:transparent}
.skill-workflow .sw-node .sw-kind-folder{color:var(--file-folder-ink);background:linear-gradient(115deg,var(--file-folder),var(--file-folder-3));box-shadow:0 8px 22px var(--file-folder-shadow)}
.skill-workflow .sw-kind-bank{background:linear-gradient(115deg,var(--file-bank),var(--file-bank-2))}
.skill-workflow .sw-icon::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.44) 50%,transparent 75%);transform:translateX(-120%)}
.skill-workflow.sw-running .sw-node .sw-icon{animation:sw-focus-pop 8s both;animation-delay:0s}
.skill-workflow.sw-running .sw-node:nth-child(3) .sw-icon{animation-name:sw-process-pop;animation-delay:0s}
.skill-workflow.sw-running .sw-node:nth-child(5) .sw-icon{animation-name:sw-output-pop;animation-delay:0s}
.skill-workflow.sw-running .sw-icon::after{animation:cd-gloss 1.8s .4s both}
.skill-workflow.sw-running .sw-node:nth-child(3) .sw-icon::after{animation-delay:2s}
.skill-workflow.sw-running .sw-node:nth-child(5) .sw-icon::after{animation-delay:3.6s}
.skill-workflow.sw-paused *,.skill-workflow.sw-paused *::after{animation-play-state:paused!important}
@keyframes sw-focus-pop{0%{opacity:0;transform:scale(.84)}7%{opacity:1;transform:scale(1.08)}12%,90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
@keyframes sw-process-pop{0%,18%{opacity:.45;transform:scale(.9)}26%{opacity:1;transform:scale(1.08)}31%,90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
@keyframes sw-output-pop{0%,38%{opacity:.45;transform:scale(.9)}46%{opacity:1;transform:scale(1.08)}51%,90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
@media(prefers-reduced-motion:reduce){.skill-workflow .sw-icon,.skill-workflow .sw-icon::after{animation:none!important;opacity:1;transform:none}.skill-workflow .sw-icon::after{display:none}}

/* Shared PDF / Excel / folder visual language across both demos. */
.skill-workflow .sw-node .sw-kind-pdf{background:linear-gradient(115deg,var(--file-pdf),var(--file-pdf-2) 60%,var(--file-pdf-3));color:white;box-shadow:0 8px 22px var(--file-pdf-shadow)}
.skill-workflow .sw-node .sw-kind-excel{background:linear-gradient(115deg,var(--file-xlsx),var(--file-xlsx-2) 60%,var(--file-xlsx-3));color:white;box-shadow:0 8px 22px var(--file-xlsx-shadow)}
.skill-workflow .sw-node .sw-kind-folder{background:linear-gradient(115deg,var(--file-folder),var(--file-folder-2) 60%,var(--file-folder-3));color:var(--file-folder-ink);box-shadow:0 8px 22px var(--file-folder-shadow)}


/* ===== Hero (รอบ 5 · 14 ต.ค. 2569): ฝั่งข้อความ — คงแบบที่ Codex จัด (เดิมผูกกับ .hero-j) ย้ายมาผูกกับ .hero-app ===== */
.hero:has(.hero-app){position:relative;overflow:hidden;padding:52px 0 40px;background:var(--grad-navy)}
.hero:has(.hero-app)::before{content:'';position:absolute;left:0;top:0;width:100%;height:5px;background:linear-gradient(90deg,var(--gold-500) 0 25%,var(--orange) 25% 55%,transparent 55%)}
.hero:has(.hero-app) .hero-grid{grid-template-columns:1.05fr 1fr;gap:44px;position:relative;align-items:center}
.hero:has(.hero-app) .tagline{font-size:17px;max-width:460px;margin-bottom:18px;color:var(--gold-500)}
.hero:has(.hero-app) h1.h1-long{font-size:clamp(36px,4.6vw,61px);line-height:1.15;letter-spacing:-.025em;margin-bottom:20px;max-width:650px}
.hero:has(.hero-app) .hero-lead{font-size:17px;line-height:1.8;max-width:500px}.hero:has(.hero-app) .hero-intro{font-size:14px;line-height:1.7;margin-top:12px}.hero:has(.hero-app) .organizer{font-size:12px;margin-top:12px}
.hero:has(.hero-app) .facts{grid-template-columns:1.3fr 1fr;gap:12px 20px;padding:18px 0;margin:22px 0 18px;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.hero:has(.hero-app) .fact{background:none;padding:0;border-radius:0}.hero:has(.hero-app) .fact:last-child{grid-column:1/-1;display:flex;gap:12px;align-items:center}.hero:has(.hero-app) .fact .k{font-size:11px}.hero:has(.hero-app) .fact .v{font-size:15px}.hero:has(.hero-app) .fact:last-child .v{font-size:13px}
.hero:has(.hero-app) .hp-now{font-size:44px}.hero:has(.hero-app) .hp-note{font-size:12px;line-height:1.7}.hero:has(.hero-app) .hero-actions{margin-top:18px;gap:10px}.hero:has(.hero-app) .hero-actions .btn{padding:12px 20px;min-height:48px} /* ตัว 19px จาก .btn (ส้มไล่เฉด ต้องเป็นข้อความใหญ่) ห้ามย่อ */
@media(max-width:900px){.hero:has(.hero-app) .hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}.hero .poster-wrap:has(.hero-app){max-width:560px;width:100%;margin-inline:0}}
@media(max-width:760px){.hero:has(.hero-app){padding:34px 0}.hero:has(.hero-app) h1.h1-long{font-size:44px}}
@media(max-width:450px){.hero:has(.hero-app) h1.h1-long{font-size:38px}.hero:has(.hero-app) .tagline{font-size:15px}.hero:has(.hero-app) .hero-lead{font-size:16px}.hero:has(.hero-app) .fact .v{font-size:13px}}

/* ===== Hero (รอบ 5): หน้าต่างแอป + ตัวอย่างงาน 3 ฉาก (ใบเสร็จ → ตาราง · กระทบยอด · สูตร #REF!) =====
   สีจาก token ของ site.css · ภาพเคลื่อนไหวใช้ transform/opacity เท่านั้น
   สถานะพื้นฐาน (ไม่มี animation) = ฉากเสร็จแล้ว → .ha-static (โหมดลดการเคลื่อนไหว / ไม่มี requestAnimationFrame) เห็นผลครบ
   จังหวะต่อชิ้น: style="--d:…ms" ตามนาฬิกาฉาก (landing.js HERO_SCENES) · หยุด = .ha-paused (animation-play-state) */
.hero-app{width:100%;max-width:560px;margin-left:auto}
@media(max-width:900px){.hero-app{max-width:none;margin-left:0}}
.ha-window{background:var(--white);color:var(--navy-900);border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 30px 70px rgba(13,23,44,.4),0 8px 20px rgba(13,23,44,.18)}
.ha-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--stone-100);border-bottom:1px solid var(--line)}
.ha-dots{display:flex;gap:6px;flex:none}.ha-dots i{width:10px;height:10px;border-radius:50%;background:var(--navy-200)}.ha-dots i:nth-child(1){background:var(--orange-2)}.ha-dots i:nth-child(2){background:var(--gold-500)}
.ha-title{flex:1;min-width:0;display:flex;align-items:center;gap:6px;font:600 14px/1.3 'Prompt',sans-serif;white-space:nowrap}
.ha-title b{color:var(--orange);font-size:15px}
.ha-skill{overflow:hidden;text-overflow:ellipsis}
.ha-tag{flex:none;font-size:12.5px;font-weight:600;line-height:1.6;padding:1px 10px;border-radius:999px;background:var(--gold-50);color:var(--warn-700);border:1px solid var(--gold-300)}
.ha-stage{display:grid;padding:16px 18px 12px}
/* เปลี่ยนฉาก: ฉากเดิมจางออกเร็ว (0.3 วิ) · ฉากใหม่เลื่อนขึ้นและชัดขึ้นหลังจากนั้นเล็กน้อย (หน่วง 0.2 วิ) ไม่ซ้อนกันจนรก */
.ha-scene{grid-area:1/1;min-width:0;display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(10px);visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
.ha-scene.is-active{opacity:1;transform:none;visibility:visible;transition:opacity .45s ease .2s,transform .45s cubic-bezier(.2,.7,.2,1) .2s,visibility 0s}
.ha-cap{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.ha-file{color:var(--ok-700)}
/* ฉาก 1: ใบเสร็จ → ตารางภาษีซื้อ */
.ha-split{display:grid;grid-template-columns:132px 18px minmax(0,1fr);gap:8px;align-items:start}
.ha-receipts{display:grid;gap:6px}
.ha-receipt{position:relative;display:grid;gap:1px;padding:7px 9px 8px;background:var(--stone-50);border:1px solid var(--line);border-radius:6px;font-size:13px;line-height:1.35}
.ha-receipt b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ha-receipt small{font-size:12.5px;color:var(--muted)}
.ha-receipt i{display:block;height:3px;border-radius:2px;background:var(--navy-100);margin:3px 0 0}.ha-receipt i+i{width:60%}
.ha-receipt span{margin-top:3px;color:var(--muted)}.ha-receipt strong{color:var(--navy-900)}
.ha-arrow{align-self:center;color:var(--orange-ink);font:700 18px/1 'Prompt',sans-serif;text-align:center}
.ha-sheet{min-width:0}
.ha-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;line-height:1.4;font-variant-numeric:tabular-nums}
.ha-table th{background:var(--navy-900);color:var(--white);font-weight:600;text-align:left;padding:7px 9px;white-space:nowrap}
.ha-table td{padding:8px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.ha-table td:not(:first-child),.ha-table th:not(:first-child){text-align:right}
.ha-total td{font-weight:700;background:var(--orange-soft);border-bottom:0}
.ha-count{display:inline-block;min-width:4ch}
.ha-result{display:flex;align-items:center;gap:8px;margin:2px 0 0;font-size:14px;font-weight:600;color:var(--ok-800)}
.ha-ok{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ok-700);color:var(--white);font-size:12px;font-weight:700;line-height:1}
.ha-principle{margin:auto 0 0;align-self:flex-start;font:600 13px/1.6 'Prompt',sans-serif;padding:2px 10px;border-radius:999px;background:var(--navy-100);color:var(--navy-700)}
/* ฉาก 2: กระทบยอด */
.ha-recon td:last-child,.ha-recon th:last-child{text-align:left}
.ha-recon .ha-mark{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ok-700);color:var(--white);font-size:12px;font-weight:700;line-height:1;vertical-align:-3px}
.ha-recon .ha-note{color:var(--ok-800);font-weight:600}
.ha-recon .ha-bad td{background:var(--bad-100)}
.ha-recon .ha-bad .ha-mark{background:var(--bad-700)}
.ha-recon .ha-bad .ha-note{color:var(--bad-800);white-space:normal}
.ha-reason{margin:0;padding:8px 10px;border-left:3px solid var(--bad-700);background:var(--stone-50);border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.55}
.ha-reason b{color:var(--bad-800)}
/* ฉาก 3: สูตร #REF! */
.ha-formula{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--stone-50);font-size:13.5px}
.ha-fx{font:700 12px/1 'Prompt',sans-serif;color:var(--muted);padding-right:8px;border-right:1px solid var(--line)}
.ha-formula code{font:600 14px/1.4 ui-monospace,Menlo,Consolas,monospace}
.ha-swap{display:inline-grid;justify-items:end}.ha-formula .ha-swap{justify-items:start}
.ha-swap>*{grid-area:1/1}
.ha-before{opacity:0}
.ha-formula .ha-before{color:var(--bad-700)}.ha-formula .ha-after{color:var(--ok-800)}
.ha-err{font-weight:700;color:var(--bad-700);background:var(--bad-100);padding:0 6px;border-radius:4px}
.ha-cell .ha-after{display:inline-flex;align-items:center;gap:5px}
.ha-cause{margin:0;font-size:13.5px;font-weight:600;color:var(--bad-800);padding:6px 10px;border-radius:8px;background:var(--bad-100)}
.ha-fix{margin:0;font-size:13.5px;font-weight:600;color:var(--ok-800)}
/* ส่วนล่างหน้าต่าง: แถบความคืบหน้า + จุดเลือกฉาก + หยุด/เล่น */
.ha-foot{border-top:1px solid var(--line);background:var(--stone-50)}
.ha-progress{height:3px;background:var(--navy-100);overflow:hidden}
.ha-progress i{display:block;height:100%;background:var(--grad-orange-deep);transform-origin:left;transform:scaleX(0)}
.ha-nav{display:flex;align-items:center;justify-content:flex-end;gap:2px;padding:4px 8px}
.ha-dot,.ha-play{display:grid;place-items:center;width:40px;height:40px;border:0;background:none;cursor:pointer;border-radius:50%;color:var(--navy-700)}
.ha-dot::before{content:'';width:9px;height:9px;border-radius:999px;background:var(--navy-200);transition:width .3s,background-color .3s}
.ha-dot[aria-pressed="true"]::before{width:22px;background:var(--orange)}
.ha-play{margin-left:4px}.ha-play svg{display:block}
.ha-dot:focus-visible,.ha-play:focus-visible{outline:3px solid var(--navy-900);outline-offset:-3px}
.ha-play[hidden]{display:none}
/* แถบผู้สอน */
.ha-team{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:14px;color:var(--navy-200)}
.ha-avatars{display:flex}.ha-avatars img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:center top;background:var(--orange-soft);border:2px solid var(--navy-700)}
.ha-avatars img+img{margin-left:-10px}
/* จังหวะในฉาก (เล่นเมื่อฉากเป็น is-active) */
.ha-live .ha-scene.is-active .ha-in{animation:ha-in .5s cubic-bezier(.2,.7,.2,1) var(--d,0ms) backwards}
.ha-live .ha-scene.is-active .ha-row{animation:ha-row .45s cubic-bezier(.2,.7,.2,1) var(--d,0ms) backwards}
.ha-live .ha-scene.is-active .ha-pop{animation:ha-pop .5s cubic-bezier(.3,1.6,.5,1) var(--d,0ms) backwards}
.ha-live .ha-scene.is-active .ha-before{animation:ha-out .35s ease-in var(--d,0ms) backwards}
.ha-live .ha-scene.is-active .ha-flash{animation:ha-in .5s cubic-bezier(.2,.7,.2,1) var(--d,0ms) backwards,ha-flash 1s ease-in-out calc(var(--d,0ms) + .5s) 1}
@keyframes ha-in{from{opacity:0;transform:translateY(8px)}}
@keyframes ha-row{from{opacity:0;transform:translateX(-10px)}}
@keyframes ha-pop{from{opacity:0;transform:scale(.3)}}
@keyframes ha-out{from{opacity:1}to{opacity:0}}
@keyframes ha-flash{50%{transform:scale(1.03)}}
.hero-app.ha-paused .ha-scene *{animation-play-state:paused!important}
.hero-app.ha-static *,.hero-app.ha-static .ha-scene{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.hero-app *{animation:none!important;transition:none!important}}
@media(max-width:600px){
  .ha-stage{padding:14px 12px 10px}
  .ha-split{grid-template-columns:minmax(0,1fr);gap:8px}
  .ha-receipts{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ha-receipts .ha-cap{grid-column:1/-1;margin-bottom:0}
  .ha-receipt{padding:6px 7px}.ha-receipt i{display:none}.ha-receipt b{white-space:normal}
  .ha-arrow{display:none}
  .ha-table{font-size:12.5px}.ha-table th,.ha-table td{padding:6px 6px}
  .ha-reason,.ha-cause,.ha-fix,.ha-formula{font-size:12.5px}.ha-result{font-size:13px}
  .ha-title{font-size:12px}
  .ha-team{font-size:13px}
}

/* พื้นที่แตะ ≥ 44px (auditor 14 ต.ค. 2569) — ตัวจุด/ไอคอนยังเล็กเท่าเดิม แต่ปุ่มกว้าง/สูงพอแตะบนมือถือ */
.cd-actions button,.sw-pause,.sw-select,.ha-dot,.ha-play{min-height:44px;min-width:44px}
.cd-actions button{display:inline-flex;align-items:center;justify-content:center;padding-inline:10px}
.sw-pause{display:inline-flex;align-items:center;justify-content:center}

/* ===== ไอคอน badge หน้าหัวข้อการ์ด (ส่วน "ในค่าลงทะเบียนครั้งเดียว คุณได้อะไรบ้าง" · 14 ต.ค. 2569) =====
   14 ต.ค. รอบ 7 เจ้าของขอเปลี่ยนเป็นเหลือง (ส้มเยอะแล้ว): พื้นทองไล่ --gold-300 → --gold-500 · ไอคอนกรมท่า --navy-900 (12.8:1 · 11.3:1 ≥ 3:1 ของกราฟิก)
   + ไฮไลต์ด้านบน + เงาเรืองทองนุ่ม (--gold-shadow) · แทนแถบเหลืองซ้ายหัวข้อ
   ประกายวิ่งครั้งเดียวตอนการ์ดชุดนี้เข้าจอ (landing.js shineWhenVisible ใส่ .ic-shine) หน่วงทีละใบด้วย --d · ใช้ transform/opacity */
.info-card .ic-head{display:flex;align-items:center;gap:12px;margin:2px 0 6px}
.info-card .ic-head h3{border-left:0;padding-left:0;margin:0}
.ic-badge{position:relative;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;overflow:hidden;color:var(--navy-900);background:linear-gradient(135deg,var(--gold-300) 0%,var(--gold-500) 100%);box-shadow:0 6px 16px var(--gold-shadow),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.ic-badge::before{content:'';position:absolute;inset:0 0 50% 0;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0));pointer-events:none}
.ic-badge svg{position:relative;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-badge::after{content:'';position:absolute;top:-30%;bottom:-30%;left:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-160%) skewX(-20deg);opacity:0;pointer-events:none}
.ic-shine .ic-badge::after{animation:ic-shine 1.1s cubic-bezier(.3,.6,.3,1) calc(var(--d,0ms) + .15s) 1 both}
@keyframes ic-shine{0%{opacity:1;transform:translateX(-160%) skewX(-20deg)}100%{opacity:1;transform:translateX(300%) skewX(-20deg)}}
@media(hover:hover){.info-card.has-icon:hover .ic-badge{transform:translateY(-2px) scale(1.06);box-shadow:0 10px 22px var(--gold-shadow-hover),inset 0 1px 0 rgba(255,255,255,.5)}}
@media(max-width:600px){.ic-badge{width:34px;height:34px;border-radius:10px}.ic-badge svg{width:19px;height:19px}.info-card .ic-head{gap:10px}}
@media(prefers-reduced-motion:reduce){.ic-badge{transition:none}.ic-badge::after{display:none!important}.info-card.has-icon:hover .ic-badge{transform:none}}


/* ===== การ์ด "เรียนจบแล้ว งานเอกสารของคุณจะเปลี่ยนไปแบบนี้" (รอบ 8 · 14 ต.ค. 2569) =====
   รอบ 12 (เจ้าของสั่ง): เอา badge ไอคอนส้มออก เหลือวงเลขส้ม + หัวข้อ · การ์ดค่าลงทะเบียน/ต่อยอดยังมี badge เหลือง (.ic-badge เดิม) */
/* ภาพ "ก่อน → หลัง": สถานะพื้นฐาน = หลัง · .ba-run (landing.js runOutcomeDemos) เล่นครั้งเดียว: ก่อน 2.5 วิ → เปลี่ยน 0.8 วิ → ค้างที่หลัง
   --bd = หน่วงทีละใบ 0.6 วิ (ไม่เปลี่ยนพร้อมกัน) · ชิ้นในภาพ "หลัง" ขึ้นทีละชิ้น (--i) · transform/opacity เท่านั้น */
.info-card.has-demo{--bdx:var(--bd,0ms);display:grid;grid-template-rows:auto auto 1fr auto}
/* การ์ด = เลข / หัวข้อ / ข้อความ (ยืดได้) / ภาพ → ภาพอยู่ล่างสุดเสมอ การ์ด 4 ใบที่ข้อความยาวไม่เท่ากันยังเรียงภาพแนวเดียวกัน
 */
.info-card.has-demo .info-num{justify-self:start}
.ba{position:relative;height:128px;align-self:end;border-radius:10px;background:var(--stone-50);border:1px solid var(--line);overflow:hidden;font-size:12px;line-height:1.35}
.ba-layer{position:absolute;inset:0;padding:25px 10px 6px}
.info-card.has-demo>p{margin-bottom:12px}
.ba-before{opacity:0}
.ba-tag{position:absolute;top:6px;left:8px;font:600 11px/1.6 'Prompt',sans-serif;padding:0 8px;border-radius:999px}
.ba-before .ba-tag{background:var(--navy-100);color:var(--navy-700)}
.ba-after .ba-tag{background:var(--ok-100);color:var(--ok-800)}
.ba-run .ba-before{animation:ba-before 3.3s ease var(--bdx) both}
.ba-run .ba-after{animation:ba-after 3.3s ease var(--bdx) both}
.ba-run .ba-after .ba-i{animation:ba-in .4s cubic-bezier(.2,.7,.2,1) calc(var(--bdx) + 2.6s + var(--i,0) * 130ms) backwards}
/* มือถือ: การ์ดเข้าจอทีละใบอยู่แล้ว ไม่ต้องเหลื่อมเวลา */
@media(max-width:600px){.info-card.has-demo{--bdx:0ms}}
.ba-paused .ba *{animation-play-state:paused!important}
@keyframes ba-before{0%,76%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes ba-after{0%,76%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes ba-in{from{opacity:0;transform:translateY(5px)}}
.ba-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:1px 0;line-height:1.3;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.ba-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 1 ใบเสร็จ: กองกระจัดกระจาย → ตารางเดียว */
.ba-pile{position:relative;height:100%}
.ba-slip{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r));font-size:11px;font-weight:600;padding:3px 7px;background:var(--white);border:1px solid var(--navy-200);border-radius:4px;box-shadow:0 3px 8px rgba(13,23,44,.12)}
.ba-table{display:grid;gap:1px}
.ba-table .ba-row b{font-weight:700}
.ba-more{border-bottom:0;color:var(--muted);font-size:11px}
/* 2 กระทบยอด: ? → ✓ + เหตุผล */
.ba-recon .ba-row{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);text-align:right}
.ba-recon .ba-row span:first-child{text-align:left}
.ba-q,.ba-ok{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;font:700 11px/1 'Prompt',sans-serif;font-style:normal}
.ba-q{background:var(--gold-500);color:var(--navy-900)}
.ba-ok{background:var(--ok-700);color:var(--white)}
.ba-ok.ba-ok--note{background:var(--gold-500);color:var(--navy-900)}
.ba-reason{display:flex;align-items:center;gap:5px;margin:4px 0 0;font-size:11px;font-weight:600;line-height:1.3;color:var(--warn-700)}
.ba-reason .ba-ok{flex:none;width:14px;height:14px;font-size:11px}
/* 3 สูตร: #REF! แดง → ตัวเลข ✓ เขียว */
.ba-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.ba-cell{display:flex;align-items:center;justify-content:center;gap:3px;height:30px;border-radius:5px;font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.ba-err{background:var(--bad-100);color:var(--bad-700)}
.ba-good{background:var(--ok-100);color:var(--ok-800)}
.ba-good i{font-style:normal;font-size:11px}
/* 4 Skill: โน้ตคำสั่งยาว → ปุ่มเดียว */
.ba-note{display:grid;gap:4px}
.ba-note span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 6px;background:var(--white);border:1px dashed var(--navy-200);border-radius:4px}
.ba-skill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:100%;padding-bottom:6px}
.ba-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--grad-orange-deep);color:var(--white);font:700 13px/1.3 'Prompt',sans-serif;box-shadow:0 6px 14px var(--orange-shadow)}
.ba-skill small{font-size:11px;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.ba *{animation:none!important}.ba-before{opacity:0!important}.ba-after{opacity:1!important}}

/* ===== qa รอบ 9 (14 ต.ค. 2569) ===== */
/* หัวข้อทั้งหน้า: ตัดบรรทัดให้สมดุล ไม่ตกคำเดียว */
#main h2,#main h3{text-wrap:balance}
/* ฉากใน hero: ทุกฉากสูงเท่าฉากที่สูงสุด (grid ซ้อนกัน) → ป้าย "AI ทำร่าง · คุณตรวจ" ชิดล่าง (margin-top:auto) ไม่เหลือที่ว่างกลางหน้าต่าง */
.ha-scene{min-height:100%}
/* มือถือ: hero กระชับ — วัน/เวลา/รูปแบบ เป็นแถวสั้น ป้ายกับค่าอยู่บรรทัดเดียว · ลดช่องไฟ → ปุ่ม CTA อยู่ในจอแรกที่ 375×667 */
@media(max-width:600px){
  .hero:has(.hero-app){padding:24px 0 32px}
  .hero:has(.hero-app) .tagline{margin-bottom:10px}
  .hero:has(.hero-app) h1.h1-long{margin-bottom:12px}
  .hero:has(.hero-app) .hero-lead{line-height:1.6}
  .hero:has(.hero-app) .hero-intro{margin-top:6px;line-height:1.55}
  .hero:has(.hero-app) .organizer{margin-top:6px}
  .hero:has(.hero-app) .facts{display:flex;flex-wrap:wrap;gap:2px 14px;padding:10px 0;margin:12px 0 12px}
  .hero:has(.hero-app) .fact,.hero:has(.hero-app) .fact:last-child{display:flex;align-items:baseline;gap:6px;grid-column:auto}
  .hero:has(.hero-app) .fact .k{font-size:12px}
  .hero:has(.hero-app) .fact .v,.hero:has(.hero-app) .fact:last-child .v{font-size:14px}
  .hero:has(.hero-app) .hero-price{margin-bottom:10px}
  .hero:has(.hero-app) .hp-now{font-size:36px}
  .hero:has(.hero-app) .hero-actions{margin-top:10px}
  /* ปุ่ม 2 ปุ่มไม่พอแถวเดียว (ตัว 19px) → ขึ้นบรรทัดละปุ่ม เต็มความกว้าง เรียงกันเรียบร้อย · ปุ่มจองยังอยู่จอแรกที่ 375×667 */
  .hero:has(.hero-app) .hero-actions .btn{flex:1 1 auto}
}
@media(max-width:400px){
  .hero:has(.hero-app) h1.h1-long{font-size:34px}
  .hero:has(.hero-app) .hero-lead{font-size:15.5px}
}
/* hero บนจอกว้าง: ตัวอักษรในหน้าต่างอย่างน้อย 13px · ฉากกระทบยอด/สูตร แถวสูงขึ้นให้เต็มหน้าต่างพอดีกับฉากใบเสร็จ (สูงสุด) */
@media(min-width:601px){
  .ha-tag,.ha-receipt small,.ha-fx{font-size:13px}
  .ha-ok,.ha-recon .ha-mark{width:20px;height:20px;font-size:13px}
  .ha-scene-reconcile .ha-table td{padding:12px 9px}
  .ha-scene-reconcile .ha-reason{padding:10px 12px}
  .ha-scene-formula{gap:12px}
  .ha-scene-formula .ha-table td{padding:11px 9px}
}
@media(max-width:600px){
  .ha-scene-reconcile .ha-table td{padding:9px 6px}
  .ha-scene-formula .ha-table td{padding:9px 6px}
}
/* เลขลำดับการ์ด "เรียนจบแล้ว…" (รอบ 9 เจ้าของสั่ง): วงแหวนส้มสด ขอบ 2px พื้นส้มจาง 5% ตัวเลขส้มหนา · อยู่หน้าหัวข้อ (รอบ 12 ไม่มี badge แล้ว)
   --orange (ส้มหลักของเว็บ) เป็นส้มที่สดที่สุดที่ยังผ่าน 3:1 กับพื้น (3.24:1 บนขาว · ราว 3.07:1 บนพื้นจาง) */
.ic-num{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--orange);background:rgba(239,99,32,.05);color:var(--orange);font:800 15px/1 'Prompt',sans-serif}
.info-card .ic-head:has(.ic-num){gap:10px}
@media(max-width:600px){.ic-num{width:26px;height:26px;font-size:14px}.info-card .ic-head:has(.ic-num){gap:8px}}
/* หัวข้อ statement (รอบ 10): ข้อความล้วน 2 บรรทัด คนละสี · บรรทัดละ block ขึ้นบรรทัดใหม่เสมอ · วลี (.st-seg) ไม่ตัดกลาง
   ส้ม = --orange-ink (5.3:1 บนพื้นครีมของส่วนนี้ ผ่าน 4.5:1 ทุกขนาด) · กรมท่า = --navy-900 · จอแคบลดขนาดให้แต่ละวลีพอดีบรรทัด */
#statement h2.st-lines{display:flex;flex-direction:column;align-items:center;gap:2px}
.st-line{display:block}
.st-line--orange{color:var(--orange-ink)}
.st-line--navy{color:var(--navy-900)}
@media(max-width:600px){#statement h2.st-lines{font-size:clamp(22px,6.6vw,30px)}}
.st-seg{white-space:nowrap}
.cd-replay{gap:6px}.cd-replay svg{flex:none}
/* การ์ด "เรียนจบแล้ว…" 861–1180px: 4 คอลัมน์แคบเกินสำหรับวงเลข + หัวข้อ + ภาพก่อน→หลัง → 2×2 */
@media(min-width:861px) and (max-width:1180px){#outcomes-list.info-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* ส่วน "อะไรรวมในราคาแล้ว และอะไรที่ต้องเตรียมเอง" (รอบ 11): 2 กล่องเท่ากันซ้าย–ขวา · มือถือซ้อนบน–ล่าง · สไตล์การ์ดเดิม
   รวมในค่าลงทะเบียน = วงกลมเขียว ✓ (--ok-700) · ผู้เรียนเตรียมเอง = ช่องสี่เหลี่ยมว่าง (--navy-400) */
.incl-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:14px;align-items:start}
.incl-box{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:0 8px 24px rgba(13,23,44,.05)}
.incl-box h3{font-size:19px;margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid var(--line)}
.incl-box--done h3{border-bottom-color:var(--ok-100)}
.incl-box--todo h3{border-bottom-color:var(--navy-100)}
.incl-box ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.incl-box li{display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.incl-ic{flex:none;width:22px;height:22px;margin-top:1px}
.incl-box--done .incl-ic{color:var(--ok-700)}
.incl-box--todo .incl-ic{color:var(--navy-400)}
@media(max-width:600px){.incl-boxes{grid-template-columns:minmax(0,1fr);gap:12px}.incl-box{padding:16px}}