:root{
    --pink:#EA1953;
    --red:#F34B39;
    --orange:#F48B4F;
    --ink:#0B0807;
    --muted:#6f6870;
    --soft:#FFF6F8;
    --line:#F3E6EA;
    --white:#fff;
  }
  *{box-sizing:border-box}
  html,body,*{font-family:"Kanit",sans-serif}
  button,a,input,textarea,select{font-family:"Kanit",sans-serif}
  body{margin:0;font-family:"Kanit",sans-serif;color:var(--ink);background:#fff}
  .hero{
    min-height:760px;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 78% 24%, rgba(234,25,83,.10), transparent 28%),
      radial-gradient(circle at 86% 78%, rgba(244,139,79,.10), transparent 30%),
      linear-gradient(180deg,#fff 0%,#fff 72%,#fff8fa 100%);
  }
  .wrap{max-width:1240px;margin:auto;padding:88px 32px 72px;display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #f4ccd6;border-radius:999px;background:#fff;color:var(--pink);font-size:13px;font-weight:800;letter-spacing:.02em}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 5px rgba(234,25,83,.08)}
  h1{font-size:58px;line-height:1.08;letter-spacing:-1.8px;margin:22px 0 22px;max-width:670px}
  h1 .accent{color:var(--pink)}
  .lead{font-size:20px;line-height:1.75;color:#554e53;max-width:650px;margin:0 0 28px}
  .channels{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
  .channel{padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #eee7e9;font-size:13px;font-weight:700;box-shadow:0 4px 14px rgba(30,10,18,.04)}
  .actions{display:flex;gap:12px;flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 22px;border-radius:12px;text-decoration:none;font-weight:800;font-size:15px}
  .primary{background:var(--pink);color:#fff;box-shadow:0 12px 28px rgba(234,25,83,.22)}
  .secondary{background:#fff;color:var(--ink);border:1px solid #ded7da}
  .micro{font-size:12px;color:#8a8186;margin-top:15px}
  .visual{position:relative;min-height:575px}
  .orb{position:absolute;width:430px;height:430px;border-radius:50%;background:linear-gradient(145deg,#fff0f4,#fff8f2);right:-30px;top:52px;filter:blur(.2px)}
  .chat-card{position:absolute;left:20px;right:18px;top:18px;background:rgba(255,255,255,.94);border:1px solid #f0e6e9;border-radius:26px;box-shadow:0 30px 80px rgba(62,24,39,.13);overflow:hidden;backdrop-filter:blur(12px)}
  .chat-head{height:70px;padding:0 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #f3edef;background:#fff}
  .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;background:linear-gradient(135deg,var(--pink),var(--orange))}
  .head-name{font-weight:850;font-size:14px}
  .head-sub{font-size:11px;color:#8b8287;margin-top:2px}
  .status{margin-left:auto;font-size:11px;color:#26965d;background:#eefaf4;border:1px solid #d7f1e3;padding:6px 9px;border-radius:999px;font-weight:800}
  .chat{height:440px;padding:24px 22px 34px;background:linear-gradient(180deg,#fff 0%,#fffafb 100%);position:relative}
  .bubble{max-width:78%;padding:12px 14px;border-radius:16px;font-size:14px;line-height:1.5;margin-bottom:10px;opacity:0;transform:translateY(10px);animation:show .5s forwards}
  .customer{margin-right:auto;background:#f1f1f4;border-bottom-left-radius:5px;animation-delay:.35s}
  .bot{margin-left:auto;background:#fff;border:1px solid #eee5e8;border-bottom-right-radius:5px;box-shadow:0 5px 18px rgba(31,16,21,.04);animation-delay:1.05s}
  .silent{margin:22px auto 9px;width:max-content;max-width:90%;padding:7px 11px;border-radius:999px;background:#faf3f5;color:#9a707c;font-size:11px;font-weight:800;opacity:0;animation:show .45s 2s forwards}
  .delay{margin:8px auto 13px;width:max-content;color:#9a9296;font-size:11px;opacity:0;animation:show .45s 2.55s forwards}
  .follow{position:relative;margin-left:auto;background:#fff;border:1px solid #f2ccd6;border-bottom-right-radius:5px;box-shadow:0 8px 24px rgba(234,25,83,.08);animation-delay:3.05s}
  .tag{position:absolute;top:-12px;left:12px;background:#fff0f4;color:var(--pink);border:1px solid #f6cbd6;border-radius:999px;padding:3px 7px;font-size:9px;font-weight:900}
  .reply{margin-right:auto;background:#f1f1f4;border-bottom-left-radius:5px;animation-delay:4.35s}
  .stop{display:flex;align-items:center;gap:8px;width:max-content;max-width:92%;margin:18px auto 0;padding:9px 12px;border-radius:12px;background:#eefaf4;border:1px solid #d7f1e3;color:#237c4e;font-size:11px;font-weight:900;opacity:0;animation:show .45s 5.05s forwards}
  .check{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#2ca568;color:#fff;font-size:11px}
  .float-card{position:absolute;right:-8px;bottom:2px;background:#fff;border:1px solid #f0e5e8;border-radius:16px;padding:13px 15px;box-shadow:0 16px 38px rgba(62,24,39,.12);font-size:11px;animation:float 4s ease-in-out infinite}
  .float-card b{display:block;font-size:12px;margin-bottom:3px}
  @keyframes show{to{opacity:1;transform:translateY(0)}}
  @keyframes float{50%{transform:translateY(-8px)}}
  @media(max-width:900px){
    .wrap{grid-template-columns:1fr;padding-top:56px;gap:30px}
    h1{font-size:44px}
    .visual{min-height:560px}
  }
  @media(max-width:560px){
    .wrap{padding:42px 18px}
    h1{font-size:38px;letter-spacing:-1px}
    .lead{font-size:17px}
    .visual{min-height:520px}
    .chat-card{left:0;right:0}
    .float-card{right:2px}
  }
/* SECTION 2 — approved copy + interactive real-UI animation */
.s2{padding:104px 32px 112px;background:#fff}
.s2-wrap{max-width:1220px;margin:0 auto}
.s2-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:58px;align-items:center}
.s2-title{font-size:44px;line-height:1.18;margin:0 0 10px;font-weight:700;letter-spacing:-.5px}
.s2-sub{font-size:22px;line-height:1.45;font-weight:500;color:#292326;margin:0 0 14px}
.s2-desc{font-size:16px;line-height:1.7;color:#675e63;margin:0 0 22px}
.s2-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.s2-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:#41393d}
.s2-list li:before{content:"✓";position:absolute;left:0;color:#EA1953;font-weight:700}

/* demo shell */
.s2-demo{border:1px solid #eadfe3;border-radius:22px;background:#fff;box-shadow:0 26px 65px rgba(64,25,40,.11);overflow:hidden;min-height:548px}
.s2-tabs{height:64px;padding:0 20px;display:flex;gap:28px;align-items:flex-end;background:#fffafb;border-bottom:1px solid #eee6e9}
.s2-tab{border:0;background:transparent;height:46px;padding:0 2px;font-family:inherit;font-size:13px;color:#796f74;cursor:pointer;position:relative}
.s2-tab.active{color:#171315;font-weight:600}
.s2-tab.active:after{content:"";height:2px;background:#EA1953;position:absolute;left:0;right:0;bottom:0}
.s2-body{padding:22px;min-height:484px;position:relative}
.s2-panel{display:none}
.s2-panel.active{display:block}
.scene-label{font-size:11px;font-weight:600;color:#6d6368;margin:0 0 6px}
.scene-input{height:42px;border:1px solid #e6dde0;border-radius:10px;padding:0 12px;display:flex;align-items:center;background:#fff;font-size:12px;color:#4c4448}
.type-cursor{display:inline-block;width:1px;height:16px;background:#EA1953;margin-left:2px;vertical-align:-3px;animation:blink .8s infinite}
@keyframes blink{50%{opacity:0}}
.scene-divider{height:1px;background:#f0e9eb;margin:18px 0}
.radio-wrap{display:grid;gap:10px}
.radio-row{border:1px solid #e7dfe2;border-radius:12px;padding:12px 13px;display:flex;align-items:flex-start;gap:9px;background:#fff;transition:.25s}
.radio-dot{width:16px;height:16px;border-radius:50%;border:2px solid #b9b0b4;margin-top:1px;position:relative;flex:0 0 16px}
.radio-row.selected{border-color:#EA1953;background:#fffafd}
.radio-row.selected .radio-dot{border-color:#EA1953}
.radio-row.selected .radio-dot:after{content:"";position:absolute;inset:3px;border-radius:50%;background:#EA1953}
.radio-copy b{font-size:11px;display:block;font-weight:600}
.action-area{margin:12px 0 0 25px;display:none}
.action-area.show{display:block;animation:fadeUp .35s both}
.add-btn{height:36px;border:1px dashed #EA1953;border-radius:9px;background:#fff;color:#EA1953;font-size:10px;font-weight:600;padding:0 12px;font-family:inherit}
.intent-list{display:none;margin-top:8px;border:1px solid #eadfe3;border-radius:10px;background:#fff;overflow:hidden}
.intent-list.show{display:block;animation:fadeUp .35s both}
.intent-item{padding:9px 11px;border-bottom:1px solid #f2ecee;font-size:10px;color:#5a5156;display:flex;justify-content:space-between}
.intent-item:last-child{border-bottom:0}
.intent-item.chosen{background:#fff3f6;color:#EA1953;font-weight:600}
.flow-create{display:flex;justify-content:center;margin-top:22px;opacity:.38;transition:.25s}
.flow-create.ready{opacity:1}
.follow-create-btn{height:38px;padding:0 18px;border:1px dashed #EA1953;border-radius:10px;background:#fff;color:#EA1953;font-family:inherit;font-size:10px;font-weight:600}
.flow-done{display:none;margin:18px auto 0;width:max-content;padding:7px 10px;border-radius:999px;background:#eefaf4;color:#287f52;font-size:10px;font-weight:600}
.flow-done.show{display:block;animation:fadeUp .35s both}

/* shop panel */
.shop-subtabs{display:flex;gap:20px;border-bottom:1px solid #eee6e9;margin-bottom:20px}
.shop-subtab{border:0;background:transparent;padding:0 0 9px;font-family:inherit;font-size:11px;color:#7a7075;position:relative}
.shop-subtab.active{color:#EA1953;font-weight:600}
.shop-subtab.active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#EA1953}
.time-line{display:flex;align-items:center;gap:8px}
.time-chip{height:40px;border:1px solid #e6dde0;border-radius:10px;display:flex;align-items:center;padding:0 12px;font-size:12px;background:#fff;min-width:86px}
.time-chip.muted{color:#93898e;min-width:140px}
.shop-template{margin-top:22px;padding:14px;border:1px solid #efbdca;border-radius:13px;background:#fffafd}
.shop-template-head{display:flex;justify-content:space-between;font-size:10px;font-weight:600}
.shop-template .follow-create-btn{margin-top:11px;width:100%}
.scene-hint{position:absolute;right:18px;bottom:15px;font-size:9px;color:#9a9095}
.click-pulse{position:absolute;width:28px;height:28px;border:2px solid rgba(234,25,83,.35);border-radius:50%;opacity:0;pointer-events:none}
.click-pulse.show{animation:pulseClick .5s both}
@keyframes pulseClick{0%{opacity:0;transform:scale(.5)}35%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.s2-progress{display:flex;justify-content:center;gap:6px;padding:0 0 15px}
.s2-progress i{width:6px;height:6px;border-radius:99px;background:#e4dade;transition:.25s}
.s2-progress i.active{width:18px;background:#EA1953}

/* step emphasis */
.step-target{outline:0 solid rgba(234,25,83,0);transition:.25s}
.step-target.flash{outline:3px solid rgba(234,25,83,.10);border-color:#EA1953}

@media(max-width:900px){
  .s2{padding:80px 24px 92px}
  .s2-grid{grid-template-columns:1fr;gap:42px}
  .s2-title{font-size:37px}
}
@media(max-width:560px){
  .s2{padding:68px 18px 80px}
  .s2-title{font-size:31px}
  .s2-sub{font-size:19px}
  .s2-tabs{gap:14px}
  .s2-tab{font-size:11px}
}



/* section2 revision */
.follow-create-btn{height:40px;padding:0 18px;border:1px solid #EA1953!important;border-radius:10px;background:#fff;color:#EA1953;font-family:inherit;font-size:10px;font-weight:600}
.flow-create{justify-content:flex-start;margin-top:18px}
.flow-create .follow-create-btn{width:100%}
.intent-backdrop{display:none;position:absolute;inset:0;background:rgba(20,12,15,.16);z-index:8}
.intent-backdrop.show{display:block;animation:fadeIn .25s both}
.intent-popup{position:absolute!important;z-index:9;left:50%;top:52%;transform:translate(-50%,-50%);width:min(360px,78%);margin:0!important;box-shadow:0 20px 50px rgba(46,18,29,.16);border-radius:14px;background:#fff}
.intent-popup.show{display:block!important;animation:popupIn .3s both}
.intent-popup:before{content:"เลือกบทสนทนา";display:block;padding:11px 12px;border-bottom:1px solid #f1e8eb;font-size:11px;font-weight:700;color:#30292d}
.selected-conversation{display:none;padding:12px 13px;border:1px solid #EA1953;border-radius:12px;background:#fffafd;color:#EA1953;font-size:11px;font-weight:600}
.selected-conversation.show{display:block;animation:fadeUp .3s both}
.shop-message-area{margin-top:22px}
.shop-message-area{display:flex;justify-content:flex-start;margin-top:18px}.shop-message-area .follow-create-btn{width:100%}
.time-line{display:flex;align-items:center}
.time-chip.single{min-width:130px;font-weight:600}
@keyframes popupIn{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}


/* Core Feature 1 visual width adjustment only */
.s2-grid{
  grid-template-columns: 1fr 1fr !important;
}
.s2-demo{
  width: 100% !important;
  max-width: 520px !important;
  justify-self: end !important;
}
@media (max-width: 900px){
  .s2-grid{grid-template-columns:1fr !important;}
  .s2-demo{max-width:100% !important;justify-self:stretch !important;}
}


/* ===== Approved locked master overrides only =====
   Hero: untouched
   Core Feature 1: only animation font sizes + +เพิ่มข้อความ button size
   Core Feature 2: only animation font sizes
*/

/* Core Feature 1 animation typography */
#follow-start .s2-tab{font-size:15px !important;}
#follow-start .scene-label{font-size:13px !important;}
#follow-start .scene-input{font-size:14px !important;}
#follow-start .radio-copy b{font-size:13px !important;}
#follow-start .intent-popup:before{font-size:13px !important;}
#follow-start .intent-item{font-size:12px !important;}
#follow-start .selected-conversation{font-size:13px !important;}
#follow-start .shop-subtab{font-size:13px !important;}
#follow-start .time-chip{font-size:14px !important;}
#follow-start .scene-hint{font-size:11px !important;}

/* Core Feature 1 +เพิ่มข้อความ button = same physical size as Core Feature 2 */
#follow-start .follow-create-btn{
  height:36px !important;
  padding:0 14px !important;
  font-size:12px !important;
  width:auto !important;
  min-width:0 !important;
}
#follow-start .shop-message-area .follow-create-btn{
  width:auto !important;
}

/* Core Feature 2 animation typography only — no layout/order/position changes */
#core-feature-2 .c2-head-left b{font-size:14px !important;}
#core-feature-2 .c2-head-left small{font-size:12px !important;}
#core-feature-2 .c2-replay{font-size:12px !important;}
#core-feature-2 .c2-start small{font-size:11px !important;}
#core-feature-2 .c2-start b{font-size:14px !important;}
#core-feature-2 .c2-add{font-size:12px !important;}
#core-feature-2 .c2-step-top b{font-size:13px !important;}
#core-feature-2 .c2-time{font-size:11px !important;}
#core-feature-2 .c2-message{font-size:12px !important;}
#core-feature-2 .c2-end{font-size:11px !important;}
#core-feature-2 .c2-caption{font-size:11px !important;}


/* ===== Alternating section layout ONLY =====
   Hero stays exactly as locked.
   Core Feature 1: visual LEFT / text RIGHT.
   Core Feature 2: text LEFT / visual RIGHT.
*/

/* Core Feature 1 */
#follow-start .s2-copy{
  order:2 !important;
}
#follow-start .s2-demo{
  order:1 !important;
  justify-self:start !important;
}

/* Core Feature 2 */
#core-feature-2 .c2-copy{
  order:1 !important;
}
#core-feature-2 .c2-visual{
  order:2 !important;
  justify-self:end !important;
}

/* Mobile: keep readable stacking, text first */
@media (max-width:900px){
  #follow-start .s2-copy{order:1 !important;}
  #follow-start .s2-demo{order:2 !important;justify-self:stretch !important;}
  #core-feature-2 .c2-copy{order:1 !important;}
  #core-feature-2 .c2-visual{order:2 !important;justify-self:stretch !important;}
}


/* Core Feature 1 popup — remove dark backdrop only */
#follow-start .intent-backdrop,
#follow-start .intent-backdrop.show{
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ===== CORE FEATURE 3 — APPENDED ONLY ===== */
.c3{padding:104px 32px 112px;background:#fff8fa}
.c3-wrap{max-width:1220px;margin:auto}
.c3-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.c3-copy{order:2}
.c3-visual{order:1;justify-self:start;width:100%;max-width:520px}
.c3-title{font-size:44px;line-height:1.18;margin:0 0 10px;font-weight:700;letter-spacing:-.5px}
.c3-sub{font-size:22px;line-height:1.45;font-weight:500;margin:0 0 14px;color:#292326}
.c3-desc{font-size:16px;line-height:1.7;color:#675e63;margin:0 0 22px}
.c3-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.c3-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:#41393d}
.c3-list li:before{content:"✓";position:absolute;left:0;color:#EA1953;font-weight:700}
.c3-demo{border:1px solid #eadfe3;border-radius:22px;background:#fff;box-shadow:0 26px 65px rgba(64,25,40,.11);overflow:hidden}
.c3-head{height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee6e9;background:#fffafb}
.c3-head b{font-size:14px}.c3-replay{border:0;background:transparent;color:#EA1953;font-family:inherit;font-size:12px;cursor:pointer}
.c3-body{padding:18px}.c3-setting{border:1px solid #eadfe3;border-radius:12px;padding:11px 12px;margin-bottom:14px;background:#fff}
.c3-setting small{display:block;font-size:10px;color:#91878c;margin-bottom:4px}.c3-setting b{font-size:12px}
.c3-setting.active{border-color:#EA1953;background:#fff8fa;box-shadow:0 0 0 3px rgba(234,25,83,.07)}
.c3-flow{display:grid;gap:8px}.c3-card{border:1px solid #e8dfe2;border-radius:12px;padding:11px 12px;background:#fff;opacity:0;transform:translateY(5px);transition:.35s}
.c3-card.show{opacity:1;transform:none}.c3-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.c3-top b{font-size:12px}
.c3-time{font-size:10px;color:#EA1953;background:#fff1f5;border-radius:999px;padding:3px 7px}.c3-msg{font-size:11px;line-height:1.45;color:#62585d}
.c3-line{height:14px;width:1px;background:#e5d9dd;margin:auto;opacity:0;transition:.3s}.c3-line.show{opacity:1}
.c3-reply{display:none;border:1px solid #f0c2ce;background:#fff7f9;border-radius:12px;padding:10px 11px}.c3-reply.show{display:block;animation:c3up .35s both}
.c3-label{font-size:9px;color:#9a8f94;margin-bottom:4px}.c3-bubble{width:max-content;max-width:86%;padding:8px 10px;border-radius:10px 10px 10px 3px;background:#f0f0f3;font-size:11px}
.c3-detect{display:none;text-align:center;font-size:10px;color:#EA1953;font-weight:600;padding:3px}.c3-detect.show{display:block;animation:c3up .3s both}
.c3-cancel{opacity:0;transform:translateY(5px);transition:.35s;border:1px dashed #d9ced2;border-radius:12px;padding:11px 12px;background:#faf8f9}
.c3-cancel.show{opacity:.55;transform:none}.c3-cancel .c3-top{margin:0}.c3-cancel b{text-decoration:line-through;font-size:12px;color:#756b70}.c3-cancel span{font-size:10px;color:#9d9397}
.c3-stopped{display:none;margin:4px auto 0;width:max-content;padding:7px 11px;border-radius:999px;background:#eefaf4;color:#287f52;font-size:10px;font-weight:600}
.c3-stopped.show{display:block;animation:c3up .35s both}@keyframes c3up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:900px){.c3-grid{grid-template-columns:1fr}.c3-copy{order:1}.c3-visual{order:2;max-width:100%;justify-self:stretch}.c3-title{font-size:37px}}


/* Core Feature 3 chat animation only */
.c3-chat-demo{border:1px solid #eadfe3;border-radius:22px;background:#fff;box-shadow:0 26px 65px rgba(64,25,40,.11);overflow:hidden}
.c3-chat-head{height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee6e9;background:#fffafb}
.c3-chat-head>div{display:grid}.c3-chat-head b{font-size:14px}.c3-chat-head small{font-size:10px;color:#9a8f94}
.c3-chat-body{padding:18px;min-height:390px;display:flex;flex-direction:column;gap:11px}
.c3-chat-row{display:flex;opacity:0;transform:translateY(7px);transition:.35s}
.c3-chat-row.show{opacity:1;transform:none}.c3-chat-row.admin{justify-content:flex-end}.c3-chat-row.customer{justify-content:flex-start}
.c3-bubble-wrap{max-width:82%}.c3-meta{font-size:9px;color:#9b9095;margin:0 4px 4px}
.c3-chat-row.admin .c3-meta{text-align:right}
.c3-chat-bubble{font-size:12px;line-height:1.5;padding:10px 12px}
.admin-bubble{background:#fff1f5;border:1px solid #f2c3cf;border-radius:13px 13px 3px 13px}
.customer-bubble{background:#f1f1f4;border-radius:13px 13px 13px 3px}
.c3-detect-chat,.c3-stop-chat,.c3-cancel-chat{opacity:0;transform:translateY(5px);transition:.3s;text-align:center;font-size:10px}
.c3-detect-chat.show,.c3-stop-chat.show,.c3-cancel-chat.show{opacity:1;transform:none}
.c3-detect-chat{color:#EA1953;font-weight:600;margin-top:3px}
.c3-stop-chat{width:max-content;align-self:center;background:#eefaf4;color:#287f52;font-weight:600;padding:7px 12px;border-radius:999px}
.c3-cancel-chat{color:#9c9196;text-decoration:line-through}

/* CORE FEATURE 2 — appended only; locked sections above untouched */
.c2{padding:108px 32px 116px;background:linear-gradient(180deg,#fff9fb 0%,#fff 100%)}
.c2-wrap{max-width:1220px;margin:0 auto}
.c2-grid{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center}
.c2-copy{order:2}
.c2-visual{order:1;max-width:520px;width:100%;justify-self:start}
.c2-title{font-size:44px;line-height:1.18;letter-spacing:-.5px;margin:0 0 10px;font-weight:700;color:#0B0807}
.c2-sub{font-size:22px;line-height:1.45;font-weight:500;color:#292326;margin:0 0 14px}
.c2-desc{font-size:16px;line-height:1.72;color:#675e63;margin:0;max-width:570px}

.c2-shell{background:#fff;border:1px solid #eadfe3;border-radius:22px;box-shadow:0 26px 65px rgba(64,25,40,.11);overflow:hidden}
.c2-head{height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee6e9;background:#fff}
.c2-head-left b{display:block;font-size:13px;font-weight:600;color:#221d20}.c2-head-left small{display:block;font-size:10px;color:#968c91;margin-top:2px}
.c2-replay{height:30px;padding:0 10px;border:1px solid #e8dfe2;border-radius:8px;background:#fff;color:#6e6469;font-family:inherit;font-size:10px;cursor:pointer}
.c2-body{position:relative;padding:22px 20px 24px;min-height:560px;background:linear-gradient(180deg,#fff,#fffafb)}
.c2-start{width:300px;max-width:92%;margin:0 auto;padding:12px 14px;border:1px solid #efbdca;border-radius:13px;background:#fff6f8;text-align:center}
.c2-start small{display:block;font-size:9px;color:#9b9095;margin-bottom:3px}.c2-start b{font-size:11px;color:#EA1953;font-weight:600}
.c2-line{width:2px;height:22px;background:#eadde1;margin:0 auto;position:relative}.c2-line:after{content:'';position:absolute;bottom:-1px;left:50%;width:6px;height:6px;border-right:2px solid #d3c2c8;border-bottom:2px solid #d3c2c8;transform:translateX(-50%) rotate(45deg)}
.c2-add-wrap{display:flex;justify-content:center;margin:10px 0}
.c2-add{height:36px;padding:0 14px;border:1px solid #EA1953;border-radius:9px;background:#fff;color:#EA1953;font-family:inherit;font-size:10px;font-weight:600;opacity:0;transform:translateY(5px);pointer-events:none}
.c2-add.show{opacity:1;transform:none;transition:.35s}.c2-add.pulse{animation:c2Pulse .65s ease}
.c2-step{display:none;width:100%;border:1px solid #e9e0e3;border-radius:14px;background:#fff;padding:13px 14px;box-shadow:0 8px 20px rgba(51,20,32,.04)}
.c2-step.show{display:block;animation:c2Up .38s both}
.c2-step-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.c2-step-top b{font-size:11px;font-weight:600;color:#272124}.c2-time{padding:4px 8px;border-radius:999px;background:#fff1f5;color:#EA1953;font-size:9px;font-weight:600;white-space:nowrap}
.c2-message{min-height:36px;padding:9px 10px;border-radius:9px;background:#faf7f8;font-size:10px;line-height:1.5;color:#5d5459}
.c2-cursor{display:inline-block;width:1px;height:12px;background:#EA1953;vertical-align:-2px;margin-left:2px;animation:c2Blink .7s infinite}
.c2-end{display:none;width:max-content;margin:12px auto 0;padding:6px 10px;border-radius:999px;background:#f4f1f2;color:#766c71;font-size:9px;font-weight:600}.c2-end.show{display:block;animation:c2Up .35s both}
.c2-caption{text-align:center;color:#9b9195;font-size:9px;margin-top:12px}
@keyframes c2Up{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes c2Pulse{0%,100%{transform:scale(1)}50%{transform:scale(.96);box-shadow:0 0 0 5px rgba(234,25,83,.08)}}
@keyframes c2Blink{50%{opacity:0}}
@media(max-width:900px){.c2{padding:82px 24px 94px}.c2-grid{grid-template-columns:1fr;gap:42px}.c2-copy,.c2-visual{order:initial}.c2-visual{justify-self:stretch;max-width:520px}.c2-title{font-size:37px}}
@media(max-width:560px){.c2{padding:70px 18px 82px}.c2-title{font-size:31px}.c2-sub{font-size:19px}.c2-body{padding:18px 14px 22px;min-height:570px}}


/* Core Feature 2 spacing only — locked Hero/Core 1 untouched */
#core-feature-2 .c2-line{
  height:14px !important;
}
#core-feature-2 .c2-add-wrap{
  margin:4px 0 !important;
}
#core-feature-2 .c2-step{
  margin:0 !important;
}
#core-feature-2 .c2-end{
  margin-top:8px !important;
}
#core-feature-2 .c2-caption{
  margin-top:8px !important;
}

/* Core Feature 3 only — Hero/Core 1/Core 2 remain untouched */
    #core-feature-3.c3{padding:104px 32px 112px;background:#fff8fa}
    #core-feature-3 .c3-wrap{max-width:1220px;margin:auto}
    #core-feature-3 .c3-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
    #core-feature-3 .c3-copy{order:2}
    #core-feature-3 .c3-visual{order:1;justify-self:start;width:100%;max-width:520px}
    #core-feature-3 .c3-title{font-size:44px;line-height:1.18;margin:0 0 10px;font-weight:700;letter-spacing:-.5px}
    #core-feature-3 .c3-sub{font-size:22px;line-height:1.45;font-weight:500;margin:0 0 14px;color:#292326}
    #core-feature-3 .c3-desc{font-size:16px;line-height:1.7;color:#675e63;margin:0 0 22px}
    #core-feature-3 .c3-list{list-style:none;padding:0;margin:0;display:grid;gap:9px}
    #core-feature-3 .c3-list li{position:relative;padding-left:20px;font-size:14px;line-height:1.55;color:#41393d}
    #core-feature-3 .c3-list li:before{content:"✓";position:absolute;left:0;color:#EA1953;font-weight:700}
    #core-feature-3 .c3-demo{border:1px solid #eadfe3;border-radius:22px;background:#fff;box-shadow:0 26px 65px rgba(64,25,40,.11);overflow:hidden;height:548px;position:relative}
    #core-feature-3 .c3-scene{position:absolute;inset:0;height:548px;background:#fff;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.995);transition:opacity .48s ease,transform .48s ease,visibility 0s linear .48s}
    #core-feature-3 .c3-scene.active{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .48s ease,transform .48s ease,visibility 0s linear 0s}
    #core-feature-3 .c3-head{height:62px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee6e9;background:#fffafb}
    #core-feature-3 .c3-head b{display:block;font-size:14px}
    #core-feature-3 .c3-head small{display:block;font-size:11px;color:#968c91;margin-top:2px}
    #core-feature-3 .c3-replay{height:30px;padding:0 10px;border:1px solid #e8dfe2;border-radius:8px;background:#fff;color:#6e6469;font-family:inherit;font-size:11px;cursor:pointer}

    /* scene 1 flow */
    #core-feature-3 .c3-flow-body{padding:22px 20px 24px;background:linear-gradient(180deg,#fff,#fffafb);height:486px;overflow:hidden}
    #core-feature-3 .c3-start{width:300px;max-width:92%;margin:0 auto;padding:12px 14px;border:1px solid #efbdca;border-radius:13px;background:#fff6f8;text-align:center}
    #core-feature-3 .c3-start small{display:block;font-size:11px;color:#9b9095;margin-bottom:3px}
    #core-feature-3 .c3-start b{font-size:14px;color:#EA1953;font-weight:600}
    #core-feature-3 .c3-arrow{height:14px;width:2px;background:#eadde1;margin:0 auto;position:relative}
    #core-feature-3 .c3-arrow:after{content:"";position:absolute;bottom:-1px;left:50%;width:6px;height:6px;border-right:2px solid #d3c2c8;border-bottom:2px solid #d3c2c8;transform:translateX(-50%) rotate(45deg)}
    #core-feature-3 .c3-flow-card{border:1px solid #e9e0e3;border-radius:14px;background:#fff;padding:13px 14px;margin:0;transition:.25s;cursor:default}
    #core-feature-3 .c3-flow-card.target{cursor:pointer}
    #core-feature-3 .c3-flow-card.focus{border-color:#EA1953;box-shadow:0 0 0 4px rgba(234,25,83,.08);transform:scale(.995)}
    #core-feature-3 .c3-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
    #core-feature-3 .c3-card-top b{font-size:13px}
    #core-feature-3 .c3-time{padding:4px 8px;border-radius:999px;background:#fff1f5;color:#EA1953;font-size:11px;font-weight:600}
    #core-feature-3 .c3-msg{padding:9px 10px;border-radius:9px;background:#faf7f8;font-size:12px;line-height:1.5;color:#5d5459}
    #core-feature-3 .c3-end{width:max-content;margin:10px auto 0;padding:6px 10px;border-radius:999px;background:#f4f1f2;color:#766c71;font-size:11px;font-weight:600}
    #core-feature-3 .c3-caption{text-align:center;color:#9b9195;font-size:11px;margin-top:8px}

    /* scene 2 stop settings */
    #core-feature-3 .c3-setting-body{padding:18px;height:486px;background:#fff;overflow:hidden}
    #core-feature-3 .c3-setting-title{font-size:13px;font-weight:700;margin-bottom:9px;color:#201b1e}
    #core-feature-3 .c3-option{border:1px solid #ded8da;border-radius:12px;padding:11px 12px;margin-bottom:8px;background:#fff;transition:.25s}
    #core-feature-3 .c3-option.checked{border-color:#efb6c5;background:#fffafd}
    #core-feature-3 .c3-checkline{display:flex;align-items:center;gap:10px;font-size:12px;color:#575055}
    #core-feature-3 .c3-checkbox{width:18px;height:18px;border:2px solid #9b9598;border-radius:2px;position:relative;flex:0 0 18px}
    #core-feature-3 .c3-option.checked .c3-checkbox{border-color:#EA1953;background:#EA1953}
    #core-feature-3 .c3-option.checked .c3-checkbox:after{content:"✓";position:absolute;color:#fff;font-weight:800;font-size:12px;left:2px;top:-2px}
    #core-feature-3 .c3-option small{display:block;font-size:10px;color:#aaa1a5;margin:4px 0 0 28px}
    #core-feature-3 .c3-reply-setting{max-height:0;opacity:0;overflow:hidden;padding:0 0 0 28px;transform:translateY(-4px);transition:max-height .38s ease,opacity .32s ease,transform .38s ease,padding .38s ease}
    #core-feature-3 .c3-reply-setting.show{max-height:96px;opacity:1;padding-top:8px;transform:none}
    #core-feature-3 .c3-radio-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
    #core-feature-3 .c3-radio{display:flex;align-items:center;gap:7px;font-size:11px;color:#70686c}
    #core-feature-3 .c3-radio-dot{width:18px;height:18px;border:2px solid #969093;border-radius:50%;position:relative}
    #core-feature-3 .c3-radio.active .c3-radio-dot{border-color:#EA1953}
    #core-feature-3 .c3-radio.active .c3-radio-dot:after{content:"";position:absolute;inset:3px;border-radius:50%;background:#EA1953}
    #core-feature-3 .c3-keyword-row{display:flex;align-items:center;gap:6px;margin-top:0;max-height:0;opacity:0;overflow:hidden;transform:translateY(-4px);transition:max-height .35s ease,opacity .3s ease,transform .35s ease,margin .35s ease}
    #core-feature-3 .c3-keyword-row.show{max-height:42px;opacity:1;transform:none;margin-top:9px}
    #core-feature-3 .c3-keyword-chip{display:none;align-items:center;border-radius:8px;background:#EA1953;color:#fff;overflow:hidden;font-size:11px}
    #core-feature-3 .c3-keyword-row.committed .c3-keyword-chip{display:flex;animation:c3Up .25s both}
    #core-feature-3 .c3-keyword-row.committed .c3-keyword-input{display:none}
    #core-feature-3 .c3-keyword-chip .grip{padding:6px 8px;border-right:1px solid rgba(255,255,255,.28)}
    #core-feature-3 .c3-keyword-chip .word{padding:6px 8px;min-width:60px}
    #core-feature-3 .c3-keyword-input{height:31px;min-width:120px;border:1px solid #e6dde0;border-radius:9px;padding:0 9px;font:inherit;font-size:11px;color:#4e464a}
    #core-feature-3 .c3-save-wrap{display:flex;justify-content:flex-end;margin-top:14px}
    #core-feature-3 .c3-save{height:34px;padding:0 16px;border:0;border-radius:9px;background:#EA1953;color:#fff;font:inherit;font-size:11px;font-weight:600;opacity:.45;transition:.25s}
    #core-feature-3 .c3-save.ready{opacity:1;box-shadow:0 8px 18px rgba(234,25,83,.2)}


    #core-feature-3 .c3-hero-chat-head{justify-content:flex-start;gap:10px;background:#fff}
    #core-feature-3 .c3-hero-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,#EA1953,#F48B4F);flex:0 0 34px}
    #core-feature-3 .c3-hero-headcopy{display:grid}
    #core-feature-3 .c3-hero-status{margin-left:auto;font-size:9px;color:#26965d;background:#eefaf4;border:1px solid #d7f1e3;padding:5px 7px;border-radius:999px;font-weight:700;white-space:nowrap}
    #core-feature-3 .c3-hero-chat-head .c3-replay{margin-left:2px;width:30px;padding:0}

    /* scene 3 chat */
    #core-feature-3 .c3-chat-body{padding:22px 22px 34px;height:486px;background:linear-gradient(180deg,#fff 0%,#fffafb 100%);display:flex;flex-direction:column;gap:8px;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scrollbar-width:none}
    #core-feature-3 .c3-chat-body::-webkit-scrollbar{display:none}
    #core-feature-3 .c3-chat-row{display:flex;opacity:0;transform:translateY(10px);transition:opacity .42s ease,transform .42s ease}
    #core-feature-3 .c3-chat-row.show{opacity:1;transform:none}
    #core-feature-3 .c3-chat-row.admin{justify-content:flex-end}
    #core-feature-3 .c3-chat-row.customer{justify-content:flex-start}
    #core-feature-3 .c3-bubble-wrap{max-width:78%}
    #core-feature-3 .c3-meta{font-size:9px;color:#8b8287;margin:0 4px 4px}
    #core-feature-3 .c3-chat-row.admin .c3-meta{text-align:right}
    #core-feature-3 .c3-bubble{display:block;font-size:14px;line-height:1.5;padding:12px 14px;max-width:100%;box-sizing:border-box}
    #core-feature-3 .admin-bubble{background:#fff;border:1px solid #eee5e8;border-radius:16px 16px 5px 16px;box-shadow:0 5px 18px rgba(31,16,21,.04)}
    #core-feature-3 .customer-bubble{background:#f1f1f4;border-radius:16px 16px 16px 5px;box-shadow:none}
    #core-feature-3 .c3-alert{align-self:center;opacity:0;transform:translateY(5px);transition:.3s;padding:9px 12px;border-radius:12px;background:#faf3f5;color:#9a707c;font-size:11px;font-weight:800}
    #core-feature-3 .c3-alert.show{opacity:1;transform:none}
    #core-feature-3 .c3-alert.stop{background:#eefaf4;color:#287f52}
    #core-feature-3 .c3-silent{color:#a69da1;font-size:10px;text-align:center;opacity:0;transition:.3s}
    #core-feature-3 .c3-silent.show{opacity:1}
    @keyframes c3Fade{from{opacity:0}to{opacity:1}}
    @keyframes c3Up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    @media(max-width:900px){#core-feature-3 .c3-grid{grid-template-columns:1fr}#core-feature-3 .c3-copy{order:1}#core-feature-3 .c3-visual{order:2;max-width:100%}#core-feature-3 .c3-title{font-size:37px}}

/* ===== CORE FEATURE 4 v2 — APPENDED ONLY ===== */
.c4{padding:108px 32px 116px;background:#fff}
.c4-wrap{max-width:1220px;margin:0 auto}
.c4-grid{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center}
.c4-copy{order:1}.c4-visual{order:2;max-width:520px;width:100%;justify-self:end}
.c4-title{font-size:44px;line-height:1.18;letter-spacing:-.5px;margin:0 0 10px;font-weight:700;color:#0B0807}
.c4-sub{font-size:22px;line-height:1.45;font-weight:500;color:#292326;margin:0 0 14px}
.c4-desc{font-size:16px;line-height:1.72;color:#675e63;margin:0;max-width:570px}
.c4-shell{height:548px;background:#fff;border:1px solid #eadfe3;border-radius:22px;box-shadow:0 26px 65px rgba(64,25,40,.11);overflow:hidden}
.c4-top{height:58px;padding:0 17px;display:flex;align-items:center;border-bottom:1px solid #eee6e9;background:#fffafb}
.c4-name{height:34px;border:1px solid #e8dfe2;border-radius:999px;background:#fff;display:flex;align-items:center;padding:0 13px;color:#777076;font-size:11px;flex:1}
.c4-channelbar{height:52px;padding:0 17px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #eee6e9}
.c4-channelbar b{font-size:12px;margin-right:2px}
.c4-logo{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;background:#fff;border:1px solid #eee6e9;padding:4px;opacity:0;transform:scale(.65) translateY(4px);transition:.38s cubic-bezier(.2,.8,.2,1)}
.c4-logo.show{opacity:1;transform:scale(1) translateY(0)}
.c4-logo img{width:100%;height:100%;object-fit:contain}
.c4-work{height:382px;display:grid;grid-template-columns:.88fr 1.12fr;background:#fff}
.c4-flow{padding:34px 18px;background:#fff9fb;border-right:1px solid #eee6e9;display:flex;flex-direction:column;align-items:center}
.c4-node{width:100%;padding:13px 9px;border:1px solid #efbdca;border-radius:11px;background:#fff;text-align:center;font-size:11px;line-height:1.35}
.c4-node small{display:block;color:#9b9095;font-size:9px;margin-top:3px}
.c4-line{width:1px;height:26px;background:#d8cdd1;position:relative}
.c4-line:after{content:"";position:absolute;bottom:-1px;left:-3px;width:6px;height:6px;border-right:1px solid #aaa0a4;border-bottom:1px solid #aaa0a4;transform:rotate(45deg)}
.c4-add{width:100%;height:38px;border:1px dashed #EA1953;border-radius:9px;background:#fff;color:#EA1953;font-family:inherit;font-size:10px}
.c4-end{width:100%;padding:11px 8px;border:1px solid #ddd3d7;border-radius:10px;background:#fff;text-align:center;font-size:10px}
.c4-settings{padding:22px 16px}
.c4-settings-title{font-size:11px;font-weight:600;margin-bottom:13px}
.c4-radio{border:1px solid #efbdca;border-radius:12px;padding:13px;background:#fffafd;margin-bottom:10px}
.c4-radio-head{display:flex;gap:8px;align-items:flex-start}
.c4-dot{width:16px;height:16px;border:2px solid #EA1953;border-radius:50%;position:relative;flex:0 0 16px;margin-top:1px}
.c4-dot:after{content:"";position:absolute;inset:3px;background:#EA1953;border-radius:50%}
.c4-radio b{font-size:11px;color:#EA1953}.c4-radio small{display:block;font-size:9px;color:#9b9095;margin-top:2px}
.c4-select{margin:10px 0 0 24px;height:34px;border:1px dashed #ef9cb2;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#EA1953;font-size:9px;font-weight:600}
.c4-radio.muted{border-color:#e7dfe2;background:#fff}.c4-radio.muted .c4-dot{border-color:#a9a0a4}.c4-radio.muted .c4-dot:after{display:none}.c4-radio.muted b{color:#4e474a}
.c4-savebar{height:56px;border-top:1px solid #eee6e9;display:flex;align-items:center;justify-content:center;gap:10px}
.c4-cancel{height:34px;padding:0 20px;border:1px solid #ddd3d7;border-radius:999px;background:#fff;color:#9a9095;font-family:inherit}
.c4-save{height:34px;padding:0 22px;border:0;border-radius:999px;background:#EA1953;color:#fff;font-family:inherit}
.c4-pulse{animation:c4pulse .55s ease}
@keyframes c4pulse{50%{transform:scale(.93);box-shadow:0 0 0 7px rgba(234,25,83,.08)}}
@media(max-width:900px){.c4{padding:82px 24px 94px}.c4-grid{grid-template-columns:1fr;gap:42px}.c4-copy,.c4-visual{order:initial}.c4-visual{justify-self:stretch;max-width:520px}.c4-title{font-size:37px}}
@media(max-width:560px){.c4{padding:70px 18px 82px}.c4-title{font-size:31px}.c4-sub{font-size:19px}.c4-work{grid-template-columns:.9fr 1.1fr}}

/* ===== CORE FEATURE 5 — APPENDED ONLY ===== */
.c5{padding:108px 32px 116px;background:linear-gradient(180deg,#fff9fb 0%,#fff 100%)}
.c5-wrap{max-width:1220px;margin:0 auto}
.c5-grid{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center}
.c5-visual{order:1;max-width:520px;width:100%;justify-self:start}
.c5-copy{order:2}
.c5-title{font-size:44px;line-height:1.18;letter-spacing:-.5px;margin:0 0 10px;font-weight:700;color:#0B0807}
.c5-sub{font-size:22px;line-height:1.45;font-weight:500;color:#292326;margin:0 0 14px}
.c5-desc{font-size:16px;line-height:1.72;color:#675e63;margin:0;max-width:570px}
.c5-shell{position:relative;height:548px;background:#fff;border:1px solid #eadfe3;border-radius:22px;box-shadow:0 26px 65px rgba(64,25,40,.11);overflow:hidden}
.c5-scene{position:absolute;inset:0;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .55s ease,transform .55s ease}
.c5-scene.active{opacity:1;transform:none;pointer-events:auto}
.c5-body{padding:18px 16px 16px;background:#fffafb;height:548px}
.c5-summary-title{font-size:14px;font-weight:700;color:#EA1953;margin-bottom:3px}
.c5-summary-sub{font-size:10px;color:#8f858a;margin-bottom:12px}
.c5-cards{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-template-rows:74px 74px;gap:10px;margin-bottom:14px}
.c5-card{border:1px solid #eadfe3;border-radius:14px;background:#fff;padding:11px 12px;box-shadow:0 4px 14px rgba(31,16,21,.05)}
.c5-card b{display:block;font-size:10px;color:#8f858a;margin-bottom:8px;font-weight:500}
.c5-card .num{font-size:20px;line-height:1;font-weight:800;color:#EA1953;text-align:right;margin-top:22px;letter-spacing:-.02em}
.c5-card.big{grid-row:1 / span 2;background:linear-gradient(180deg,#fff 0%,#fff8fb 100%)}
.c5-card.big .num{font-size:24px;margin-top:86px}
.c5-table-title{font-size:12px;font-weight:700;color:#EA1953;margin:0 0 8px}
.c5-toolbar{display:flex;gap:8px;margin-bottom:8px}
.c5-chip{height:26px;border:1px solid #e5dade;border-radius:999px;padding:0 10px;background:#fff;color:#7f7579;font-size:10px;display:flex;align-items:center}
.c5-chip.active{background:#EA1953;color:#fff;border-color:#EA1953}
.c5-table{border:1px solid #eadfe3;border-radius:14px;background:#fff;overflow:hidden}
.c5-head,.c5-row,.c5-detail-row{display:grid;grid-template-columns:1.45fr 1.05fr .58fr .75fr .85fr;align-items:center}
.c5-head{padding:10px 12px;background:#fcfbfb;font-size:9px;color:#968c91;border-bottom:1px solid #f1eaed}
.c5-row{padding:12px;font-size:10px;color:#40373c;border-bottom:1px solid #f4eef0;position:relative}
.c5-row:last-child{border-bottom:0}
.c5-type{display:inline-flex;align-items:center;justify-content:center;height:22px;padding:0 10px;border-radius:999px;background:#fff3f7;border:1px solid #f6c5d2;color:#EA1953;font-size:8.5px;font-weight:700;white-space:nowrap}
.c5-type.shop{background:#fff7ef;border-color:#f7d1ad;color:#df7b20}
.c5-link{justify-self:end;color:#EA1953;font-size:10px;font-weight:700;position:relative}
.c5-link.pulse:after{content:"";position:absolute;inset:-4px -6px;border:2px solid rgba(234,25,83,.28);border-radius:999px;animation:c5pulse 1.2s ease infinite}
.c5-detail-row{padding:10px 12px 12px;background:#fffafc;font-size:10px;color:#4a4346;grid-template-columns:1.55fr 1.05fr .58fr .75fr .85fr}
.c5-breakdown{grid-column:1 / span 2;padding-left:8px;border-left:3px solid #EA1953;line-height:1.72}
.c5-breakdown span{display:flex;justify-content:space-between;gap:12px;max-width:210px}
.c5-breakdown em{font-style:normal;color:#665d61}
.c5-breakdown strong{font-weight:700;color:#0B0807}
.c5-cell-strong{font-weight:700;color:#0B0807}
.c5-modal-backdrop{position:absolute;inset:0;background:rgba(20,12,15,.28);opacity:0;transition:.45s}
.c5-scene.active .c5-modal-backdrop{opacity:1}
.c5-modal{position:absolute;left:24px;right:24px;top:28px;bottom:24px;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(27,14,20,.24);padding:14px 14px 10px;display:flex;flex-direction:column}
.c5-modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.c5-modal-head b{font-size:12px;color:#EA1953}
.c5-modal-head small{display:block;font-size:9px;color:#8f858a;margin-top:2px}
.c5-close{font-size:18px;color:#554d52;line-height:1}
.c5-filters{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.c5-filter{height:34px;border:1px solid #e7dfe2;border-radius:10px;background:#fff;font-size:9px;color:#8f858a;display:flex;align-items:center;padding:0 10px}
.c5-list{border-top:1px solid #f1eaed;margin-top:4px;padding-top:4px;display:grid;gap:2px;overflow:hidden}
.c5-list-head,.c5-item{display:grid;grid-template-columns:1.32fr .42fr .66fr .9fr .4fr;align-items:center;padding:8px 6px;font-size:9px}
.c5-list-head{color:#988f93}
.c5-item{border-bottom:1px solid #f5eef1;color:#443d40}
.c5-badge{display:inline-flex;height:18px;padding:0 8px;align-items:center;border-radius:999px;background:#fde8ec;color:#f14a63;font-size:8px;font-weight:700}
.c5-badge.ok{background:#e8f7ea;color:#2b9c54}
.c5-see{justify-self:end;color:#EA1953;font-weight:700}
.c5-footer-btn{margin-top:auto;align-self:center;height:28px;padding:0 26px;border:1px solid #ddd3d7;border-radius:999px;background:#fff;color:#8d8388;font-family:inherit;font-size:10px}
@keyframes c5pulse{0%{opacity:0;transform:scale(.9)}35%{opacity:1}100%{opacity:0;transform:scale(1.12)}}
@media(max-width:900px){.c5{padding:82px 24px 94px}.c5-grid{grid-template-columns:1fr;gap:42px}.c5-visual,.c5-copy{order:initial}.c5-visual{justify-self:stretch;max-width:520px}.c5-title{font-size:37px}}
@media(max-width:560px){.c5{padding:70px 18px 82px}.c5-title{font-size:31px}.c5-sub{font-size:19px}.c5-cards{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}.c5-card.big{grid-column:1 / span 2;grid-row:auto}.c5-card.big .num{margin-top:42px}.c5-head,.c5-row,.c5-detail-row,.c5-list-head,.c5-item{font-size:8px}.c5-filters{grid-template-columns:1fr 1fr}}

/* Core Feature 3 chat frame containment fix ONLY — Core Feature 5 remains locked */
#core-feature-3 #c3Scene3,
#core-feature-3 #c3Scene3 *{
  min-width:0;
}
#core-feature-3 #c3Scene3 .c3-chat-body{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow-y:auto;
  overflow-x:hidden;
}
#core-feature-3 #c3Scene3 .c3-chat-row{
  width:100%;
  max-width:100%;
  flex:0 0 auto;
}
#core-feature-3 #c3Scene3 .c3-bubble-wrap{
  width:auto;
  max-width:78%;
  min-width:0;
}
#core-feature-3 #c3Scene3 .c3-bubble,
#core-feature-3 #c3Scene3 .c3-chat-bubble{
  display:block;
  width:auto;
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}
#core-feature-3 #c3Scene3 .c3-alert,
#core-feature-3 #c3Scene3 .c3-silent{
  max-width:calc(100% - 24px);
  box-sizing:border-box;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Core Feature 3 — Scene 3 customer bubble = Hero bubble */
#core-feature-3 #c3Scene3 .c3-chat-row.customer .c3-meta{display:none!important;}
#core-feature-3 #c3Scene3 .c3-chat-row.customer .c3-bubble-wrap{
  max-width:78%!important;
  width:auto!important;
}
#core-feature-3 #c3Scene3 .c3-chat-row.customer .customer-bubble{
  margin-right:auto!important;
  background:#f1f1f4!important;
  border:0!important;
  border-radius:16px!important;
  border-bottom-left-radius:5px!important;
  padding:12px 14px!important;
  font-size:14px!important;
  line-height:1.5!important;
  box-shadow:none!important;
  width:max-content!important;
  max-width:100%!important;
}
#core-feature-3 #c3Scene3 #c3AlertStop{
  margin-top:10px!important;
}

/* Core Feature 3 Scene 3 — visual match to approved reference */
#core-feature-3 #c3Scene3 .c3-head.c3-hero-chat-head{height:70px;padding:0 18px;display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid #eee6e9}
#core-feature-3 #c3Scene3 .c3-head.c3-hero-chat-head .c3-replay{display:none!important}
#core-feature-3 #c3Scene3 .c3-hero-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#ef596d,#f08d39);color:#fff;font-size:16px;font-weight:700;flex:0 0 36px}
#core-feature-3 #c3Scene3 .c3-hero-headcopy{display:grid;gap:2px;flex:1;min-width:0}
#core-feature-3 #c3Scene3 .c3-hero-headcopy b{font-size:14px;font-weight:700}
#core-feature-3 #c3Scene3 .c3-hero-headcopy small{font-size:10px;color:#92888d}
#core-feature-3 #c3Scene3 .c3-hero-status{margin-left:auto;background:#eefaf4;color:#22824b;border:1px solid #d6ecdd;border-radius:999px;padding:7px 12px;font-size:10px;font-weight:700;white-space:nowrap}
#core-feature-3 #c3Scene3 .c3-chat-body{padding:22px 22px 28px;background:#fff;gap:12px}
#core-feature-3 #c3Scene3 .c3-chat-row.customer .c3-meta,
#core-feature-3 #c3Scene3 .c3-chat-row.admin .c3-meta{display:none!important}
#core-feature-3 #c3Scene3 .c3-bubble-wrap{max-width:84%!important;width:auto!important}
#core-feature-3 #c3Scene3 .c3-bubble{display:block;font-size:12px;line-height:1.6;padding:12px 14px;max-width:100%;box-sizing:border-box}
#core-feature-3 #c3Scene3 .customer-bubble{background:#f1f1f4!important;color:#1e1a1d;border:none!important;border-radius:16px 16px 16px 5px!important;box-shadow:none!important}
#core-feature-3 #c3Scene3 .admin-bubble{background:#fff!important;border:1px solid #ecdfe5!important;border-radius:16px 16px 5px 16px!important;box-shadow:0 5px 18px rgba(31,16,21,.04)!important}
#core-feature-3 #c3Scene3 .c3-follow-bubble{border-color:#f2c3cf!important}
#core-feature-3 #c3Scene3 .c3-follow-tag{display:inline-block;margin:0 0 8px;padding:2px 7px;border-radius:999px;background:#EA1953;color:#fff;font-size:9px;font-weight:800;letter-spacing:.02em}
#core-feature-3 #c3Scene3 .c3-silent{align-self:center;opacity:0;transition:.3s;padding:8px 12px;border-radius:999px;background:#faf1f4;color:#9b7b86;font-size:10px;font-weight:700;text-align:center}
#core-feature-3 #c3Scene3 .c3-silent.show{opacity:1}
#core-feature-3 #c3Scene3 .c3-alert{align-self:center;opacity:0;transform:translateY(5px);transition:.3s;text-align:center}
#core-feature-3 #c3Scene3 .c3-alert.show{opacity:1;transform:none}
#core-feature-3 #c3Scene3 .c3-time-note{padding:0;background:transparent;color:#a1989d;font-size:11px;font-weight:500}
#core-feature-3 #c3Scene3 .c3-alert.stop{padding:10px 14px;border-radius:12px;background:#edf8f1!important;color:#20854c!important;font-size:12px;font-weight:800;border:1px solid #d6ecdd}

/* Hero + Core Feature 3: gray customer bubbles hug text width */
.chat-card .bubble.customer,
.chat-card .bubble.reply{
  width:max-content !important;
  max-width:78% !important;
}
#core-feature-3 #c3Scene3 .c3-chat-row.customer .c3-bubble-wrap{
  width:max-content !important;
  max-width:78% !important;
}
#core-feature-3 #c3Scene3 .c3-chat-row.customer .customer-bubble{
  width:max-content !important;
  max-width:100% !important;
}

/* Core Feature 3 final polish — customer bubble width, raised follow-up tag, final stop alert timing/visibility */
#core-feature-3 #c3Scene3 .c3-chat-row.customer{
  width:100%;
  justify-content:flex-start !important;
}
#core-feature-3 #c3Scene3 .c3-chat-row.customer .c3-bubble-wrap{
  display:inline-block !important;
  width:auto !important;
  max-width:78% !important;
  flex:0 0 auto !important;
}
#core-feature-3 #c3Scene3 .c3-chat-row.customer .customer-bubble{
  display:inline-block !important;
  width:auto !important;
  max-width:100% !important;
  white-space:normal !important;
}
#core-feature-3 #c3Scene3 .c3-follow-bubble{
  position:relative;
  padding-top:18px !important;
}
#core-feature-3 #c3Scene3 .c3-follow-tag{
  position:relative;
  top:-12px;
  display:inline-block;
  margin:0 0 -6px;
  padding:2px 7px;
  border-radius:999px;
  background:#EA1953;
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.02em;
}
#core-feature-3 #c3Scene3 #c3AlertStop{
  display:none;
  opacity:0;
}
#core-feature-3 #c3Scene3 #c3AlertStop.show{
  display:block;
  opacity:1;
}

/* Core Feature 3 Scene 3 — use Hero chat design exactly; JS controls timing */
#core-feature-3 #c3Scene3 .c3-hero-chat-clone{
  height:548px;
  background:#fff;
  overflow:hidden;
}
#core-feature-3 #c3Scene3 .chat-head{
  height:70px;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #f3edef;
  background:#fff;
}
#core-feature-3 #c3Scene3 .avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  background:linear-gradient(135deg,var(--pink),var(--orange));
  flex:0 0 38px;
}
#core-feature-3 #c3Scene3 .head-name{font-weight:850;font-size:14px}
#core-feature-3 #c3Scene3 .head-sub{font-size:11px;color:#8b8287;margin-top:2px}
#core-feature-3 #c3Scene3 .status{
  margin-left:auto;
  font-size:11px;
  color:#26965d;
  background:#eefaf4;
  border:1px solid #d7f1e3;
  padding:6px 9px;
  border-radius:999px;
  font-weight:800;
}
#core-feature-3 #c3Scene3 .chat{
  height:478px;
  padding:24px 22px 34px;
  background:linear-gradient(180deg,#fff 0%,#fffafb 100%);
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
#core-feature-3 #c3Scene3 .chat::-webkit-scrollbar{display:none}
#core-feature-3 #c3Scene3 .bubble{
  display:block;
  width:max-content;
  max-width:78%;
  padding:12px 14px;
  border-radius:16px;
  font-size:14px;
  line-height:1.5;
  margin-bottom:10px;
  opacity:0;
  transform:translateY(10px);
  animation:none !important;
  transition:opacity .4s ease,transform .4s ease;
}
#core-feature-3 #c3Scene3 .bubble.show{opacity:1;transform:none}
#core-feature-3 #c3Scene3 .customer,
#core-feature-3 #c3Scene3 .reply{
  margin-right:auto;
  margin-left:0;
  background:#f1f1f4;
  border:0;
  border-bottom-left-radius:5px;
  box-shadow:none;
}
#core-feature-3 #c3Scene3 .bot{
  margin-left:auto;
  margin-right:0;
  background:#fff;
  border:1px solid #eee5e8;
  border-bottom-right-radius:5px;
  box-shadow:0 5px 18px rgba(31,16,21,.04);
}
#core-feature-3 #c3Scene3 .silent{
  margin:22px auto 9px;
  width:max-content;
  max-width:90%;
  padding:7px 11px;
  border-radius:999px;
  background:#faf3f5;
  color:#9a707c;
  font-size:11px;
  font-weight:800;
  opacity:0;
  transform:translateY(10px);
  animation:none !important;
  transition:opacity .4s ease,transform .4s ease;
}
#core-feature-3 #c3Scene3 .silent.show{opacity:1;transform:none}
#core-feature-3 #c3Scene3 .delay{
  margin:8px auto 13px;
  width:max-content;
  color:#9a9296;
  font-size:11px;
  opacity:0;
  transform:translateY(10px);
  animation:none !important;
  transition:opacity .4s ease,transform .4s ease;
}
#core-feature-3 #c3Scene3 .delay.show{opacity:1;transform:none}
#core-feature-3 #c3Scene3 .follow{
  position:relative;
  margin-left:auto;
  margin-right:0;
  background:#fff;
  border:1px solid #f2ccd6;
  border-bottom-right-radius:5px;
  box-shadow:0 8px 24px rgba(234,25,83,.08);
}
#core-feature-3 #c3Scene3 .tag{
  position:absolute;
  top:-12px;
  left:12px;
  background:#fff0f4;
  color:var(--pink);
  border:1px solid #f6cbd6;
  border-radius:999px;
  padding:3px 7px;
  font-size:9px;
  font-weight:900;
}
#core-feature-3 #c3Scene3 .stop{
  display:flex;
  align-items:center;
  gap:8px;
  width:max-content;
  max-width:92%;
  margin:18px auto 0;
  padding:9px 12px;
  border-radius:12px;
  background:#eefaf4;
  border:1px solid #d7f1e3;
  color:#237c4e;
  font-size:11px;
  font-weight:900;
  opacity:0;
  transform:translateY(10px);
  animation:none !important;
  transition:opacity .4s ease,transform .4s ease;
}
#core-feature-3 #c3Scene3 .stop.show{opacity:1;transform:none}
#core-feature-3 #c3Scene3 .check{
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#2ca568;
  color:#fff;
  font-size:11px;
}

#core-feature-3 #c3Scene3 #c3AlertStop{white-space:nowrap!important;display:inline-flex!important;align-items:center!important;}
#core-feature-3 #c3Scene3 #c3AlertStop.show{display:inline-flex!important;}

/* Core Feature 3 — requested final adjustments */
#core-feature-3 #c3Scene3 #c3AlertStop,
#core-feature-3 #c3Scene3 #c3AlertStop.show{
  display:flex!important;
  width:max-content!important;
  max-width:92%!important;
  margin:18px auto 0!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:center!important;
  white-space:nowrap!important;
}

/* ===== FINAL CTA SECTION ===== */
.final-cta{padding:70px 0 46px;background:#fff}
.final-cta-wrap{max-width:1920px;margin:0 auto;padding:0}
.final-cta-card{position:relative;overflow:hidden;min-height:610px;margin:0;border-radius:0;background:linear-gradient(120deg,#d80d4c 0%,#ef1554 46%,#f45c43 100%);display:flex;align-items:center;justify-content:center;color:#fff}
.final-cta-card:before,.final-cta-card:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.11)}
.final-cta-card:before{width:330px;height:330px;left:-190px;top:-165px}
.final-cta-card:after{width:330px;height:330px;right:-180px;bottom:-200px}
.final-cta-orb{position:absolute;width:680px;height:240px;border-radius:50%;left:50%;bottom:-120px;transform:translateX(-50%);background:rgba(255,255,255,.13)}
.final-cta-inner{position:relative;z-index:2;width:min(820px,90%);text-align:center;padding:70px 24px}
.final-cta-eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;margin-bottom:22px}
.final-cta-title{font-size:54px;line-height:1.3;font-weight:800;letter-spacing:-.8px;margin:0 auto 24px;max-width:780px}
.final-cta-desc{font-size:17px;line-height:1.75;font-weight:400;color:rgba(255,255,255,.92);max-width:760px;margin:0 auto 32px}
.final-cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.final-cta-btn{height:62px;padding:0 26px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:16px;font-weight:700;transition:.25s ease}
.final-cta-btn.primary{background:#fff;color:#EA1953;border:1px solid #fff;box-shadow:0 12px 30px rgba(112,0,37,.18)}
.final-cta-btn.secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.72)}
.final-cta-btn:hover{transform:translateY(-2px)}
@media(max-width:900px){.final-cta{padding-top:54px}.final-cta-card{min-height:540px}.final-cta-title{font-size:42px}.final-cta-desc{font-size:16px}}
@media(max-width:560px){.final-cta{padding-top:40px}.final-cta-card{min-height:500px}.final-cta-inner{padding:58px 18px}.final-cta-title{font-size:34px}.final-cta-desc{font-size:15px}.final-cta-btn{width:100%;max-width:280px}}
/* ===== app.css conflict fixes — neutralize global site styles on this landing =====
   app.css defines `.bubble{position:absolute;pointer-events:none}`,
   `.chat{overflow:auto}` and Bootstrap `.btn`/`.lead` defaults that leak
   into this page because it loads before this file. */
.hero .bubble,
#core-feature-3 #c3Scene3 .bubble{
  position:static;
  pointer-events:auto;
}
.hero .chat{overflow:visible}
.hero .lead{font-weight:400}
.hero .actions .btn{border-width:0}
.hero .actions .btn.secondary{border-width:1px}
.hero .actions .btn{padding:0 22px;line-height:normal;vertical-align:baseline;white-space:normal}