/* =========================================================
   SpeedoOne Desk
   ========================================================= */
:root{
  --green:#1D6B4F; --green-dark:#14523B;
  --ink:#111827; --ink-2:#4B5563; --ink-3:#6B7280;
  --border:#E5E7EB;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:#fff;color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(16px,3.2vw,32px)}
.ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.025em}

/* ---------- nav ---------- */
.dk-nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px)}
.dk-nav-in{display:flex;align-items:center;gap:30px;height:70px}
.dk-lockup{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.dk-lockup svg{width:38px;height:38px}
.dk-lockup i{display:block;font-style:normal;font-size:.7rem;font-weight:700;color:var(--ink);line-height:1}
.dk-lockup b{display:block;font-size:1.3rem;font-weight:850;color:var(--green);letter-spacing:-.02em;line-height:1.05}
.dk-nav nav{display:flex;gap:26px;margin-left:auto}
.dk-nav nav a{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:var(--ink);font-size:1rem;font-weight:600}
.dk-nav nav a:hover{color:var(--green)}
.dk-ask{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  padding:9px 18px;border-radius:9999px;background:#fff;
  border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#40C9B2,#1D6B4F,#A855F7) border-box;
  color:var(--ink);font-size:.92rem;font-weight:750;
}
.dk-ask .ico{color:#A855F7}
@media (max-width:900px){.dk-nav nav{display:none}.dk-ask{margin-left:auto}}

/* ---------- hero scene ---------- */
.dk-hero{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(50px,6vw,90px) 0 0;
  background:linear-gradient(180deg,#BFE0F2 0%,#D8ECF8 40%,#EAF4F8 100%);
}
.dk-scene{position:absolute;inset:0;pointer-events:none}
.dk-cloud{
  position:absolute;background:#fff;border-radius:9999px;opacity:.9;
  box-shadow:30px 8px 0 -6px #fff,-28px 10px 0 -8px #fff;
  animation:dkCloud ease-in-out infinite alternate;
}
.dk-cloud.c1{left:8%;top:12%;width:110px;height:34px;animation-duration:14s}
.dk-cloud.c2{right:12%;top:8%;width:140px;height:40px;animation-duration:18s;animation-delay:-6s}
.dk-cloud.c3{left:44%;top:4%;width:90px;height:28px;animation-duration:16s;animation-delay:-10s;opacity:.7}
@keyframes dkCloud{from{transform:translateX(0)}to{transform:translateX(40px)}}
.dk-mtn{position:absolute;left:0;right:0;bottom:0;width:100%;height:52%}

.dk-hero-in{position:relative;z-index:1;max-width:900px}
.dk-hero h1 .dh{
  display:block;font-size:clamp(2.2rem,5.6vw,4.3rem);font-weight:800;color:#1D5B45;
  opacity:0;transform:translateY(36px);filter:blur(5px);
  animation:dhUp 1.1s cubic-bezier(.16,.68,.3,1) forwards;
}
.dh.l2{animation-delay:.25s}
@keyframes dhUp{to{opacity:1;transform:none;filter:blur(0)}}
.dk-sub{
  margin:24px auto 30px;max-width:62ch;font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.65;color:#1F2937;
  opacity:0;animation:dhFade 1s var(--ease) .6s forwards;
}
@keyframes dhFade{to{opacity:1}}
.dk-cta{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:#EF4444;color:#fff;font-size:.9rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:15px 30px;border-radius:9px;box-shadow:0 12px 30px rgba(239,68,68,.35);
  transition:transform .2s var(--ease),background .2s var(--ease);
  opacity:0;animation:dhFade 1s var(--ease) .85s forwards;
}
.dk-cta:hover{background:#DC2626;transform:translateY(-2px)}

/* ticket mock */
.dk-ticket{
  position:relative;z-index:1;width:min(760px,92vw);margin:clamp(30px,4vw,50px) auto -70px;
  background:#fff;border-radius:16px;padding:18px 20px;text-align:left;
  box-shadow:0 34px 80px rgba(30,60,50,.22);
  opacity:0;transform:translateY(40px);
  animation:dhUp 1s var(--ease) 1s forwards;
}
.dt-head b{font-size:1.15rem;font-weight:800}
.dt-meta{display:flex;gap:12px;margin:6px 0 10px;font-size:.7rem;color:var(--ink-3)}
.dt-meta em{font-style:normal;background:#EEF2F7;border-radius:5px;padding:2px 8px;font-weight:750;color:#374151}
.dt-tabs{display:flex;gap:10px;border-bottom:1px solid var(--border);padding-bottom:8px}
.dt-tabs i{font-style:normal;font-size:.64rem;font-weight:800;color:var(--ink-2)}
.dt-tabs i.on{color:var(--green);border-bottom:2px solid var(--green);padding-bottom:8px;margin-bottom:-9px}
.dt-tabs i:not(.on){width:90px;height:8px;background:#EEF2F7;border-radius:99px;align-self:center}
.dt-msg{border:1px solid var(--border);border-radius:12px;padding:13px 15px;margin-top:12px}
.dt-from{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.dt-ava{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#40C9B2,#1D6B4F);color:#fff;font-size:.7rem}
.dt-from b{font-size:.78rem;font-weight:800}
.dt-from em{font-style:normal;font-size:.64rem;color:var(--ink-3)}
.dt-msg p{margin:0;font-size:.8rem;line-height:1.55;color:#374151}
.dt-chips{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.dt-chips i{font-style:normal;font-size:.62rem;font-weight:750;background:#EEF2F7;border-radius:9999px;padding:4px 11px;color:#374151}
.dt-chips i.g{background:#E3F6EE;color:#0E9F6E}
.dt-reply{margin-top:12px;border:1px solid var(--border);border-radius:9999px;padding:10px 16px;font-size:.76rem;color:#9AA3B2;background:#FAFBFD}

/* ---------- features ---------- */
.dk-feat{padding:130px 0 clamp(50px,6vw,80px);background:#fff;text-align:center}
.dk-feat h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;margin-bottom:clamp(28px,4vw,46px)}
.dk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;text-align:left}
.dk-grid article{
  border:1px solid var(--border);border-radius:14px;padding:22px;background:#fff;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.dk-grid article:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,42,70,.10)}
.df-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;margin-bottom:14px}
.df-ic .ico{width:21px;height:21px}
.df-ic.c-green{background:#E3F6EE;color:#0E9F6E}
.df-ic.c-blue{background:#E8F2FB;color:#1E72B8}
.df-ic.c-amber{background:#FDF1E0;color:#D97706}
.df-ic.c-violet{background:#EDEBFC;color:#6D5AE6}
.dk-grid h3{font-size:1rem;font-weight:750;margin-bottom:8px}
.dk-grid p{margin:0;font-size:.85rem;line-height:1.6;color:var(--ink-2)}
@media (max-width:1000px){.dk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dk-grid{grid-template-columns:1fr}}

/* ---------- close + footer ---------- */
.dk-close{text-align:center;padding:clamp(46px,6vw,80px) 0;background:linear-gradient(135deg,#14523B,#1D6B4F);color:#fff}
.dk-close h2{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:800;margin-bottom:24px}
.dk-close .dk-cta{opacity:1;animation:none;background:#fff;color:#14523B;box-shadow:0 12px 30px rgba(0,0,0,.2)}
.dk-close .dk-cta:hover{background:#EAF6F0}
.dk-ftr{border-top:1px solid var(--border);padding:22px 0}
.dk-ftr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dk-ftr nav{display:flex;gap:18px}
.dk-ftr nav a{text-decoration:none;color:var(--ink-2);font-size:.88rem;font-weight:600}
.dk-ftr nav a:hover{color:var(--green)}
.dk-ftr p{margin:0;color:var(--ink-3);font-size:.82rem}

@media (prefers-reduced-motion:reduce){
  .dk-cloud,.dk-hero h1 .dh,.dk-sub,.dk-cta,.dk-ticket{animation:none;opacity:1;transform:none;filter:none}
}

/* Desk lockup + accents in logo blues (green removed from brand) */
.dk-lockup i{color:#27568E}
.dk-lockup b{color:#1E72B8}
.dk-nav nav a:hover{color:#1E72B8}
.dk-ftr nav a:hover{color:#1E72B8}

/* Desk accent recolored — violet identity */
.dk-hero h1 .dh{color:#5B21B6}
.dt-tabs i.on{color:#6D28D9;border-bottom-color:#6D28D9}
.dt-ava{background:linear-gradient(135deg,#A78BFA,#6D28D9)}
.dt-chips i.g{background:#EDE9FE;color:#6D28D9}
.dk-close{background:linear-gradient(135deg,#3B1B7A,#6D28D9)}
.dk-close .dk-cta{color:#3B1B7A}
.dk-close .dk-cta:hover{background:#F3EEFE}
.dk-lockup b{color:#6D28D9}
.dk-nav nav a:hover,.dk-ftr nav a:hover{color:#6D28D9}
.df-ic.c-green{background:#EDE9FE;color:#6D28D9}

/* Desk accent v2 — warm teal-ocean identity */
.dk-hero h1 .dh{color:#0F766E}
.dt-tabs i.on{color:#0D9488;border-bottom-color:#0D9488}
.dt-ava{background:linear-gradient(135deg,#5EEAD4,#0D9488)}
.dt-chips i.g{background:#CCFBF1;color:#0F766E}
.dk-close{background:linear-gradient(135deg,#134E4A,#0D9488)}
.dk-close .dk-cta{color:#134E4A}
.dk-close .dk-cta:hover{background:#ECFDF9}
.dk-lockup b{color:#0D9488}
.dk-nav nav a:hover,.dk-ftr nav a:hover{color:#0D9488}
.df-ic.c-green{background:#CCFBF1;color:#0F766E}

/* =========================================================
   PREMIUM ANIMATION PASS
   ========================================================= */
/* sun glow */
.dk-scene::before{
  content:"";position:absolute;right:14%;top:8%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,#FFF6D8 0%,rgba(255,238,180,.7) 40%,transparent 70%);
  animation:dkSun 6s ease-in-out infinite;
}
@keyframes dkSun{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.15);opacity:1}}
/* gliding birds */
.dk-scene::after{
  content:"";position:absolute;left:-60px;top:22%;width:34px;height:12px;
  background:
    radial-gradient(14px 7px at 8px 6px,transparent 5.5px,#41546B 6px,transparent 7.5px),
    radial-gradient(14px 7px at 26px 6px,transparent 5.5px,#41546B 6px,transparent 7.5px);
  clip-path:inset(0 0 50% 0);
  animation:dkBird 26s linear infinite;
  opacity:.7;
}
@keyframes dkBird{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(60vw,-30px) scale(.8)}
  100%{transform:translate(120vw,10px) scale(.65)}
}
/* headline shimmer */
.dk-hero h1 .dh{
  background:linear-gradient(90deg,#0F766E 0%,#14B8A6 30%,#0F766E 60%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:dhUp 1.1s cubic-bezier(.16,.68,.3,1) forwards,dkShine 6s ease-in-out 1.6s infinite;
}
@keyframes dkShine{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
/* ticket: float after entrance + chip pops */
.dk-ticket{animation:dhUp 1s var(--ease) 1s forwards,dkTFloat 7s ease-in-out 2.4s infinite}
@keyframes dkTFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.dt-chips i{opacity:0;transform:scale(.7);animation:dkChip .45s var(--ease) forwards}
.dt-chips i:nth-child(1){animation-delay:1.7s}
.dt-chips i:nth-child(2){animation-delay:1.9s}
.dt-chips i:nth-child(3){animation-delay:2.1s}
@keyframes dkChip{to{opacity:1;transform:scale(1)}}
.dt-ava{animation:dkAva 3s ease-in-out infinite}
@keyframes dkAva{0%,100%{box-shadow:0 0 0 0 rgba(13,148,136,.4)}50%{box-shadow:0 0 0 8px rgba(13,148,136,0)}}
/* reply bar caret pulse */
.dt-reply{position:relative}
.dt-reply::after{content:"";display:inline-block;width:1.5px;height:12px;background:#0D9488;margin-left:4px;vertical-align:-2px;animation:dkCaret 1.1s steps(1) infinite}
@keyframes dkCaret{50%{opacity:0}}
/* feature cards entrance */
.dk-grid article{opacity:0;transform:translateY(20px);animation:dkFeatIn .7s var(--ease) forwards}
.dk-grid article:nth-child(1){animation-delay:.1s}
.dk-grid article:nth-child(2){animation-delay:.22s}
.dk-grid article:nth-child(3){animation-delay:.34s}
.dk-grid article:nth-child(4){animation-delay:.46s}
@keyframes dkFeatIn{to{opacity:1;transform:none}}
.df-ic{transition:transform .2s var(--ease)}
.dk-grid article:hover .df-ic{transform:scale(1.1) rotate(-4deg)}
@media (prefers-reduced-motion:reduce){
  .dk-scene::before,.dk-scene::after,.dk-ticket,.dt-chips i,.dt-ava,.dt-reply::after,.dk-grid article,.dk-hero h1 .dh{animation:none;opacity:1;transform:none}
}

/* little birds — flapping wings, gliding flock */
.dk-scene::after{display:none} /* old static pair replaced */
.dk-bird{position:absolute;width:26px;height:9px;left:-40px;animation:dkGlide linear infinite}
.dk-bird::before,.dk-bird::after{
  content:"";position:absolute;top:0;width:13px;height:9px;
  border-top:2.6px solid #3E5470;border-radius:50% 50% 0 0;
}
.dk-bird::before{left:0;transform-origin:100% 100%;animation:dkFlapL .5s ease-in-out infinite alternate}
.dk-bird::after{right:0;transform-origin:0 100%;animation:dkFlapR .5s ease-in-out infinite alternate}
@keyframes dkFlapL{from{transform:rotate(14deg)}to{transform:rotate(-16deg)}}
@keyframes dkFlapR{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
@keyframes dkGlide{
  0%{transform:translate(0,0) scale(var(--bs,1))}
  30%{transform:translate(36vw,-26px) scale(var(--bs,1))}
  60%{transform:translate(72vw,6px) scale(var(--bs,1))}
  100%{transform:translate(115vw,-14px) scale(var(--bs,1))}
}
.dk-bird.b1{top:16%;--bs:1;animation-duration:24s}
.dk-bird.b2{top:12%;--bs:.7;animation-duration:30s;animation-delay:-8s}
.dk-bird.b3{top:24%;--bs:.85;animation-duration:27s;animation-delay:-16s}
.dk-bird.b4{top:9%;--bs:.55;animation-duration:34s;animation-delay:-22s;opacity:.7}
.dk-bird.b5{top:20%;--bs:.65;animation-duration:21s;animation-delay:-4s;opacity:.8}
@media (prefers-reduced-motion:reduce){.dk-bird{display:none}}

/* colourful birds */
.dk-bird::before,.dk-bird::after{border-top-color:var(--bc,#3E5470)}
.dk-bird.b1{--bc:#E0517A}
.dk-bird.b2{--bc:#1E72B8}
.dk-bird.b3{--bc:#D97706}
.dk-bird.b4{--bc:#0D9488}
.dk-bird.b5{--bc:#7C3AED}

/* =========================================================
   NEVER MISS — accordion + green ticket mock
   ========================================================= */
.dk-miss{padding:150px 0 clamp(50px,6vw,84px);background:#fff}
.dk-miss h2{text-align:center;font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:800;color:#0F766E;margin-bottom:clamp(30px,4vw,50px)}
.dm-in{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(20px,2.6vw,36px);align-items:start}
.dm-acc{display:grid;gap:16px}
.dm-item{
  border-radius:18px;background:#E9F8EE;padding:20px 22px;
  transition:background .25s var(--ease),box-shadow .25s var(--ease);
}
.dm-item.on{background:#FBE7EE;box-shadow:0 14px 34px rgba(120,40,70,.10)}
.dm-item button{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:none;border:0;padding:0;cursor:pointer;font:inherit;text-align:left;
}
.dm-item b{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:750;color:#111;line-height:1.3}
.dm-item i{font-style:normal;color:#374151;font-size:1rem;transition:transform .25s var(--ease)}
.dm-item.on i{transform:rotate(180deg)}
.dm-item p{
  margin:0;max-height:0;overflow:hidden;opacity:0;
  font-size:.95rem;line-height:1.6;color:#374151;
  transition:max-height .35s var(--ease),opacity .3s var(--ease),margin .3s var(--ease);
}
.dm-item.on p{max-height:140px;opacity:1;margin-top:12px}
/* mock */
.dm-mock{
  position:relative;border-radius:20px;padding:22px 0 0 22px;overflow:hidden;
  background:radial-gradient(120% 100% at 15% 10%,#1C8A66 0%,#0F6B4C 55%,#0A5238 100%);
  box-shadow:0 30px 70px rgba(10,80,60,.3);
}
.dm-channels{display:flex;gap:14px;margin-bottom:10px}
.dm-channels span{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;
  font-size:20px;box-shadow:0 8px 20px rgba(0,0,0,.18);
  animation:dmPop .5s var(--ease) both,dkTFloat 5s ease-in-out infinite;
}
.dm-channels span:nth-child(1){animation-delay:.1s,-1s}
.dm-channels span:nth-child(2){animation-delay:.2s,-2s}
.dm-channels span:nth-child(3){animation-delay:.3s,-3s}
.dm-channels span:nth-child(4){animation-delay:.4s,-1.5s}
.dm-channels span:nth-child(5){animation-delay:.5s,-2.5s}
@keyframes dmPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.dm-avas{display:flex;gap:8px;justify-content:flex-end;padding-right:22px;margin-bottom:10px}
.dm-avas i{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:#fff;color:#0F6B4C;font-style:normal;font-size:.7rem;font-weight:800;
  border:2px solid #FCD34D;
}
.dm-panel{display:grid;grid-template-columns:46px minmax(0,1fr);background:transparent}
.dm-rail{display:flex;flex-direction:column;gap:14px;align-items:center;background:#2A3248;border-radius:12px 0 0 0;padding:16px 0}
.dm-rail span{font-size:15px;opacity:.85}
.dm-list{background:#F6F8FB;border-radius:0 12px 0 0;padding:12px 14px}
.dm-lhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.dm-lhead b{font-size:.76rem;font-weight:800;color:#111}
.dm-lhead span{font-size:.6rem;color:#6B7280}
.dm-row{
  display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #E7EAF0;border-radius:10px;
  padding:10px 12px;margin-bottom:8px;
  animation:dmRow .6s var(--ease) both;
}
.dm-row:nth-child(2){animation-delay:.15s}
.dm-row:nth-child(3){animation-delay:.3s}
.dm-row:nth-child(4){animation-delay:.45s}
@keyframes dmRow{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.dm-ric{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#EEF2F7;font-size:14px;flex:0 0 auto}
.dm-row > div{min-width:0;flex:1}
.dm-row b{display:block;font-size:.74rem;font-weight:750;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-row small{font-size:.6rem;color:#6B7280}
.dm-row em{font-style:normal;font-size:.62rem;font-weight:750;border-radius:6px;padding:3px 10px;white-space:nowrap}
.dm-row em.open{color:#DC2626;border:1px solid #FCA5A5;background:#FEF2F2}
.dm-row em.hold{color:#D97706;border:1px solid #FCD34D;background:#FFFBEB}
.dm-row em.closed{color:#374151;border:1px solid #D1D5DB;background:#F9FAFB}
.dm-skel{display:grid;gap:8px;padding:6px 2px 14px}
.dm-skel i{height:9px;border-radius:99px;background:#E3E8EF}
.dm-skel i:nth-child(2){width:70%}
.dm-skel i:nth-child(3){width:45%}
@media (max-width:860px){
  .dm-in{grid-template-columns:1fr}
  .dk-miss{padding-top:120px}
  .dm-channels span{width:38px;height:38px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){.dm-channels span,.dm-row{animation:none;opacity:1}}

/* brand channel icons */
.dm-channels span{padding:6px}
.dm-channels svg{width:100%;height:100%;display:block}

/* clean monochrome rail + row icons */
.dm-rail span{width:20px;height:20px;opacity:1}
.dm-rail svg{width:100%;height:100%;fill:none;stroke:#C7D0E4;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dm-ric svg{width:16px;height:16px;fill:none;stroke:#4B5563;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* never-miss: animate when scrolled into view */
.dm-mock{opacity:0;transform:translateY(36px)}
.dk-miss.in .dm-mock{animation:dhUp .9s var(--ease) forwards}
.dm-channels span{opacity:0;animation:none}
.dk-miss.in .dm-channels span{animation:dmPop .5s var(--ease) both,dkTFloat 5s ease-in-out infinite}
.dk-miss.in .dm-channels span:nth-child(1){animation-delay:.5s,-1s}
.dk-miss.in .dm-channels span:nth-child(2){animation-delay:.65s,-2s}
.dk-miss.in .dm-channels span:nth-child(3){animation-delay:.8s,-3s}
.dk-miss.in .dm-channels span:nth-child(4){animation-delay:.95s,-1.5s}
.dm-avas i{opacity:0;transform:scale(.5)}
.dk-miss.in .dm-avas i{animation:dmPop .45s var(--ease) forwards}
.dk-miss.in .dm-avas i:nth-child(1){animation-delay:.7s}
.dk-miss.in .dm-avas i:nth-child(2){animation-delay:.8s}
.dk-miss.in .dm-avas i:nth-child(3){animation-delay:.9s}
.dk-miss.in .dm-avas i:nth-child(4){animation-delay:1s}
.dk-miss.in .dm-avas i:nth-child(5){animation-delay:1.1s}
.dm-row{opacity:0;animation:none}
.dk-miss.in .dm-row{animation:dmRow .6s var(--ease) both}
.dk-miss.in .dm-row:nth-child(2){animation-delay:1s}
.dk-miss.in .dm-row:nth-child(3){animation-delay:1.2s}
.dk-miss.in .dm-row:nth-child(4){animation-delay:1.4s}
.dm-item{opacity:0;transform:translateX(-24px)}
.dk-miss.in .dm-item{animation:dmAccIn .6s var(--ease) forwards}
.dk-miss.in .dm-item:nth-child(1){animation-delay:.1s}
.dk-miss.in .dm-item:nth-child(2){animation-delay:.25s}
.dk-miss.in .dm-item:nth-child(3){animation-delay:.4s}
@keyframes dmAccIn{to{opacity:1;transform:none}}
/* status chips pulse once visible */
.dk-miss.in .dm-row em.open{animation:dmRow .6s var(--ease) both,dkAva 2.6s ease-in-out 2s infinite}
@media (prefers-reduced-motion:reduce){
  .dm-mock,.dm-channels span,.dm-avas i,.dm-row,.dm-item{opacity:1;transform:none;animation:none!important}
}

/* trust marquee — white logo cards */
.dk-trust{padding:clamp(44px,5.5vw,76px) 0;background:#F7FAF9;overflow:hidden}
.dk-trust h2{font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:750;color:#0F766E;margin-bottom:clamp(26px,3.5vw,44px)}
.dk-marq{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.dk-track{display:flex;width:max-content;animation:dkMarq 32s linear infinite}
.dk-marq:hover .dk-track{animation-play-state:paused}
@keyframes dkMarq{to{transform:translateX(-50%)}}
.dk-logo{
  display:grid;place-items:center;text-align:center;min-width:220px;padding:26px 34px;
  background:#fff;border-radius:16px;margin-right:26px;
  box-shadow:0 10px 26px rgba(16,60,50,.07),0 2px 6px rgba(16,60,50,.05);
}
.dk-logo b{font-size:1.3rem;font-weight:850;color:var(--bc,#111);letter-spacing:.02em;white-space:nowrap}
.dk-logo i{display:block;font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.2em;color:#8A93A3;margin-top:2px}
@media (max-width:640px){.dk-logo{min-width:160px;padding:18px 24px}.dk-logo b{font-size:1.05rem}}

/* trust sits after hero ticket overlap; miss section relax */
.dk-trust{padding-top:150px}
.dk-miss{padding-top:clamp(50px,6vw,84px)}

.dk-trust h2{text-align:center}

/* smaller brand cards */
.dk-logo{min-width:170px;padding:18px 26px;border-radius:13px;margin-right:20px}
.dk-logo b{font-size:1.05rem}
.dk-logo i{font-size:.54rem}

/* =========================================================
   NEVER-MISS mock v2
   ========================================================= */
/* connector stubs under channel icons */
.dm-channels{position:relative;padding-bottom:14px}
.dm-channels span{position:relative}
.dm-channels span i{
  position:absolute;left:50%;top:100%;width:1.5px;height:16px;
  background:rgba(255,255,255,.5);
}
.dm-channels::after{
  content:"";position:absolute;left:22px;right:30%;bottom:0;height:1.5px;
  background:rgba(255,255,255,.35);
}
/* avatar badges + varied colors */
.dm-avas i{position:relative;overflow:visible}
.dm-avas i em{
  position:absolute;right:-6px;bottom:-4px;font-style:normal;font-size:13px;line-height:1;
}
.a-p1{background:linear-gradient(135deg,#F6C6CE,#E89CA8)!important;color:#7A2338!important}
.a-p2{background:linear-gradient(135deg,#C9DEF5,#9CBCE8)!important;color:#1D3F6E!important}
.a-p3{background:linear-gradient(135deg,#D8CCF2,#B49CE8)!important;color:#43297A!important}
.a-p4{background:linear-gradient(135deg,#C4EBD8,#8FD4B0)!important;color:#14532D!important}
.a-p5{background:linear-gradient(135deg,#FBE3B8,#F0C070)!important;color:#7A4B12!important}
/* floating white icon column on green */
.dm-float-ics{
  position:absolute;left:22px;top:150px;display:flex;flex-direction:column;gap:13px;z-index:2;
}
.dm-float-ics span{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
  opacity:0;transform:scale(.5);
}
.dk-miss.in .dm-float-ics span{animation:dmPop .45s var(--ease) forwards}
.dk-miss.in .dm-float-ics span:nth-child(1){animation-delay:.6s}
.dk-miss.in .dm-float-ics span:nth-child(2){animation-delay:.72s}
.dk-miss.in .dm-float-ics span:nth-child(3){animation-delay:.84s}
.dk-miss.in .dm-float-ics span:nth-child(4){animation-delay:.96s}
.dk-miss.in .dm-float-ics span:nth-child(5){animation-delay:1.08s}
.dm-float-ics svg{width:20px;height:20px;fill:none;stroke:#374151;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* panel shifts right to clear icon column */
.dm-panel{margin-left:64px;grid-template-columns:56px minmax(0,1fr)}
/* labeled dark rail */
.dm-rail{gap:4px;padding:12px 0}
.dm-rail span{
  display:grid;justify-items:center;gap:3px;width:100%;padding:7px 0;opacity:1;
}
.dm-rail span.on{background:#3B4462;border-left:2.5px solid #7FB2F0}
.dm-rail span b{font-size:.44rem;font-weight:700;color:#B9C2D4;text-align:center;line-height:1.2;max-width:50px}
.dm-rail svg{width:16px;height:16px}
/* richer rows */
.dm-meta{display:flex;align-items:center;gap:9px;white-space:nowrap}
.dm-meta i{font-style:normal;font-size:.66rem;color:#8A93A3}
.dm-meta sup{font-size:.5rem;color:#4B5563;font-weight:700}
.dm-row em{cursor:default}
@media (max-width:860px){
  .dm-float-ics{display:none}
  .dm-panel{margin-left:0}
}

/* =========================================================
   AI + HUMAN — pink→green gradient, twin ticket mocks
   ========================================================= */
.dk-ai{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(50px,6vw,90px) 0 clamp(50px,6vw,84px);
  background:
    radial-gradient(60% 80% at 0% 60%,rgba(244,180,205,.55),transparent 70%),
    radial-gradient(60% 80% at 100% 60%,rgba(140,220,180,.55),transparent 70%),
    linear-gradient(180deg,#FBF7F5 0%,#F4F1EE 100%);
}
.da-spark{position:absolute;color:#fff;text-shadow:0 0 8px rgba(255,255,255,.9);font-size:26px;animation:daTwinkle 3.4s ease-in-out infinite}
.da-spark.s1{left:8%;top:38%}
.da-spark.s2{left:46%;top:52%;font-size:18px;animation-delay:-1.2s}
.da-spark.s3{right:10%;top:30%;font-size:22px;animation-delay:-2.2s}
@keyframes daTwinkle{0%,100%{opacity:.3;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.1) rotate(20deg)}}
.dk-ai h2{font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:800;color:#0F766E}
.da-sub{margin:20px auto 26px;max-width:72ch;font-size:clamp(.96rem,1.3vw,1.15rem);line-height:1.7;color:#1F2937}
.da-cta{
  display:inline-block;text-decoration:none;color:#0D9488;border:1.5px solid #0D9488;border-radius:10px;
  padding:14px 34px;font-size:.9rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#fff;
  transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.da-cta:hover{background:#0D9488;color:#fff;transform:translateY(-2px)}

.da-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.5vw,60px);margin-top:clamp(36px,5vw,64px);text-align:left}
.da-label{
  font-family:"Segoe Script","Comic Sans MS",cursive;
  font-size:clamp(1.05rem,1.6vw,1.4rem);font-weight:700;color:#1F2937;margin-bottom:16px;
}
.da-label em{
  font-style:normal;display:inline-block;padding:6px 16px;border-radius:12px;background:#fff;margin-left:8px;
  border:2px solid transparent;
}
.lb-ai{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#F5C518,#F06E9A) border-box}
.lb-hu{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#0D9488,#F5A25E) border-box}
/* left card */
.da-owner{
  display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px 14px 0 0;
  padding:14px 16px;width:min(320px,90%);
  box-shadow:0 14px 34px rgba(30,60,50,.10);
}
.da-badge{
  display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:linear-gradient(135deg,#0D9488,#134E4A);color:#fff;
  border:2.5px solid #fff;outline:2px solid #F06E9A;
}
.da-owner small{display:block;font-size:.68rem;color:var(--ink-3)}
.da-owner b{font-size:.86rem;font-weight:750}
.da-chat{
  background:#fff;border-radius:0 14px 14px 14px;padding:6px 0;
  box-shadow:0 22px 50px rgba(30,60,50,.12);
}
.da-msg{padding:14px 18px;border-bottom:1px solid #F0F2F5}
.da-msg:last-child{border-bottom:0}
.da-from{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.da-ava{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:#EEF2F7;color:#374151;font-size:.62rem;font-weight:800;
}
.da-ava.sp{background:#fff;border:1.5px solid #F5C518;color:#0D9488}
.da-ava.sp .ico{width:15px;height:15px}
.da-from b{font-size:.8rem;font-weight:800}
.da-from em{font-style:normal;font-size:.64rem;color:var(--ink-3)}
.da-msg p{margin:0;font-size:.82rem;line-height:1.55;color:#374151}
/* right card */
.da-ticket{
  background:#fff;border-radius:16px;padding:16px 18px;
  box-shadow:0 22px 50px rgba(30,60,50,.14);
}
.da-thead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.da-thead b{font-size:1rem;font-weight:800}
.da-reply{background:#2A63E8;color:#fff;border-radius:7px;padding:6px 13px;font-size:.68rem;font-weight:750;white-space:nowrap}
.da-skel{display:flex;gap:10px;margin-bottom:12px}
.da-skel i{flex:1;height:9px;border-radius:99px;background:#EEF2F7}
.da-tabs{display:flex;gap:16px;border-bottom:1px solid var(--border);margin-bottom:14px}
.da-tabs i{font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-bottom:8px}
.da-tabs i.on{color:#111;border-bottom:2px solid #111}
.da-assist{border:1.5px solid #F5C08A;border-radius:12px;padding:13px 15px}
.da-ahead{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.da-zia{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;border:1.5px solid #0D9488;color:#0D9488}
.da-zia .ico{width:16px;height:16px}
.da-ahead b{font-size:.84rem;font-weight:800;margin-right:auto}
.da-abtn{font-size:.64rem;font-weight:750;border:1px solid #D8DFE8;border-radius:7px;padding:5px 10px;color:#374151;background:#fff;white-space:nowrap}
.da-abtn.pri{border-color:#F0655A;color:#F0655A}
.da-assist p{margin:0 0 12px;font-size:.8rem;line-height:1.6;color:#374151}
.da-ins{display:flex;align-items:center;gap:10px;border-top:1px dashed #E3E8EF;padding-top:10px;flex-wrap:wrap}
.da-ins b{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;color:#0D9488}
.da-ins b .ico{width:14px;height:14px}
.da-ins span{font-size:.68rem;font-weight:700;color:#374151;background:#F4F6FA;border-radius:7px;padding:4px 11px}
/* entrance */
.da-col{opacity:0;transform:translateY(28px)}
.dk-ai.in .da-col{animation:dhUp .8s var(--ease) forwards}
.dk-ai.in .da-col:nth-child(2){animation-delay:.2s}
@media (max-width:860px){.da-cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.da-spark{animation:none}.da-col{opacity:1;transform:none;animation:none!important}}

/* =========================================================
   AI + HUMAN v2 — closer to reference reference
   ========================================================= */
.dk-ai{
  background:
    linear-gradient(90deg,rgba(243,164,196,.75) 0%,rgba(247,220,232,.35) 22%,rgba(248,246,243,0) 42%,rgba(248,246,243,0) 58%,rgba(178,226,198,.4) 78%,rgba(110,200,150,.75) 100%),
    #F8F6F3;
}
/* big faint rounded outline shapes */
.da-ring{position:absolute;border:1.5px solid rgba(120,130,140,.16);border-radius:80px;pointer-events:none}
.da-ring.r1{left:6%;right:6%;top:34%;height:120%}
.da-ring.r2{left:14%;right:14%;top:44%;height:120%;border-radius:110px;border-color:rgba(120,130,140,.10)}
/* 4-point star sparkles */
.da-spark{
  width:22px;height:22px;font-size:0;
  background:radial-gradient(circle,#fff 18%,transparent 40%);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  background:#fff;opacity:.9;
}
.da-spark.s4{left:30%;top:70%;position:absolute;animation:daTwinkle 3.4s ease-in-out -0.6s infinite}
/* left floating big badge */
.da-ownwrap{position:relative;width:min(340px,92%);margin-bottom:0}
.da-bigbadge{
  position:absolute;left:-34px;top:50%;translate:0 -50%;z-index:2;
  display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#fff;
  box-shadow:0 14px 34px rgba(30,60,50,.14);
}
.da-bigbadge i{
  display:grid;place-items:center;width:52px;height:52px;border-radius:15px;
  background:linear-gradient(135deg,#0D9488,#134E4A);color:#fff;
  font-style:normal;
  outline:2.5px solid #F06E9A;outline-offset:2px;
}
.da-bigbadge .ico{width:24px;height:24px}
.da-owner{
  display:block;border-radius:14px 14px 0 0;padding:16px 16px 16px 68px;width:100%;
}
.da-chat{width:min(420px,100%);margin-top:2px}
.da-ava{position:relative}
.da-ava u{
  position:absolute;right:-3px;top:-3px;text-decoration:none;
  display:grid;place-items:center;width:12px;height:12px;border-radius:50%;
  background:#16A34A;color:#fff;font-size:7px;
}
/* right card v2 */
.da-hbtns{display:flex;align-items:center;gap:7px}
.da-icbtn{
  display:grid;place-items:center;width:28px;height:28px;border-radius:7px;
  border:1px solid #D8DFE8;background:#fff;font-size:13px;font-style:normal;
}
.da-icbtn.ai{color:#0D9488;border-color:#0D9488}
.da-reply b{font-weight:400}
.da-assist{position:relative;margin-left:26px;padding-left:34px}
.da-zia{
  position:absolute;left:-26px;top:14px;
  width:52px;height:52px;border:1.5px solid #0D9488;background:#fff;border-radius:50%;
  display:grid;place-items:center;color:#0D9488;
  box-shadow:0 8px 20px rgba(13,148,136,.18);
}
.da-zia .ico{width:22px;height:22px}
.da-inschip{
  display:inline-flex;align-items:center;gap:7px;margin:12px 0 0 30px;
  background:#fff;border:1px solid #E3E8EF;border-radius:10px;padding:8px 16px;
  font-size:.76rem;font-weight:800;color:#111;
  box-shadow:0 8px 20px rgba(30,60,50,.08);position:relative;z-index:1;
}
.da-inschip .ico{width:15px;height:15px;color:#0D9488}
.da-inspanel{
  display:flex;gap:34px;background:#fff;border-radius:12px 12px 0 0;
  margin:-6px 0 -16px 18px;padding:18px 22px 22px;
  border:1px solid #EEF1F5;border-bottom:0;
  box-shadow:0 -6px 20px rgba(30,60,50,.05);
}
.da-inspanel span{font-size:.8rem;font-weight:750;color:#0F766E}
@media (max-width:860px){
  .da-bigbadge{left:-10px;width:70px;height:70px}
  .da-owner{padding-left:70px}
  .da-assist{margin-left:14px}
}

/* =========================================================
   AI+HUMAN premium bg + text animation
   ========================================================= */
/* breathing side washes */
.dk-ai{background-size:180% 100%;animation:daWash 16s ease-in-out infinite alternate}
@keyframes daWash{from{background-position:0% 50%}to{background-position:100% 50%}}
/* rings drift */
.da-ring{animation:daRingDrift 12s ease-in-out infinite alternate}
.da-ring.r2{animation-duration:16s;animation-delay:-6s}
@keyframes daRingDrift{from{transform:translateY(0)}to{transform:translateY(-22px)}}
/* text entrance (plays when section scrolls in) */
.dk-ai h2,.da-sub,.da-cta{opacity:0}
.dk-ai h2{transform:translateY(30px);filter:blur(5px)}
.dk-ai.in h2{animation:daTxtUp 1s cubic-bezier(.16,.68,.3,1) .05s forwards}
.da-sub{transform:translateY(16px)}
.dk-ai.in .da-sub{animation:daTxtUp .9s cubic-bezier(.16,.68,.3,1) .35s forwards}
.dk-ai.in .da-cta{animation:daTxtUp .9s cubic-bezier(.16,.68,.3,1) .6s forwards}
@keyframes daTxtUp{to{opacity:1;transform:none;filter:blur(0)}}
/* heading gradient shimmer after entrance */
.dk-ai.in h2{
  background:linear-gradient(90deg,#0F766E 0%,#0D9488 40%,#134E4A 70%,#0F766E 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:daTxtUp 1s cubic-bezier(.16,.68,.3,1) .05s forwards,daShine 7s ease-in-out 1.4s infinite;
}
@keyframes daShine{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
/* handwritten labels slide-in, pills pop */
.da-label{opacity:0;transform:translateX(-20px)}
.dk-ai.in .da-label{animation:daLbl .7s var(--ease) .5s forwards}
.dk-ai.in .da-col:nth-child(2) .da-label{animation-delay:.7s}
@keyframes daLbl{to{opacity:1;transform:none}}
.da-label em{display:inline-block;transform:scale(.6);opacity:0}
.dk-ai.in .da-label em{animation:daPillPop .5s cubic-bezier(.34,1.56,.64,1) .9s forwards}
.dk-ai.in .da-col:nth-child(2) .da-label em{animation-delay:1.1s}
@keyframes daPillPop{to{opacity:1;transform:scale(1)}}
/* big badge + zia circle gentle pulse */
.da-bigbadge{animation:daBadgeFloat 5s ease-in-out infinite}
@keyframes daBadgeFloat{0%,100%{translate:0 -50%}50%{translate:0 calc(-50% - 7px)}}
.da-zia{animation:daZiaPulse 3.2s ease-in-out infinite}
@keyframes daZiaPulse{
  0%,100%{box-shadow:0 8px 20px rgba(13,148,136,.18),0 0 0 0 rgba(13,148,136,.25)}
  50%{box-shadow:0 8px 20px rgba(13,148,136,.18),0 0 0 9px rgba(13,148,136,0)}
}
/* extra drifting sparkle */
.da-spark.s2{animation:daTwinkle 3.4s ease-in-out -1.2s infinite,daSparkDrift 14s ease-in-out infinite alternate}
@keyframes daSparkDrift{from{margin-left:0}to{margin-left:60px}}
@media (prefers-reduced-motion:reduce){
  .dk-ai,.da-ring,.da-bigbadge,.da-zia,.da-spark{animation:none!important}
  .dk-ai h2,.da-sub,.da-cta,.da-label,.da-label em{opacity:1;transform:none;filter:none;animation:none!important}
}

/* star field */
.da-spark{position:absolute;animation:daTwinkle 3.4s ease-in-out infinite,daStarFloat 9s ease-in-out infinite alternate}
.da-spark.s5{left:16%;top:58%;width:14px;height:14px;animation-delay:-.8s,-2s}
.da-spark.s6{left:24%;top:26%;width:18px;height:18px;animation-delay:-1.6s,-5s}
.da-spark.s7{left:58%;top:36%;width:12px;height:12px;animation-delay:-2.4s,-1s}
.da-spark.s8{left:68%;top:64%;width:20px;height:20px;animation-delay:-.4s,-6s}
.da-spark.s9{left:84%;top:48%;width:14px;height:14px;animation-delay:-2.9s,-3s}
.da-spark.s10{left:40%;top:14%;width:16px;height:16px;animation-delay:-1.1s,-7s}
.da-spark.s11{left:6%;top:80%;width:12px;height:12px;animation-delay:-3.1s,-4s}
.da-spark.s12{left:92%;top:76%;width:18px;height:18px;animation-delay:-2s,-8s}
@keyframes daStarFloat{from{transform:translateY(0)}to{transform:translateY(-18px)}}
@media (prefers-reduced-motion:reduce){.da-spark{animation:none!important}}

/* green stars — visible on white center */
.da-spark{background:#34D399;filter:drop-shadow(0 0 6px rgba(52,211,153,.7))}

/* =========================================================
   WHERE WORK SIMPLY FLOWS — dark band, scroll cards
   ========================================================= */
.dk-flow{background:#07322B;padding:clamp(50px,6vw,90px) 0;overflow:hidden}
.fl-hd{max-width:640px;margin-bottom:clamp(30px,4vw,50px)}
.fl-hd h2{font-size:clamp(1.9rem,3.8vw,3rem);font-weight:800;color:#F5F1DC}
.fl-hd p{margin:16px 0 0;font-size:clamp(.98rem,1.3vw,1.15rem);line-height:1.7;color:#CFE3DC}
.fl-row{
  display:flex;gap:clamp(16px,2vw,30px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:10px;scrollbar-width:none;
}
.fl-row::-webkit-scrollbar{display:none}
.fl-card{
  flex:0 0 min(400px,86vw);scroll-snap-align:start;
  border-radius:20px;padding:clamp(22px,2.6vw,34px);min-height:520px;
  background:linear-gradient(180deg,#F7F4EA 0%,#E8EFE2 45%,#8FD4B0 100%);
  display:flex;flex-direction:column;
  transition:transform .25s var(--ease);
}
.fl-card:hover{transform:translateY(-6px)}
.fl-card h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:750;color:#111;margin-bottom:14px}
.fl-card > p{margin:0 0 22px;font-size:.95rem;line-height:1.65;color:#1F2937}
.fl-mock{margin-top:auto;position:relative}
.fm-box{background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 14px 34px rgba(10,60,45,.12)}
.fm-box small{display:block;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6B7280;margin-bottom:8px}
.fm-box.sm{margin-top:10px}
.fm-line{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #E7EAF0;border-radius:8px;padding:8px 11px;font-size:.76rem;font-weight:650;color:#1F2937}
.fm-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.fm-two b{display:block;font-size:.74rem;font-weight:750;color:#111;margin-bottom:8px}
.fm-ts{display:flex;align-items:center;gap:7px;font-size:.7rem;color:#374151}
.fm-ts i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px dashed #9AA3B2;font-style:normal;font-size:.56rem;font-weight:800}
.fm-mem{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:650;background:#F4F6FA;border-radius:9999px;padding:4px 12px 4px 4px;margin-bottom:6px;width:max-content}
.fm-mem u,.fm-post u,.fm-reply u{
  text-decoration:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-size:.5rem;font-weight:800;color:#fff;flex:0 0 auto;
}
u.m1{background:linear-gradient(135deg,#0D9488,#134E4A)}
u.m2{background:linear-gradient(135deg,#7C8AF0,#4C5AC9)}
.fm-input{border:1px solid #E7EAF0;border-radius:9999px;padding:8px 13px;font-size:.7rem;color:#9AA3B2;background:#FAFBFD;margin-bottom:10px}
.fm-post b{display:flex;align-items:center;gap:7px;font-size:.74rem;font-weight:800;color:#111}
.fm-post b em{font-style:normal;font-weight:600;color:#6B7280;font-size:.68rem}
.fm-post > span{display:block;margin:7px 0 3px;font-size:.72rem;color:#374151}
.fm-post a{font-size:.68rem;font-weight:750;color:#1E72B8}
.fm-reply{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:#FAFBFD;border:1px solid #EEF1F5;border-radius:9px;padding:8px 10px;margin-top:8px;font-size:.7rem;color:#374151}
.fm-reply b{font-weight:750}
.fm-reply i{font-style:normal;font-size:.56rem;font-weight:800;color:#B45309;background:#FEF3C7;border-radius:5px;padding:2px 7px}
/* orchestrate flow nodes */
.fm-flow{min-height:220px}
.fn{
  position:absolute;background:#fff;border-radius:9999px;padding:8px 16px;
  font-size:.72rem;font-weight:750;color:#111;box-shadow:0 8px 20px rgba(10,60,45,.12);
}
.fn.dark{background:#123B33;color:#fff}
.fn.warm{background:#FBEFDC}
.fn em{position:absolute;top:-10px;right:-14px;font-style:normal;font-size:.52rem;font-weight:800;color:#fff;background:#EF4444;border-radius:9999px;padding:2px 8px}
.fn.n1{left:6%;top:0}
.fn.n2{left:0;top:26%}
.fn.n3{left:38%;top:26%}
.fn.n4{left:30%;top:58%}
.fn.n5{left:28%;top:84%}
.fm-wires{position:absolute;inset:0;width:100%;height:100%}
.fm-wires path{stroke:#1F5148;opacity:.5}
/* commit */
.fm-when{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#fff;
  font-size:.78rem;font-weight:750;box-shadow:0 10px 24px rgba(10,60,45,.14);margin-bottom:-14px;position:relative;z-index:1;
}
.fm-tgl{display:inline-block;width:30px;height:17px;border-radius:9999px;background:#CBD5E1;position:relative}
.fm-tgl i{position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff}
.fm-big{display:block;font-size:1.1rem;font-weight:800;color:#111}
/* nav arrows */
.fl-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.fl-nav button{
  width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(245,241,220,.4);
  background:transparent;color:#F5F1DC;font-size:1.3rem;cursor:pointer;
  transition:background .2s var(--ease);
}
.fl-nav button:hover{background:rgba(245,241,220,.15)}
/* entrance */
.fl-card{opacity:0;transform:translateY(30px)}
.dk-flow.in .fl-card{animation:dhUp .8s var(--ease) forwards}
.dk-flow.in .fl-card:nth-child(2){animation-delay:.15s}
.dk-flow.in .fl-card:nth-child(3){animation-delay:.3s}
.dk-flow.in .fl-card:nth-child(4){animation-delay:.45s}
@media (prefers-reduced-motion:reduce){.fl-card{opacity:1;transform:none;animation:none!important}}

/* =========================================================
   FLOWS v2 — full picture: 4-up, bleeding mocks, richer
   ========================================================= */
.fl-card{
  flex:0 0 clamp(300px,23.5vw,380px);min-height:620px;
  overflow:hidden;padding-bottom:0;
}
@media (min-width:1500px){.fl-row{justify-content:center}}
.fl-mock{margin-top:auto}
.fm-box.bleed{width:118%;border-radius:14px 0 0 0;box-shadow:0 14px 34px rgba(10,60,45,.14)}
/* collaborate extras */
.fm-post .inl{display:inline;font-size:inherit}
.fm-reply.pub{background:#EAF2FD;border-color:#D3E3F8}
.fm-reply i.b{color:#1E72B8;background:#DBEAFE}
.fm-reply s{display:block;flex:1 1 100%;height:8px;border-radius:99px;background:#C7DCF5;text-decoration:none;margin-top:4px}
/* orchestrate v2 */
.fm-flow{min-height:270px}
.fn.yellow{background:#F5E663}
.fn.cut{right:-14%;left:auto;border-radius:9999px 0 0 9999px}
.fn.n1{left:6%;top:2%}
.fn.n2{left:0;top:22%}
.fn.n3{left:44%;top:22%}
.fn.n4{left:26%;top:52%}
.fn.n5{left:26%;top:74%}
.fn.n6{top:52%}
.fn.n7{left:56%;top:90%}
/* commit v2 */
.fm-sla{min-height:280px;position:relative}
.fm-when{position:absolute;z-index:1}
.fm-when.w1{left:4%;top:6%}
.fm-when.sq{border-radius:12px;width:70px;height:56px;font-size:.72rem}
.fm-when.w2{left:2%;top:52%}
.fm-box.sla1{position:absolute;left:26%;top:0;width:80%}
.fm-box.sla2{position:absolute;left:26%;top:46%}
.fm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.fm-grid small{margin-bottom:2px}
.fm-grid b{display:block;font-size:.76rem;font-weight:750;color:#111}
.fm-skl{height:8px;border-radius:99px;background:#E3E8EF;margin-top:10px}
.fm-skl.short{width:60%}
@media (max-width:860px){
  .fl-card{flex-basis:86vw;min-height:560px}
  .fm-box.bleed{width:100%}
  .fn.cut{right:0}
}

/* bigger nav logo */
.dk-lockup svg{width:48px;height:48px}
.dk-lockup i{font-size:.8rem}
.dk-lockup b{font-size:1.55rem}
.dk-nav-in{height:78px}

/* ============ DESK NAV DROPDOWNS (teal) ============ */
.dk-nav nav{display:flex;gap:24px;align-items:center}
.csd{position:relative}
.csd button{
  display:inline-flex;align-items:center;gap:5px;background:none;border:0;
  font:inherit;font-size:1.05rem;font-weight:650;color:var(--ink);cursor:pointer;padding:8px 2px;
  position:relative;transition:color .18s var(--ease);
}
.csd button::after{
  content:"";position:absolute;left:2px;right:18px;bottom:2px;height:2.5px;border-radius:99px;
  background:#0D9488;transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
.csd:hover button::after,.csd.open button::after{transform:scaleX(1)}
.csd button:hover{color:#0D9488}
.csd .chev{width:14px;height:14px;color:var(--ink-3);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--ease),color .18s var(--ease)}
.csd:hover .chev,.csd.open .chev{transform:rotate(180deg);color:#0D9488}
.csd-panel{
  position:absolute;left:-10px;top:calc(100% + 12px);min-width:210px;
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;
  box-shadow:0 24px 56px rgba(13,60,50,.16),0 3px 10px rgba(13,60,50,.06);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top left;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
  z-index:80;
}
.csd.open .csd-panel{opacity:1;visibility:visible;transform:none}
.csd-cap{display:block;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:4px 10px 8px}
.csd-panel a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;margin:1px 0;border-radius:8px;
  text-decoration:none;color:var(--ink);font-size:.95rem;font-weight:600;white-space:nowrap;
  transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease);
}
.csd-panel a:hover{background:#F0FDFA;color:#0D9488;transform:translateX(3px)}
.csd-panel .ico{width:18px;height:18px;flex:0 0 18px;color:var(--ink-3);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.csd-panel a:hover .ico{color:#0D9488}
@media (hover:hover) and (pointer:fine){
  .csd:hover .csd-panel,.csd:focus-within .csd-panel{opacity:1;visibility:visible;transform:none}
  .csd:hover button{color:#0D9488}
}
.csd-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
@media (max-width:860px){.dk-nav nav{display:none}}
/* active dropdown item — teal */
.csd-panel a{position:relative}
.csd-panel a.on{background:#E0F2F1;color:#0D9488;font-weight:750}
.csd-panel a.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:99px;background:#0D9488}
.csd-panel a.on .ico{color:#0D9488}

/* All Products button + dropdown overlay */
.dk-allp{
  display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:1.05rem;font-weight:650;color:var(--ink);padding:8px 2px;position:relative;
  transition:color .18s var(--ease);
}
.dk-allp::after{
  content:"";position:absolute;left:2px;right:18px;bottom:2px;height:2.5px;border-radius:99px;
  background:#0D9488;transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
.dk-allp:hover{color:#0D9488}
.dk-allp:hover::after{transform:scaleX(1)}
.dk-allp .chev{width:14px;height:14px;color:var(--ink-3);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--ease),color .18s var(--ease)}
.dk-allp:hover .chev{transform:rotate(180deg);color:#0D9488}
@keyframes dkAllpFade{from{opacity:0}}
#allp-ov{
  position:fixed;left:0;right:0;top:78px;bottom:0;z-index:120;
  background:rgba(15,23,42,.35);
  animation:dkAllpFade .25s var(--ease);
}
#allp-frame{
  width:100%;height:min(78vh,700px);border:0;display:block;background:#fff;
  border-radius:0 0 18px 18px;box-shadow:0 34px 70px rgba(15,23,42,.3);
}
#allp-ov[hidden]{display:none}

/* nav right — search / language / sign in (like CRM) */
.dk-nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.dk-nav-in nav{margin-left:auto}
.dk-nav-in .dk-nav-right{margin-left:0}
.dk-ico-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--ink);text-decoration:none;transition:color .18s var(--ease)}
.dk-ico-btn:hover{background:#F0FDFA;color:#0D9488}
.dk-ico-btn .ico{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.dk-lang{display:inline-flex;align-items:center;gap:7px;font-size:1rem;font-weight:600;color:var(--ink)}
.dk-lang .ico{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.dk-signin{text-decoration:none;color:#E42527;font-size:1rem;font-weight:700;letter-spacing:.01em}
.dk-signin:hover{text-decoration:underline}
@media (max-width:1160px){.dk-lang{display:none}}
@media (max-width:640px){.dk-signin{display:none}}
/* layout like CRM: dropdown links left near lockup, right group pushed right */
.dk-nav-in nav{margin-left:6px}
.dk-nav-in .dk-nav-right{margin-left:auto}

/* ============ TWO-TIER NAV (like CRM) ============ */
.dk-topnav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.dk-topnav .wrap{max-width:none;padding-inline:clamp(14px,1.6vw,28px)}
.dk-topnav-in{display:flex;align-items:center;gap:18px;height:70px}
.dk-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.dk-brand svg{width:36px;height:36px}
.dk-brand b{font-size:1.28rem;font-weight:800;letter-spacing:-.02em;color:#27568E}
.dk-brand b span{color:#1E72B8}
.dk-links{display:flex;gap:24px;margin-left:18px;align-items:center}
.dk-links a{
  position:relative;text-decoration:none;color:var(--ink);font-size:1.1rem;font-weight:600;padding:6px 2px;
}
.dk-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;border-radius:99px;
  background:#0D9488;transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
.dk-links a:hover{color:#0D9488}
.dk-links a:hover::after{transform:scaleX(1)}
.dk-links a.on{color:#0D9488;font-weight:800}
.dk-links a.on::after{transform:scaleX(1)}
.dk-allp2{
  display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:1.1rem;font-weight:650;color:#1F2937;padding:6px 2px;transition:color .18s var(--ease);
}
.dk-allp2:hover{color:#0D9488}
.dk-allp2 .chev{width:14px;height:14px;color:var(--ink-3);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--ease),color .18s var(--ease)}
.dk-allp2:hover .chev{transform:rotate(180deg);color:#0D9488}
@media (max-width:920px){.dk-links{display:none}}

/* sub-nav band */
@keyframes dkAurora{from{background-position:0% 50%}to{background-position:100% 50%}}
.dk-subnav{
  position:relative;z-index:60;border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,rgba(178,240,228,.6) 0%,rgba(198,236,240,.55) 40%,rgba(214,236,232,.5) 70%,rgba(226,240,236,.55) 100%);
  background-size:220% 100%;animation:dkAurora 22s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion:reduce){.dk-subnav{animation:none}}
.dk-subnav .wrap{max-width:1560px;margin-inline:auto;padding-inline:clamp(24px,7vw,150px)}
.dk-subnav-in{display:flex;align-items:center;gap:30px;padding-block:16px}
.dk-subnav .dk-lockup{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;border-radius:14px;transition:background .2s var(--ease)}
.dk-subnav .dk-lockup:hover{background:rgba(255,255,255,.55)}
.dk-subnav .dk-lockup svg{width:54px;height:54px;filter:drop-shadow(0 3px 8px rgba(13,148,136,.2))}
.dk-subnav .dk-lockup i{display:block;font-style:normal;font-size:1.05rem;font-weight:850;color:#27568E;line-height:1}
.dk-subnav .dk-lockup b{display:block;font-size:1.15rem;font-weight:500;letter-spacing:-.02em;line-height:1.1;color:#27568E}
.dk-subnav nav{display:flex;gap:24px;margin-left:auto;align-items:center}
.dk-subnav .dk-ask{margin-left:0}
@media (max-width:960px){.dk-subnav nav{display:none}.dk-subnav .dk-ask{margin-left:auto}}

/* allp overlay under 70px top bar */
#allp-ov{top:70px}
/* top navbar height 59px */
.dk-topnav-in{height:59px}
.dk-brand svg{width:32px;height:32px}
.dk-brand b{font-size:1.18rem}
.dk-links a,.dk-allp2{font-size:1.02rem}
#allp-ov{top:59px}
/* revert navbar size */
.dk-topnav-in{height:70px}
.dk-brand svg{width:36px;height:36px}
.dk-brand b{font-size:1.28rem}
.dk-links a,.dk-allp2{font-size:1.1rem}
#allp-ov{top:70px}
/* sub-nav band — compact 59px */
.dk-subnav-in{padding-block:4px;min-height:59px}
.dk-subnav .dk-lockup{padding:3px 12px 3px 6px}
.dk-subnav .dk-lockup svg{width:42px;height:42px}
.dk-subnav .dk-lockup i{font-size:.92rem}
.dk-subnav .dk-lockup b{font-size:1.05rem}
.dk-subnav .csd button{padding:6px 2px;font-size:1.02rem}
.dk-subnav .dk-ask{padding:7px 16px;font-size:.88rem}

/* ============ LOGO-BLUE THEME PASS ============ */
:root{--green:#1E72B8;--green-dark:#27568E}
.dk-hero h1 .dh{color:#27568E}
.dk-cta{background:linear-gradient(135deg,#1E72B8,#27568E);box-shadow:0 12px 30px rgba(30,114,184,.35)}
.dk-cta:hover{background:linear-gradient(135deg,#1B67A6,#204A7C)}
.dk-close{background:linear-gradient(135deg,#27568E,#1E72B8)}
.dk-close .dk-cta{background:#fff;color:#27568E}
.dt-tabs i.on{color:#1E72B8;border-bottom-color:#1E72B8}
.dt-ava{background:linear-gradient(135deg,#7FB4E4,#1E72B8)}
.dk-lockup b{color:#27568E}
.dk-nav nav a:hover,.dk-ftr nav a:hover{color:#1E72B8}
/* dropdowns + top nav accents → blue */
.csd button:hover,.csd:hover button{color:#1E72B8}
.csd button::after{background:#1E72B8}
.csd:hover .chev,.csd.open .chev{color:#1E72B8}
.csd-panel a:hover{background:#F0F6FC;color:#1E72B8}
.csd-panel a:hover .ico{color:#1E72B8}
.csd-panel a.on{background:#E8F1FA;color:#1E72B8}
.csd-panel a.on::before{background:#1E72B8}
.csd-panel a.on .ico{color:#1E72B8}
.dk-links a:hover,.dk-links a.on{color:#1E72B8}
.dk-links a::after{background:#1E72B8}
.dk-allp2:hover{color:#1E72B8}
.dk-allp2:hover .chev{color:#1E72B8}
.dk-ico-btn:hover{background:#F0F6FC;color:#1E72B8}
/* sub-nav band → blue pastel like CRM */
.dk-subnav{background:linear-gradient(90deg,rgba(198,226,240,.6) 0%,rgba(214,220,240,.55) 40%,rgba(186,214,238,.55) 70%,rgba(226,222,238,.55) 100%);background-size:220% 100%}
.dk-subnav .dk-lockup svg{filter:drop-shadow(0 3px 8px rgba(39,86,142,.22))}

/* =========================================================
   Channels — "Support customers across channels"
   ========================================================= */
.dk-ch{padding:clamp(50px,6vw,84px) 0 clamp(40px,5vw,64px);background:#fff}
.dc-hd{max-width:640px;margin-bottom:clamp(28px,4vw,52px)}
.dc-hd h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:800;margin-bottom:14px}
.dc-hd p{margin:0;color:var(--ink-2);font-size:1.05rem;line-height:1.65}
.dc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.6vw,32px)}
.dc-card{
  background:#F5F6F8;border-radius:16px;padding:clamp(28px,4vw,56px) clamp(20px,3vw,40px) 0;
  text-align:center;display:flex;flex-direction:column;align-items:center;overflow:hidden;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.dc-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,42,70,.08)}
.dc-card h3{margin:0 0 6px;font-size:1.5rem;font-weight:800}
.dc-card p{margin:0 0 18px;max-width:300px;color:var(--ink-2);line-height:1.55}
.dc-wl,.dc-lm{display:inline-flex;align-items:center;gap:7px;font-weight:750;font-size:.92rem;text-decoration:none;margin-bottom:clamp(26px,3vw,44px)}
.dc-wl{color:var(--ink)}
.dc-wl .ico{width:20px;height:20px}
.dc-wl:hover{color:var(--green)}
.dc-lm{color:#1E72B8;text-decoration:underline}
.dc-mock{width:100%;max-width:340px;margin-top:auto;text-align:left}

/* email alias form */
.dc-mail{background:#CDEBDF;border:1px solid #9FD6C0;border-radius:12px 12px 0 0;padding:26px 24px 22px}
.dc-mail label{display:block;font-size:.78rem;color:#3F5F52;margin-bottom:6px}
.dc-in{background:#fff;border:1px solid #BFD9CE;border-radius:6px;padding:8px 12px;font-size:.86rem;font-weight:600;margin-bottom:16px}
.dc-in.split{display:flex;padding:0;overflow:hidden}
.dc-in.split span{flex:1;padding:8px 12px}
.dc-in.split b{background:#1F2937;color:#fff;font-weight:600;font-size:.8rem;padding:8px 12px}
.dc-btns{display:flex;gap:8px}
.dc-btns i{font-style:normal;font-size:.8rem;font-weight:700;border-radius:6px;padding:8px 18px}
.dc-btns .add{background:#2C8CDB;color:#fff}
.dc-btns .cancel{background:#1F2937;color:#fff}

/* phone */
.dc-phone{display:flex;justify-content:center}
.dc-ph{
  width:170px;background:#fff;border:6px solid #111;border-bottom:0;border-radius:22px 22px 0 0;
  padding:12px 12px 22px;text-align:center;box-shadow:0 18px 40px rgba(16,42,70,.14);
}
.dc-ph em{display:block;width:34px;height:4px;border-radius:2px;background:#111;margin:0 auto 12px}
.dc-ph small{display:block;text-align:left;font-size:.62rem;font-weight:700;margin-bottom:12px}
.dc-av{width:74px;height:74px;border-radius:50%;margin:0 auto 10px;padding:5px;border:2px solid #DCE6F0}
.dc-av span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;font-weight:800;font-size:1.1rem}
.dc-ph b{display:block;font-size:.9rem;font-weight:800}
.dc-ph u{display:block;text-decoration:none;font-size:.62rem;color:var(--ink-3);margin-bottom:14px}
.dc-ans{display:flex;justify-content:space-between;padding:0 6px}
.dc-ans i{font-style:normal;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.55rem;font-weight:700}
.dc-ans i .ico{width:34px;height:34px;padding:8px;border-radius:50%;border:2px solid currentColor}
.dc-ans .ok{color:#16A34A}
.dc-ans .no{color:#E23B3B}

/* social */
.dc-social{background:#fff;border:1px solid var(--border);border-radius:12px 12px 0 0;padding:18px;box-shadow:0 18px 40px rgba(16,42,70,.10)}
.dc-post{display:flex;gap:10px;align-items:flex-start}
.dc-x{width:30px;height:30px;border-radius:8px;background:#111;color:#fff;display:grid;place-items:center;font-weight:900;font-size:.9rem;flex:0 0 auto}
.dc-post b{display:block;font-size:.8rem}
.dc-post p{margin:2px 0 0;font-size:.82rem;color:var(--ink-2);line-height:1.45;max-width:none}
.dc-arrow{font-size:.68rem;color:var(--ink-3);font-weight:700;margin:12px 0 8px;text-align:center}
.dc-tkt{border:1px solid var(--border);border-left:3px solid var(--green);border-radius:8px;padding:10px 12px;background:#F7FAF9}
.dc-tkt b{display:block;font-size:.8rem}
.dc-tkt span{font-size:.7rem;color:var(--ink-3)}
.dc-tkt u{text-decoration:none;font-size:.62rem;font-weight:800;border-radius:9999px;padding:2px 9px;background:#FBF0DC;color:#9A5B04}

/* chat */
.dc-chat{background:#fff;border:1px solid var(--border);border-radius:12px 12px 0 0;padding:18px;display:grid;gap:8px;box-shadow:0 18px 40px rgba(16,42,70,.10)}
.dc-msg{max-width:82%;padding:8px 12px;border-radius:12px;font-size:.8rem;line-height:1.45}
.dc-msg.them{background:#F0F3F7;color:var(--ink);border-bottom-left-radius:3px}
.dc-msg.me{background:var(--green);color:#fff;justify-self:end;border-bottom-right-radius:3px}
.dc-typing{margin-top:6px;border:1px solid var(--border);border-radius:9999px;padding:8px 14px;font-size:.76rem;color:var(--ink-3)}

/* knowledge base */
.dc-kb{background:#fff;border:1px solid var(--border);border-radius:12px 12px 0 0;padding:18px;box-shadow:0 18px 40px rgba(16,42,70,.10)}
.dc-search{border:1px solid var(--border);border-radius:9999px;padding:9px 14px;font-size:.8rem;color:var(--ink-2);background:#F7FAF9;margin-bottom:12px}
.dc-art{padding:10px 0;border-bottom:1px solid #F0F2F5}
.dc-art:last-child{border-bottom:0}
.dc-art b{display:block;font-size:.82rem;color:var(--green)}
.dc-art span{font-size:.68rem;color:var(--ink-3)}

/* remote */
.dc-scr{border-radius:10px 10px 0 0;overflow:hidden;border:1px solid var(--border);box-shadow:0 18px 40px rgba(16,42,70,.12)}
.dc-scr-bar{display:flex;align-items:center;gap:5px;background:#E9EDF2;padding:7px 10px;font-size:.62rem;color:var(--ink-2)}
.dc-scr-bar i{width:8px;height:8px;border-radius:50%}
.dc-scr-bar i:nth-child(1){background:#FF5F57}.dc-scr-bar i:nth-child(2){background:#FEBC2E}.dc-scr-bar i:nth-child(3){background:#28C840}
.dc-scr-bar span{margin-left:6px}
.dc-scr-body{position:relative;height:120px;background:linear-gradient(135deg,#DCEFE6,#EEF5F1)}
.dc-win{position:absolute;left:14%;top:18%;width:56%;height:58%;background:#fff;border-radius:6px;box-shadow:0 6px 16px rgba(16,42,70,.12)}
.dc-cursor{position:absolute;left:44%;top:48%;width:0;height:0;border-left:7px solid #111;border-top:5px solid transparent;border-bottom:5px solid transparent;animation:dcCursor 3s ease-in-out infinite}
@keyframes dcCursor{0%,100%{transform:translate(0,0) rotate(-30deg)}50%{transform:translate(28px,-18px) rotate(-30deg)}}
.dc-sess{display:flex;justify-content:space-between;align-items:center;background:#111;color:#fff;padding:8px 12px;font-size:.66rem}
.dc-sess b{color:#28C840}
.dc-sess span{color:#CBD5E1}

@media (max-width:760px){.dc-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dc-cursor{animation:none}}