/* ADS Helpdesk marketing overrides: requested 2026-07 */

.home-v2 .nav-actions{
  gap:10px;
}

.home-v2,
.inner-v2{
  overflow-x:hidden;
}

.home-v2 .nav-actions .auth-link{
  min-height:40px;
  padding:0 16px;
  border-color:var(--border);
  border-radius:999px;
  background:var(--card);
  color:var(--foreground);
  font-size:13px;
  box-shadow:none;
}

.home-v2 .nav-actions .auth-btn{
  min-height:40px;
  padding:0 18px;
  border-radius:999px;
  background:var(--primary);
  color:var(--primary-foreground);
  font-size:13px;
  box-shadow:none;
}

.home-v2 .solid-btn:hover,
.inner-v2 .solid-btn:hover,
.home-v2 .outline-btn:hover,
.inner-v2 .outline-btn:hover,
.g-pill:hover,
.g-art-card:hover,
.g-pop-list a:hover,
.g-topic-card:hover,
.g-cat-card:hover,
.who-card:hover,
.feature-card:hover,
.integration-tile:hover,
  .testi-card:hover,
  .price-card:hover,
  .sec-pillar:hover,
  .mini-stat-card:hover,
  .sup-metric:hover,
  .habit-card:hover,
  .core-bento-card:hover,
  .queue-card:hover,
  .audience-card:hover{
  transform:none;
}

.home-v2 .outline-btn:hover,
.inner-v2 .outline-btn:hover{
  background:#f8fafc;
  color:var(--foreground);
  border-color:#cbd5e1;
  box-shadow:none;
}

.home-v2 .solid-btn:hover,
.inner-v2 .solid-btn:hover{
  background:color-mix(in oklab,var(--primary) 88%,#000);
  box-shadow:none;
}

.g-art-card:hover,
.g-pop-list a:hover,
.g-topic-card:hover,
.g-cat-card:hover,
.who-card:hover,
.feature-card:hover,
.integration-tile:hover,
  .testi-card:hover,
  .price-card:hover,
  .sec-pillar:hover,
  .queue-card:hover,
  .audience-card:hover{
  box-shadow:var(--shadow-xs);
}

.integrations-section .integration-tile:hover{
  border-color:var(--border);
  background:var(--card);
}

.inner-v2 .page-hero{
  padding-bottom:72px;
  border-bottom:0;
}

.features-core-section{
  margin-top:-1px;
  padding-top:42px;
  padding-bottom:72px;
  background:var(--card);
}

.core-bento-grid{
  display:grid;
  grid-template-columns:minmax(330px,1fr) repeat(2,minmax(280px,1fr));
  gap:20px;
  align-items:stretch;
  padding:0;
  border-radius:24px;
  max-width:100%;
  min-width:0;
}

.core-bento-card{
  position:relative;
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
  min-height:292px;
  padding:32px 34px;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:var(--foreground);
  isolation:isolate;
}

.core-bento-card.reveal,
.habit-card.reveal,
.habits-head.reveal{
  opacity:1;
  transform:none;
}

.core-bento-large{
  grid-row:span 2;
  min-height:604px;
}

.core-bento-copy{
  position:relative;
  z-index:4;
  max-width:min(100%,520px);
}

.core-bento-card:not(.core-bento-large) .core-bento-copy{
  max-width:62%;
}

.core-bento-card h2{
  margin:0;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  color:var(--foreground);
  font-size:clamp(30px,1.8vw,36px);
  line-height:1.08;
  letter-spacing:0;
  text-wrap:balance;
}

.core-bento-card p{
  max-width:42ch;
  margin:12px 0 0;
  color:#334155;
  font-size:clamp(16px,0.95vw,19px);
  font-weight:500;
  line-height:1.42;
  display:block;
  overflow:visible;
  text-wrap:pretty;
}

.core-bento-card p strong{
  font-weight:900;
}

.core-bento-arrow{
  width:38px;
  height:38px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  position:absolute;
  top:26px;
  right:26px;
  left:auto;
  bottom:auto;
  z-index:6;
  flex:0 0 auto;
  background:#0f172a;
  color:#fff;
  font-size:0;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(15,23,42,.18);
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.core-bento-arrow::before{
  content:"\2192";
  color:#fff;
  font-size:19px;
  line-height:1;
  transform:translateY(-1px);
}

.core-bento-arrow:hover{
  transform:translateY(-1px);
  background:#020617;
  box-shadow:0 14px 26px rgba(15,23,42,.22);
}

.arrow-top-right{
  inset:26px 26px auto auto;
}

.arrow-bottom-left{
  inset:26px 26px auto auto;
}

.arrow-left-mid{
  inset:26px 26px auto auto;
}

.tint-mint{background:linear-gradient(180deg,#ecfeff 0,#fff 78%);color:var(--foreground)}
.tint-lime{background:linear-gradient(180deg,#fefce8 0,#fff 78%);color:var(--foreground)}
.tint-pink{background:linear-gradient(180deg,#fdf2f8 0,#fff 78%);color:var(--foreground)}
.tint-cream{background:linear-gradient(180deg,#fffbeb 0,#fff 78%);color:var(--foreground)}
.tint-green{background:linear-gradient(180deg,#ecfdf5 0,#fff 78%);color:var(--foreground)}

.core-bento-img{
  position:absolute;
  z-index:2;
  display:block;
  max-width:none;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 16px 24px rgba(15,23,42,.12));
  animation:feature-float 7s ease-in-out infinite;
}

.core-bento-img-large{
  right:8px;
  bottom:-10px;
  width:min(66%,390px);
}

.ai-bot-img{
  right:54px;
  bottom:4px;
  width:min(32%,160px);
}

.route-img{
  right:34px;
  bottom:22px;
  width:min(36%,178px);
}

.knowledge-img{
  right:24px;
  bottom:6px;
  width:min(34%,170px);
}

.sentiment-img{
  right:28px;
  bottom:4px;
  width:min(41%,220px);
}

.core-motion{
  position:absolute;
  z-index:1;
  pointer-events:none;
}

.motion-intake{
  right:42px;
  bottom:138px;
  width:260px;
  height:150px;
  opacity:.72;
}

.motion-intake span{
  position:absolute;
  width:56px;
  height:38px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:12px;
  background:rgba(255,255,255,.64);
  box-shadow:0 10px 22px rgba(15,23,42,.08);
  animation:intake-slide 4.8s ease-in-out infinite;
}

.motion-intake span:first-child{left:0;top:18px}
.motion-intake span:nth-child(2){left:68px;top:72px;animation-delay:.4s}
.motion-intake span:nth-child(3){left:24px;top:104px;animation-delay:.8s}
.motion-intake i{
  position:absolute;
  right:0;
  top:44px;
  width:108px;
  height:64px;
  border:2px solid rgba(6,52,58,.18);
  border-radius:18px;
}

.motion-ai{
  right:34px;
  bottom:42px;
  width:230px;
  height:126px;
}

.motion-ai span{
  position:absolute;
  right:82px;
  width:92px;
  height:26px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
  box-shadow:0 10px 18px rgba(15,23,42,.08);
  animation:reply-pulse 3.8s ease-in-out infinite;
}

.motion-ai span:first-child{top:10px}
.motion-ai span:nth-child(2){top:48px;width:118px;animation-delay:.45s}
.motion-ai i{
  position:absolute;
  right:2px;
  top:8px;
  width:48px;
  height:48px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(167,139,250,.45),rgba(255,255,255,.5));
  animation:reply-pulse 3.8s ease-in-out infinite .8s;
}

.motion-route{
  right:42px;
  bottom:38px;
  width:210px;
  height:150px;
}

.motion-route::before{
  content:"";
  position:absolute;
  inset:34px 34px 34px 34px;
  border-top:3px solid rgba(128,16,79,.18);
  border-right:3px solid rgba(128,16,79,.18);
  border-radius:0 42px 0 0;
}

.motion-route span{
  position:absolute;
  width:26px;
  height:26px;
  border-radius:999px;
  background:#fff;
  border:6px solid rgba(167,139,250,.8);
  box-shadow:0 10px 18px rgba(15,23,42,.1);
  animation:node-pop 4.2s ease-in-out infinite;
}

.motion-route span:first-child{left:18px;top:62px}
.motion-route span:nth-child(2){right:12px;top:22px;animation-delay:.45s}
.motion-route span:nth-child(3){right:34px;bottom:8px;animation-delay:.9s}
.motion-route i{
  position:absolute;
  left:94px;
  top:66px;
  width:12px;
  height:12px;
  border-radius:999px;
  background:#f59e0b;
  animation:route-dot 4.2s ease-in-out infinite;
}

.motion-knowledge{
  right:120px;
  bottom:66px;
  width:140px;
  height:128px;
  opacity:.78;
}

.motion-knowledge span{
  position:absolute;
  width:86px;
  height:104px;
  border:1px solid rgba(15,23,42,.16);
  border-radius:12px;
  background:rgba(255,255,255,.68);
  box-shadow:0 10px 18px rgba(15,23,42,.08);
  animation:doc-lift 5s ease-in-out infinite;
}

.motion-knowledge span:first-child{left:0;top:18px}
.motion-knowledge span:nth-child(2){left:24px;top:8px;animation-delay:.45s}
.motion-knowledge span:nth-child(3){left:48px;top:0;animation-delay:.9s}

.motion-sentiment{
  right:40px;
  bottom:34px;
  width:230px;
  height:140px;
}

.motion-sentiment span{
  position:absolute;
  bottom:18px;
  width:34px;
  border-radius:14px 14px 8px 8px;
  background:rgba(255,255,255,.62);
  box-shadow:0 10px 18px rgba(15,23,42,.08);
  animation:meter-rise 3.8s ease-in-out infinite;
}

.motion-sentiment span:first-child{left:28px;height:54px;background:rgba(250,204,21,.58)}
.motion-sentiment span:nth-child(2){left:80px;height:82px;background:rgba(251,146,60,.58);animation-delay:.25s}
.motion-sentiment span:nth-child(3){left:132px;height:110px;background:rgba(248,113,113,.58);animation-delay:.5s}
.motion-sentiment i{
  position:absolute;
  left:18px;
  right:24px;
  bottom:16px;
  height:3px;
  border-radius:999px;
  background:rgba(15,23,42,.16);
}

@keyframes feature-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-8px,0)}
}

@keyframes intake-slide{
  0%,100%{transform:translate3d(0,0,0);opacity:.75}
  50%{transform:translate3d(14px,-4px,0);opacity:1}
}

@keyframes reply-pulse{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.04);opacity:1}
}

@keyframes node-pop{
  0%,100%{transform:scale(.92)}
  50%{transform:scale(1.06)}
}

@keyframes route-dot{
  0%{transform:translate3d(-58px,0,0);opacity:.35}
  50%{transform:translate3d(34px,-42px,0);opacity:1}
  100%{transform:translate3d(68px,40px,0);opacity:.35}
}

@keyframes doc-lift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

@keyframes meter-rise{
  0%,100%{transform:scaleY(.88);transform-origin:bottom}
  50%{transform:scaleY(1);transform-origin:bottom}
}

.queue-peek-section{
  padding-top:72px;
  padding-bottom:78px;
  background:var(--card);
}

.queue-slider{
  display:grid;
  grid-template-columns:repeat(4,minmax(260px,1fr));
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}

.queue-slider::-webkit-scrollbar{
  display:none;
}

.queue-card{
  position:relative;
  min-height:342px;
  padding:24px;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  scroll-snap-align:start;
  background:var(--card);
  box-shadow:var(--shadow-xs);
  display:flex;
  flex-direction:column;
  cursor:pointer;
}

.queue-card-intake{background:linear-gradient(180deg,#ecfeff 0,#fff 82%)}
.queue-card-ai{background:linear-gradient(180deg,#fefce8 0,#fff 82%)}
.queue-card-route{background:linear-gradient(180deg,#fdf2f8 0,#fff 82%)}
.queue-card-sla{background:linear-gradient(180deg,#f0fdf4 0,#fff 82%)}

.queue-step{
  position:relative;
  z-index:2;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(15,23,42,.1);
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:var(--foreground);
  font-size:12px;
  font-weight:900;
}

.queue-card h3{
  position:relative;
  z-index:2;
  margin:126px 0 10px;
  color:var(--foreground);
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:22px;
  line-height:1.16;
  letter-spacing:0;
}

.queue-card p{
  position:relative;
  z-index:2;
  margin:0;
  color:var(--muted-foreground);
  font-size:15px;
  line-height:1.55;
  font-weight:500;
}

.queue-card>a{
  position:absolute;
  inset:0;
  z-index:5;
  display:block;
  border-radius:inherit;
  color:transparent;
  font-size:0;
  text-decoration:none;
}

.queue-card>a::before{
  content:"\2192";
  position:absolute;
  right:24px;
  bottom:22px;
  color:#0f172a;
  font-size:24px;
  font-weight:900;
  line-height:1;
}

.audience-card>a{
  position:absolute;
  inset:0;
  z-index:5;
  display:block;
  border-radius:inherit;
  color:transparent;
  font-size:0;
  text-decoration:none;
}

/* Arrow now lives in the card header (.ac-arrow); overlay stays invisible. */

.queue-motion{
  position:absolute;
  z-index:1;
  pointer-events:none;
}

.qm-intake{
  top:82px;
  left:24px;
  right:24px;
  width:auto;
  height:72px;
}

.qm-intake span{
  position:absolute;
  width:72px;
  height:28px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(14,116,144,.12);
  box-shadow:0 10px 18px rgba(15,23,42,.08);
  animation:intake-slide 5s ease-in-out infinite;
}

.qm-intake span:first-child{left:0;top:6px}
.qm-intake span:nth-child(2){left:54px;top:28px;animation-delay:.35s}
.qm-intake span:nth-child(3){left:18px;top:50px;animation-delay:.7s}

.qm-ai{
  top:82px;
  left:24px;
  right:24px;
  width:auto;
  height:76px;
}

.qm-ai span{
  position:absolute;
  left:0;
  width:104px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 18px rgba(15,23,42,.08);
  animation:reply-pulse 4s ease-in-out infinite;
}

.qm-ai span:first-child{top:10px}
.qm-ai span:nth-child(2){top:46px;width:128px;animation-delay:.4s}
.qm-ai i{
  position:absolute;
  right:8px;
  top:14px;
  width:46px;
  height:46px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(251,191,36,.48),rgba(255,255,255,.7));
  animation:reply-pulse 4s ease-in-out infinite .7s;
}

.qm-route{
  top:80px;
  left:24px;
  right:24px;
  width:auto;
  height:82px;
}

.qm-route::before{
  content:"";
  position:absolute;
  inset:22px 24px 26px 26px;
  border-top:3px solid rgba(128,16,79,.18);
  border-right:3px solid rgba(128,16,79,.18);
  border-radius:0 36px 0 0;
}

.qm-route span{
  position:absolute;
  width:24px;
  height:24px;
  border-radius:999px;
  background:#fff;
  border:5px solid rgba(167,139,250,.76);
  box-shadow:0 10px 18px rgba(15,23,42,.08);
  animation:node-pop 4.2s ease-in-out infinite;
}

.qm-route span:first-child{left:6px;top:42px}
.qm-route span:nth-child(2){right:4px;top:10px;animation-delay:.45s}
.qm-route span:nth-child(3){right:22px;bottom:4px;animation-delay:.9s}

.qm-sla{
  top:74px;
  left:24px;
  right:24px;
  width:auto;
  height:92px;
}

.qm-sla span{
  position:absolute;
  bottom:0;
  width:34px;
  border-radius:14px 14px 8px 8px;
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 18px rgba(15,23,42,.08);
  animation:meter-rise 4s ease-in-out infinite;
}

.qm-sla span:first-child{left:16px;height:58px;background:rgba(134,239,172,.58)}
.qm-sla span:nth-child(2){left:68px;height:88px;background:rgba(251,191,36,.58);animation-delay:.35s}
.qm-sla i{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  border-radius:999px;
  background:rgba(15,23,42,.16);
}

.audience-bento-grid{
  display:grid;
  grid-template-columns:minmax(360px,1.15fr) repeat(2,minmax(280px,.85fr));
  grid-auto-rows:minmax(260px,auto);
  gap:18px;
}

.audience-card{
  position:relative;
  min-height:260px;
  padding:24px;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--card);
  box-shadow:var(--shadow-xs);
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.audience-card:hover{
  transform:translateY(-4px);
  border-color:#d7dce5;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 26px 60px rgba(15,23,42,.10);
}

.audience-large{
  grid-row:span 2;
  min-height:538px;
}

.audience-ecom{background:linear-gradient(165deg,#f3f0fe 0%,#faf8ff 62%)}
.audience-saas{background:linear-gradient(165deg,#edf4ff 0%,#f7fbff 62%)}
.audience-agency{background:linear-gradient(165deg,#fff7e8 0%,#fffdf6 62%)}
.audience-internal{background:linear-gradient(165deg,#eafaf1 0%,#f6fef9 62%)}
.audience-ops{background:linear-gradient(165deg,#f2effe 0%,#faf9ff 62%)}

/* Card header: icon badge + title + arrow. */
.ac-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}

.ac-badge{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
}

.ac-badge svg{width:24px;height:24px}
.badge-violet{background:rgba(124,58,237,.12);color:#7c3aed}
.badge-blue{background:rgba(37,99,235,.12);color:#2563eb}
.badge-amber{background:rgba(217,119,6,.13);color:#d97706}
.badge-green{background:rgba(5,150,105,.12);color:#059669}

.audience-card h3{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  color:var(--foreground);
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.01em;
  font-weight:800;
}

.audience-large h3{font-size:24px}

.ac-arrow{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  color:#0f172a;
  transition:transform .2s ease;
}

.ac-arrow svg{width:22px;height:22px}
.audience-card:hover .ac-arrow{transform:translateX(3px)}

.audience-card p{
  margin:0 0 22px;
  color:var(--muted-foreground);
  font-size:14px;
  line-height:1.6;
  font-weight:500;
}

.audience-large p{
  max-width:42ch;
  font-size:15px;
}

/* Clean, stable info panel ("tab") shared across every bento card.
   Fixed top gap (not auto) so the breathing space stays equal in every
   card regardless of how tall the E-commerce card stretches the row. */
.ac-panel{
  margin-top:0;
  background:#fff;
  border:1px solid rgba(15,23,42,.07);
  border-radius:16px;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
  overflow:hidden;
}

.ac-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 15px;
}

.ac-row + .ac-row{border-top:1px solid rgba(15,23,42,.06)}

.ac-ic{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
}

.ac-ic svg{width:19px;height:19px}
.ic-blue{background:rgba(37,99,235,.12);color:#2563eb}
.ic-violet{background:rgba(124,58,237,.12);color:#7c3aed}
.ic-green{background:rgba(5,150,105,.12);color:#059669}
.ic-amber{background:rgba(217,119,6,.14);color:#d97706}

.ac-av{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  font-size:14px;
}

.av-a{background:linear-gradient(135deg,#7c3aed,#a78bfa)}
.av-b{background:linear-gradient(135deg,#2563eb,#60a5fa)}
.av-c{background:linear-gradient(135deg,#059669,#34d399)}

.ac-tx{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  flex:1 1 auto;
}

.ac-tx b{
  color:#1f2937;
  font-size:14px;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ac-tx small{
  color:#6b7280;
  font-size:12px;
  font-weight:500;
  line-height:1.3;
}

.ac-tag{
  margin-left:auto;
  flex:0 0 auto;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  font-style:normal;
}

.tag-amber{background:#fef3c7;color:#b45309}
.tag-blue{background:#dbeafe;color:#1d4ed8}
.tag-green{background:#dcfce7;color:#15803d}

.ac-chev{
  flex:0 0 auto;
  margin-left:auto;
  display:grid;
  place-items:center;
  color:#c4cad3;
}

.ac-chev svg{width:18px;height:18px}

.ac-dot{
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-radius:999px;
}

em.ac-dot{margin-left:auto}
.dot-violet{background:#7c3aed}
.dot-blue{background:#2563eb}
.dot-amber{background:#f59e0b}
.dot-green{background:#059669}

/* Support-ops metric rows. */
.ac-row-metric{gap:12px}
.ac-row-metric b{
  flex:0 0 auto;
  color:#1f2937;
  font-size:14px;
  font-weight:800;
}

.ac-num{
  margin-left:auto;
  font-style:normal;
  font-weight:900;
  font-size:19px;
  color:#1f2937;
  letter-spacing:-.01em;
}

.ac-num.warn{color:#e11d48}
.ac-num.ok{color:#059669}

.ac-mic{
  flex:0 0 auto;
  width:32px;
  height:32px;
  border-radius:9px;
  display:grid;
  place-items:center;
  margin-left:2px;
}

.ac-mic svg{width:17px;height:17px}
.mic-violet{background:rgba(124,58,237,.12);color:#7c3aed}
.mic-amber{background:rgba(217,119,6,.14);color:#d97706}
.mic-green{background:rgba(5,150,105,.12);color:#059669}

/* E-commerce card only: larger 3D WooCommerce illustration anchored to
   the bottom-right corner, uncropped, with comfortable padding. */
.ac-photo{
  margin-top:auto;
  padding-top:24px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}

.ac-photo img{
  width:auto;
  height:auto;
  max-width:86%;
  max-height:400px;
  display:block;
  border:0;
}

.support-habits-section{
  background:var(--card);
  padding-top:78px;
}

.habits-head{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:end;
  margin-bottom:34px;
}

.habits-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin:0 0 26px;
  padding:9px 16px;
  border-radius:999px;
  background:#c7f8cb;
  color:#166534;
  font-weight:900;
}

.habits-head .eyebrow{
  margin:0 0 26px;
}

.habits-pill span{
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border-radius:999px;
  background:#86efac;
}

.habits-head h2{
  max-width:620px;
  margin:0;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  color:var(--foreground);
  font-size:clamp(30px,2.2vw,42px);
  line-height:1.12;
  letter-spacing:0;
  text-wrap:balance;
}

.habits-head>p{
  margin:0;
  color:var(--muted-foreground);
  font-size:clamp(16px,1vw,18px);
  line-height:1.6;
  font-weight:500;
}

.habits-head a{
  color:var(--brand-strong);
  border-bottom:2px solid color-mix(in oklab,var(--brand) 28%,transparent);
  font-weight:800;
}

.habits-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.habit-card{
  min-height:390px;
  padding:22px;
  border:1px solid var(--border);
  border-radius:16px;
  display:flex;
  flex-direction:column;
  background:#fff;
  box-shadow:var(--shadow-xs);
}

.habit-visual{
  height:176px;
  margin-bottom:26px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
}

.hv-triage{background:linear-gradient(180deg,#fff7fd 0,#fff 100%)}
.hv-replies{background:linear-gradient(180deg,#fffbeb 0,#fff 100%)}
.hv-followup{background:linear-gradient(180deg,#f0fdf4 0,#fff 100%)}
.hv-escalate{background:linear-gradient(180deg,#ecfeff 0,#fff 100%)}

.hv-triage div{
  width:74%;
  display:grid;
  grid-template-columns:18px 1fr 30px;
  gap:10px;
  align-items:center;
  margin:6px 0;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 18px rgba(15,23,42,.06);
}

.hv-triage span:first-child{
  width:16px;
  height:16px;
  border:2px solid var(--brand);
  border-radius:4px;
  background:#fff;
}

.hv-triage span:nth-child(2),
.hv-replies span,
.hv-followup span{
  height:8px;
  border-radius:999px;
  background:#dbe4e8;
}

.hv-triage b{
  width:30px;
  height:30px;
  border-radius:999px;
  background:linear-gradient(135deg,#d8b4fe,#a78bfa);
}

.reply-smile{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(135deg,#fde68a,#fbbf24);
  color:#713f12;
  font-weight:900;
  box-shadow:0 0 0 12px rgba(253,230,138,.34);
}

.hv-replies,
.hv-followup{
  gap:12px;
}

.hv-replies::before{
  content:"";
  position:absolute;
  width:108px;
  height:56px;
  right:28px;
  top:28px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  background:rgba(255,255,255,.74);
  box-shadow:0 12px 22px rgba(15,23,42,.08);
}

.hv-replies span,
.hv-followup span{
  width:58%;
  position:relative;
  z-index:1;
  box-shadow:0 8px 14px rgba(15,23,42,.05);
}

.hv-followup div{
  padding:11px 18px;
  border:1px solid rgba(22,101,52,.18);
  border-radius:14px;
  background:#fff;
  color:#334155;
  font-weight:800;
  box-shadow:0 10px 18px rgba(15,23,42,.06);
}

.hv-followup::before{
  content:"";
  position:absolute;
  left:32px;
  top:34px;
  bottom:34px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(#86efac,#22c55e);
}

.hv-followup::after{
  content:"";
  position:absolute;
  left:24px;
  bottom:36px;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 -54px 0 #bbf7d0;
}

.hv-escalate{
  padding:28px;
  text-align:left;
  place-items:stretch;
}

.hv-escalate strong,
.hv-escalate span,
.hv-escalate em{
  display:block;
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
  color:#334155;
  box-shadow:0 10px 18px rgba(15,23,42,.06);
}

.hv-escalate em{
  justify-self:start;
  margin-top:8px;
  background:var(--brand-subtle);
  color:var(--brand-strong);
  font-style:normal;
  font-weight:900;
}

.hv-escalate::after{
  content:"";
  position:absolute;
  right:28px;
  bottom:28px;
  width:54px;
  height:54px;
  border-radius:18px;
  background:linear-gradient(135deg,#a78bfa,#60a5fa);
  box-shadow:0 14px 24px rgba(15,23,42,.14);
}

.habit-card h3{
  margin:0 0 8px;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  color:var(--foreground);
  font-size:20px;
  line-height:1.18;
  letter-spacing:0;
}

.habit-card p{
  margin:0;
  color:var(--muted-foreground);
  font-size:16px;
  line-height:1.55;
  font-weight:500;
}

.habit-card>a{
  width:36px;
  height:36px;
  margin-top:auto;
  margin-left:auto;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#0f172a;
  color:#fff;
  font-size:0;
  font-weight:900;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(15,23,42,.14);
  transition:transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.habit-card>a::before{
  content:"\2192";
  color:#fff;
  font-size:18px;
  line-height:1;
  transform:translateY(-1px);
}

.habit-card>a:hover{
  transform:translateY(-1px);
  background:#020617;
  box-shadow:0 14px 26px rgba(15,23,42,.2);
}

.footer-social{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.footer-social .social-link{
  width:36px;
  height:36px;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--card);
  color:var(--foreground);
  margin:0;
}

.footer-social .social-link:hover{
  background:var(--brand-subtle);
  color:var(--brand-strong);
}

.g-toc{
  background:#f8fafc;
  color:#0f172a;
  box-shadow:none;
}

.g-prose code{
  background:#f1f5f9;
  color:#0f172a;
}

.g-prose pre{
  background:#f8fafc;
  color:#0f172a;
  border:1px solid var(--border);
}

.g-prose pre code{
  color:inherit;
}

@media (max-width:980px){
  .core-bento-grid,
  .habits-head,
  .habits-grid{
    grid-template-columns:1fr;
  }

  .queue-slider{
    display:flex;
    gap:16px;
    padding:6px 2px 14px;
    margin-inline:-2px;
  }

  .queue-card{
    flex:0 0 72%;
    min-width:0;
  }

  /* Bento stacks into a single graceful column on tablet/mobile. */
  .audience-bento-grid{
    display:grid;
    grid-template-columns:1fr;
    grid-auto-rows:auto;
    gap:16px;
  }

  .audience-card,
  .audience-large{
    grid-row:auto;
    grid-column:auto;
    min-height:0;
  }

  .audience-large h3{
    font-size:26px;
  }

  .core-bento-card,
  .core-bento-large{
    min-height:360px;
  }

  .core-bento-large{
    min-height:500px;
  }

  .core-bento-card:not(.core-bento-large) .core-bento-copy{
    max-width:58%;
  }

  .core-bento-card h2{
    font-size:34px;
  }

  .core-bento-card p{
    max-width:38ch;
    font-size:18px;
  }

  .core-bento-img-large{
    width:min(54%,330px);
  }

  .motion-intake{
    right:34px;
    bottom:118px;
    transform:scale(.86);
    transform-origin:right bottom;
  }

  .motion-knowledge{
    right:106px;
  }

  .habits-head>p{
    font-size:18px;
  }
}

@media (max-width:560px){
  .home-v2 .container{
    width:min(1280px,calc(100% - 28px));
  }

  .queue-peek-section,
  .who-section,
  .who-section{
    padding-top:54px;
    padding-bottom:56px;
  }

  .queue-slider,
  .audience-bento-grid{
    padding-right:14px;
    scroll-padding-inline:14px;
  }

  .queue-card{
    flex-basis:84vw;
    min-height:360px;
  }

  .audience-card,
  .audience-large{
    min-height:0;
  }

  .queue-card{
    padding:20px;
  }

  .queue-card h3{
    margin-top:122px;
    font-size:20px;
  }

  .queue-card p{
    font-size:14px;
  }

  .queue-motion{
    transform:scale(.82);
    transform-origin:right top;
  }

  .audience-card h3{
    font-size:20px;
  }

  .audience-large h3{
    font-size:22px;
  }

  .audience-card p,
  .audience-large p{
    max-width:100%;
    font-size:14px;
  }

  .features-core-section .container{
    width:100%;
    padding-left:14px;
    padding-right:0;
  }

  .core-bento-grid{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(300px,84vw);
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 14px 12px 0;
    border-radius:0;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:14px;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .core-bento-grid::-webkit-scrollbar{
    display:none;
  }

  .inner-v2 .page-hero h1{
    max-width:100%;
    font-size:40px;
    line-height:1.08;
  }

  .inner-v2 .page-hero p{
    max-width:100%;
  }

  .core-bento-card,
  .habit-card{
    padding:20px;
  }

  .core-bento-card,
  .core-bento-large{
    grid-row:auto;
    scroll-snap-align:start;
    min-height:390px;
    padding-bottom:72px;
  }

  .core-bento-large{
    min-height:390px;
  }

  .core-bento-card:not(.core-bento-large) .core-bento-copy,
  .core-bento-copy{
    max-width:calc(100% - 54px);
    padding-right:0;
  }

  .core-bento-card h2{
    font-size:30px;
  }

  .core-bento-card p{
    display:block;
    -webkit-line-clamp:unset;
    -webkit-box-orient:initial;
    font-size:17px;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    overflow:visible;
  }

  .core-bento-img{
    position:absolute;
    inset:auto 8px 0 auto;
    margin:0;
    width:min(50%,170px);
    max-width:100%;
  }

  .core-bento-img-large{
    width:min(58%,210px);
  }

  .core-bento-arrow,
  .arrow-top-right,
  .arrow-bottom-left,
  .arrow-left-mid{
    inset:18px 18px auto auto;
    width:36px;
    height:36px;
  }

  .habits-head{
    gap:22px;
    margin-bottom:24px;
  }

  .habits-head h2{
    max-width:100%;
    font-size:34px;
    line-height:1.12;
    overflow-wrap:break-word;
  }

  .habits-head>p{
    max-width:100%;
    font-size:18px;
  }
}

@media (prefers-reduced-motion:reduce){
  .core-bento-img,
  .queue-motion,
  .queue-motion *,
  .queue-art-image,
  .audience-visual,
  .audience-visual *{
    animation:none!important;
  }
}

/* Screenshot fixes: active Help Center landing state, readable dark testimonials, and queue badges. */
.g-side-home.is-active{
  color:var(--brand);
  background:var(--brand-soft);
}

html[data-theme="dark"] .home-v2 .testi-card>p{
  color:var(--foreground);
}

html[data-theme="dark"] .home-v2 .testi-author strong{
  color:var(--foreground);
}

html[data-theme="dark"] .home-v2 .testi-author span{
  color:var(--muted-foreground);
}

html[data-theme="dark"] .home-v2 .queue-card .queue-step{
  border-color:var(--border);
  background:color-mix(in oklab,var(--card) 86%,#fff 6%);
  color:var(--foreground);
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}

/* The Escalations source has more internal padding than the other workflow visuals. */
.habit-card .hv-escalate img{
  transform:scale(1.28);
}

/* Keep the mobile hero compact without stacking or deleting the CTAs. */
@media (max-width:760px){
  .home-v2 .ref-hero .hero-cta-row{
    flex-wrap:nowrap;
    gap:8px;
  }

  .home-v2 .ref-hero .hero-cta-row>a{
    width:auto;
    min-width:0;
    flex:1 1 0;
    min-height:46px;
    padding:0 8px;
    font-size:12px;
    white-space:nowrap;
  }

  .home-v2 .ref-hero .hero-floats{
    display:none;
  }
}

@media (max-width:380px){
  .home-v2 .ref-hero .hero-cta-row{
    gap:6px;
  }

  .home-v2 .ref-hero .hero-cta-row>a{
    padding:0 5px;
    font-size:11px;
  }
}

html[data-theme="dark"]{
  .g-toc,
  .g-prose code,
  .g-prose pre{
    background:var(--card);
    color:var(--foreground);
  }

  .core-bento-card,
  .habit-card,
  .habits-head h2{
    color:var(--foreground);
  }

  .habits-head>p,
  .habit-card p{
    color:var(--muted-foreground);
  }
}

/* Smart queue preview: polished four-step cards with mobile peek carousel. */
.queue-peek-section{
  padding-top:78px;
  padding-bottom:84px;
  background:var(--card);
}

.queue-peek-section .section-head{
  margin-bottom:38px;
}

.queue-peek-section .section-sub{
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

.queue-slider{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  overflow:visible;
}

.queue-card{
  min-width:0;
  min-height:342px;
  padding:24px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 44px rgba(15,23,42,.035);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.queue-card:hover{
  transform:translateY(-3px);
  border-color:#cbd5e1;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 24px 60px rgba(15,23,42,.08);
}

.queue-card-intake{background:linear-gradient(160deg,#e3f9fd 0%,#f1fdff 70%)}
.queue-card-ai{background:linear-gradient(160deg,#fdf6d8 0%,#fffdf0 70%)}
.queue-card-route{background:linear-gradient(160deg,#fde6f1 0%,#fff3f9 70%)}
.queue-card-sla{background:linear-gradient(160deg,#e2f6e9 0%,#f2fdf6 70%)}

.queue-step{
  width:38px;
  height:38px;
  border-color:#d9e1eb;
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 22px rgba(15,23,42,.045);
  font-size:12px;
  font-weight:900;
}

.queue-card h3{
  margin:126px 0 9px;
  max-width:15ch;
  color:#18181b;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:20px;
  line-height:1.18;
  letter-spacing:-.01em;
  font-weight:800;
}

.queue-card p{
  max-width:30ch;
  color:#6b7280;
  font-size:14px;
  line-height:1.6;
  font-weight:500;
}

.queue-card>a::before{
  right:24px;
  bottom:22px;
  color:#0f172a;
  font-size:24px;
  transform:translateX(0);
  transition:transform .2s ease,color .2s ease;
}

.queue-card:hover>a::before{
  color:#6d28d9;
  transform:translateX(3px);
}

.queue-motion{
  opacity:.98;
}

.qm-intake{
  top:86px;
  left:38px;
  width:132px;
  height:82px;
}

.qm-intake span{
  width:72px;
  height:28px;
  border-color:#e5f2f7;
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 22px rgba(15,23,42,.08);
}

.qm-intake span:first-child{left:0;top:2px}
.qm-intake span:nth-child(2){left:52px;top:24px}
.qm-intake span:nth-child(3){left:14px;top:48px}

.qm-ai{
  top:88px;
  left:24px;
  right:24px;
  height:78px;
}

.qm-ai span{
  height:24px;
  background:rgba(255,255,255,.88);
  box-shadow:0 12px 22px rgba(15,23,42,.06);
}

.qm-ai span:first-child{top:8px;width:106px}
.qm-ai span:nth-child(2){top:44px;width:130px}
.qm-ai i{
  right:8px;
  top:10px;
  width:46px;
  height:52px;
  border-radius:17px;
  background:linear-gradient(135deg,#fde68a 0%,#fff7cd 100%);
  box-shadow:0 14px 26px rgba(245,158,11,.12);
}

.qm-route{
  top:92px;
  left:28px;
  right:28px;
  height:86px;
}

.qm-route::before{
  inset:15px 28px 28px 24px;
  border-top:3px solid rgba(219,155,188,.55);
  border-right:3px solid rgba(219,155,188,.55);
  border-radius:0 38px 0 0;
}

.qm-route span{
  width:23px;
  height:23px;
  border:5px solid #b69cff;
  background:#fff;
  box-shadow:0 12px 22px rgba(15,23,42,.06);
}

.qm-route span:first-child{left:4px;top:34px}
.qm-route span:nth-child(2){right:0;top:2px}
.qm-route span:nth-child(3){right:18px;bottom:2px}

.qm-sla{
  top:86px;
  left:24px;
  right:24px;
  height:86px;
}

.qm-sla::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  height:3px;
  border-radius:999px;
  background:#cbd5d7;
}

.qm-sla span{
  z-index:1;
  width:34px;
  border-radius:13px 13px 5px 5px;
  box-shadow:0 12px 22px rgba(15,23,42,.07);
}

.qm-sla span:first-child{
  left:18px;
  height:50px;
  background:#a7f3c7;
}

.qm-sla span:nth-child(2){
  left:70px;
  height:78px;
  background:#fde27a;
}

.qm-sla i{
  display:none;
}

@media (max-width:1100px){
  .queue-slider{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:760px){
  .queue-peek-section{
    padding-top:56px;
    padding-bottom:58px;
  }

  .queue-peek-section .container{
    width:100%;
    padding-left:14px;
    padding-right:0;
  }

  .queue-peek-section .section-head{
    width:calc(100% - 28px);
    margin-left:0;
    margin-right:14px;
    margin-bottom:28px;
  }

  .queue-slider{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 14px 14px 0;
    margin:0;
    scroll-snap-type:x mandatory;
    scroll-padding-left:14px;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .queue-slider::-webkit-scrollbar{
    display:none;
  }

  .queue-card{
    flex:0 0 min(84vw,340px);
    min-height:342px;
    scroll-snap-align:start;
  }
}

@media (max-width:430px){
  .queue-card{
    flex-basis:84vw;
    min-height:352px;
    padding:20px;
  }

  .queue-step{
    width:36px;
    height:36px;
  }

  .queue-card h3{
    margin-top:126px;
    font-size:21px;
  }

  .queue-card p{
    max-width:25ch;
    font-size:15px;
  }

  .queue-card>a::before{
    right:20px;
    bottom:20px;
  }
}

html[data-theme="dark"]{
  .queue-card{
    border-color:var(--border);
    box-shadow:var(--shadow-xs);
  }

  .queue-card-intake{background:linear-gradient(180deg,color-mix(in oklab,#06b6d4 15%,var(--card)) 0%,var(--card) 74%)}
  .queue-card-ai{background:linear-gradient(180deg,color-mix(in oklab,#f59e0b 16%,var(--card)) 0%,var(--card) 74%)}
  .queue-card-route{background:linear-gradient(180deg,color-mix(in oklab,#db2777 13%,var(--card)) 0%,var(--card) 74%)}
  .queue-card-sla{background:linear-gradient(180deg,color-mix(in oklab,#10b981 14%,var(--card)) 0%,var(--card) 74%)}

  .queue-card h3,
  .queue-card>a::before{
    color:var(--foreground);
  }

  .queue-card p{
    color:var(--muted-foreground);
  }
}

/* Smart queue preview art pass: match the supplied mockup scenes, not generic marks. */
.queue-peek-section .container{
  width:min(1400px,calc(100% - 48px));
}

.queue-slider{
  gap:20px;
}

.queue-card{
  min-height:420px;
  padding:24px;
  border-radius:18px;
  border-color:#dce4ee;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 22px 58px rgba(15,23,42,.055);
}

.queue-card-intake{background:linear-gradient(160deg,#e3f9fd 0%,#f1fdff 70%)}
.queue-card-ai{background:linear-gradient(160deg,#fdf6d8 0%,#fffdf0 70%)}
.queue-card-route{background:linear-gradient(160deg,#fde6f1 0%,#fff3f9 70%)}
.queue-card-sla{background:linear-gradient(160deg,#e2f6e9 0%,#f2fdf6 70%)}

.queue-card h3{
  margin-top:210px;
  max-width:none;
  font-size:22px;
  line-height:1.16;
  letter-spacing:0;
  font-weight:800;
}

.queue-card p{
  max-width:29ch;
  font-size:15px;
  line-height:1.55;
  font-weight:500;
}

.queue-card>a::before{
  right:30px;
  bottom:28px;
  font-size:26px;
}

.queue-card .queue-step{
  width:46px;
  height:46px;
  background:rgba(255,255,255,.9);
  border-color:#d8e0ea;
  box-shadow:0 14px 34px rgba(15,23,42,.09);
  font-size:13px;
}

.queue-card .queue-art{
  position:absolute;
  top:86px;
  left:24px;
  right:24px;
  height:202px;
  z-index:1;
  opacity:1;
  pointer-events:none;
  transform:none;
}

.queue-art svg{
  width:24px;
  height:24px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.queue-art-intake{
  left:26px;
  right:26px;
}

.queue-art-intake::before{
  content:"";
  position:absolute;
  left:78px;
  top:58px;
  width:142px;
  height:78px;
  border-radius:999px;
  background:radial-gradient(circle at 80% 50%,rgba(167,139,250,.18),transparent 42%),linear-gradient(90deg,rgba(125,211,252,.18),rgba(167,139,250,.25),rgba(59,130,246,.18));
  filter:blur(2px);
}

.flow-line{
  position:absolute;
  height:9px;
  border-radius:999px;
  opacity:.95;
  filter:drop-shadow(0 10px 16px rgba(96,165,250,.16));
}

.flow-line-mail{
  left:92px;
  top:48px;
  width:128px;
  background:linear-gradient(90deg,rgba(125,211,252,0),rgba(125,211,252,.58),rgba(129,140,248,.34));
  transform:rotate(22deg);
}

.flow-line-chat{
  left:66px;
  top:92px;
  width:170px;
  background:linear-gradient(90deg,rgba(167,139,250,.12),rgba(167,139,250,.72),rgba(96,165,250,.4));
}

.flow-line-phone{
  left:100px;
  top:132px;
  width:118px;
  background:linear-gradient(90deg,rgba(52,211,153,.16),rgba(52,211,153,.5),rgba(96,165,250,.28));
  transform:rotate(-18deg);
}

.channel-node,
.inbox-node,
.risk-node,
.trend-arrow{
  position:absolute;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 20px 44px rgba(15,23,42,.11),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
}

.channel-node{
  width:58px;
  height:58px;
  border-radius:18px;
}

.node-mail{
  left:112px;
  top:0;
  color:#38a8f4;
}

.node-chat{
  left:46px;
  top:72px;
  color:#9b77ff;
}

.node-phone{
  left:86px;
  top:136px;
  color:#34d399;
}

.inbox-node{
  right:30px;
  top:76px;
  width:98px;
  height:78px;
  border-radius:25px;
  color:#4f7df3;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(243,240,255,.82));
  box-shadow:0 20px 46px rgba(88,80,174,.18),inset 0 1px 0 rgba(255,255,255,.9);
}

.inbox-node svg{
  width:42px;
  height:42px;
  stroke-width:2;
}

.inbox-node b{
  position:absolute;
  right:14px;
  top:13px;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:#7b7288;
  color:#fff;
  font-size:12px;
  line-height:1;
}

.queue-art-ai{
  left:26px;
  right:26px;
}

.doc-stack{
  position:absolute;
  left:60px;
  top:12px;
  width:154px;
  height:154px;
}

.doc-back,
.doc-front{
  position:absolute;
  border-radius:22px;
  box-shadow:0 24px 44px rgba(217,159,37,.16);
}

.doc-back{
  inset:20px -16px -8px 26px;
  background:linear-gradient(135deg,#fde68a,#fff1b8);
  transform:rotate(7deg);
}

.doc-front{
  inset:0 0 12px 0;
  padding:26px 24px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 24px 52px rgba(217,159,37,.14),inset 0 1px 0 rgba(255,255,255,.92);
}

.doc-front .wand-icon{
  width:38px;
  height:38px;
  color:#f6c84d;
  margin-bottom:18px;
}

.doc-front span{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  display:block;
  width:auto!important;
  height:12px!important;
  margin:10px 0 0;
  border-radius:999px;
  background:#eee6d8!important;
  box-shadow:none!important;
  animation:none!important;
}

.doc-front span:nth-child(3){
  width:78%!important;
}

.doc-front span:nth-child(4){
  width:58%!important;
}

.ai-chip{
  position:absolute;
  right:50px;
  top:58px;
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:#fff;
  background:linear-gradient(135deg,#ffd84d,#f6a623);
  border:9px solid rgba(255,255,255,.78);
  box-shadow:0 22px 42px rgba(245,158,11,.22);
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:30px;
  font-weight:900;
}

.sparkle{
  position:absolute;
  width:18px;
  height:18px;
  color:#f6c84d;
  display:block!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  animation:none!important;
}

.sparkle::before,
.sparkle::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  background:currentColor;
  border-radius:999px;
}

.sparkle::before{width:4px;height:18px}
.sparkle::after{width:18px;height:4px}
.sparkle-one{right:36px;top:24px;transform:rotate(12deg)}
.sparkle-two{right:16px;top:50px;transform:scale(.7) rotate(12deg)}

.queue-art-route{
  left:28px;
  right:28px;
}

.queue-card .queue-art-route::before{
  content:"";
  position:absolute;
  left:68px;
  right:72px;
  top:88px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(90deg,#8456ff,#b79cff);
  box-shadow:0 0 0 7px rgba(132,86,255,.11),0 15px 34px rgba(132,86,255,.28);
}

.queue-card .queue-art-route::after{
  content:"";
  position:absolute;
  right:66px;
  top:38px;
  width:92px;
  height:104px;
  border-top:4px dotted rgba(146,115,214,.4);
  border-right:4px solid rgba(146,115,214,.38);
  border-radius:0 58px 58px 0;
}

.route-glow{
  position:absolute;
  left:58px;
  right:48px;
  top:44px;
  height:126px;
  border-radius:999px;
  background:radial-gradient(circle at 75% 60%,rgba(132,86,255,.18),transparent 42%),radial-gradient(circle at 28% 58%,rgba(132,86,255,.15),transparent 40%);
  filter:blur(3px);
}

.risk-node{
  width:58px;
  height:58px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(180deg,#9d7aff,#7357d8);
  border:8px solid rgba(255,255,255,.62);
  box-shadow:0 18px 36px rgba(109,80,210,.27);
}

.risk-node svg{
  width:27px;
  height:27px;
  stroke-width:2.4;
}

.risk-alert{
  left:42px;
  top:60px;
}

.risk-owner{
  right:42px;
  top:8px;
}

.risk-flag{
  right:86px;
  top:122px;
}

.queue-card .queue-art-pressure::after{
  display:none;
}

.pressure-panel{
  position:absolute;
  left:44px;
  right:44px;
  top:44px;
  height:128px;
  border-radius:22px;
  background:rgba(255,255,255,.82);
  box-shadow:0 22px 50px rgba(15,23,42,.1),inset 0 1px 0 rgba(255,255,255,.92);
}

.pressure-bars{
  position:absolute;
  left:30px;
  right:30px;
  bottom:36px;
  height:84px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:18px;
}

.pressure-bars span{
  position:relative!important;
  bottom:auto!important;
  left:auto!important;
  width:42px!important;
  border-radius:18px 18px 5px 5px!important;
  box-shadow:0 16px 28px rgba(15,23,42,.12)!important;
  animation:none!important;
}

.bar-low{
  height:50px!important;
  background:linear-gradient(180deg,#b9efbf,#66ce86)!important;
}

.bar-mid{
  height:74px!important;
  background:linear-gradient(180deg,#ffe36b,#f8be18)!important;
}

.bar-high{
  height:100px!important;
  background:linear-gradient(180deg,#ffad3d,#ff6431)!important;
}

.pressure-badge{
  position:absolute;
  left:20px;
  right:20px;
  bottom:-18px;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:14px;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 28px rgba(15,23,42,.12);
  color:#5f6877;
  font-size:13px;
  font-weight:800;
}

.pressure-badge i{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#28c98a;
}

.pressure-badge b{
  padding:4px 9px;
  border-radius:999px;
  color:#22a869;
  background:#e6fbef;
  font-size:12px;
}

.trend-arrow{
  right:26px;
  top:18px;
  width:52px;
  height:52px;
  border-radius:17px;
  color:#2fcf84;
}

.trend-arrow svg{
  width:28px;
  height:28px;
  stroke-width:2.5;
}

.pressure-dot{
  position:absolute;
  display:block!important;
  width:10px;
  height:10px;
  border-radius:999px;
  background:#95f0bf;
  box-shadow:0 0 0 6px rgba(149,240,191,.22);
}

.pressure-dot-one{left:28px;top:66px}
.pressure-dot-two{right:22px;top:134px}

@media (max-width:1100px){
  .queue-card{
    min-height:452px;
  }
}

@media (max-width:760px){
  .queue-peek-section .container{
    width:100%;
    padding-left:14px;
    padding-right:0;
  }

  .queue-card{
    flex:0 0 min(86vw,380px);
    min-height:468px;
    padding:24px;
  }

  .queue-card h3{
    margin-top:250px;
  }
}

@media (max-width:430px){
  .queue-card{
    flex-basis:86vw;
    min-height:452px;
    padding:22px;
  }

  .queue-card .queue-art{
    left:14px;
    right:14px;
    transform:scale(.9);
    transform-origin:center top;
  }

  .queue-card h3{
    margin-top:238px;
    font-size:24px;
  }

  .queue-card p{
    max-width:28ch;
    font-size:15.5px;
  }
}

html[data-theme="dark"]{
  .channel-node,
  .inbox-node,
  .doc-front,
  .pressure-panel,
  .pressure-badge,
  .trend-arrow{
    background:color-mix(in oklab,var(--card) 78%,#fff 8%);
    border-color:color-mix(in oklab,var(--border) 70%,#fff 18%);
  }
}

/* Supplied PNG feature-card elements — floated, uncropped, breathing room all around. */
.queue-card .queue-art-image{
  top:60px;
  left:22px;
  right:22px;
  height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  transform:none!important;
  animation:feature-float 6.5s ease-in-out infinite;
  will-change:transform;
}

.queue-card-ai .queue-art-image{animation-delay:-1.5s}
.queue-card-route .queue-art-image{animation-delay:-3.1s}
.queue-card-sla .queue-art-image{animation-delay:-4.7s}

.queue-card .queue-art-image::before,
.queue-card .queue-art-image::after{
  display:none!important;
}

.queue-art-image img{
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  border:0;
  filter:drop-shadow(0 16px 22px rgba(15,23,42,.14));
}

.queue-card h3{
  margin-top:196px;
}

@media (max-width:760px){
  .queue-card .queue-art-image{
    top:60px;
    left:18px;
    right:18px;
    height:192px;
  }

  .queue-card h3{
    margin-top:196px;
  }
}

@media (max-width:430px){
  .queue-card .queue-art-image{
    left:14px;
    right:14px;
    height:186px;
  }

  .queue-card h3{
    margin-top:190px;
    font-size:21px;
  }

  .queue-card p{
    max-width:29ch;
    font-size:14px;
  }
}

/* Keep feature and workflow card links in the same light arrow treatment as the homepage cards. */
.core-bento-arrow{
  width:auto;
  height:auto;
  border-radius:0;
  background:transparent;
  color:#0f172a;
  box-shadow:none;
  font-size:0;
  transition:transform .2s ease,color .2s ease;
}

.core-bento-arrow::before{
  color:currentColor;
  font-size:26px;
}

.core-bento-arrow:hover{
  transform:translateX(3px);
  background:transparent;
  color:#6d28d9;
  box-shadow:none;
}

.habit-card>a{
  width:auto;
  height:auto;
  border-radius:0;
  background:transparent;
  color:#0f172a;
  box-shadow:none;
  font-size:0;
  transition:transform .2s ease,color .2s ease;
}

.habit-card>a::before{
  color:currentColor;
  font-size:26px;
}

.habit-card>a:hover{
  transform:translateX(3px);
  background:transparent;
  color:#6d28d9;
  box-shadow:none;
}

.habit-visual-image::before,
.habit-visual-image::after{
  display:none!important;
}

.habit-visual-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  filter:drop-shadow(0 14px 18px rgba(15,23,42,.12));
}

/* Homepage hero refresh: real dashboard screenshot with restrained floating proof points. */
.home-v2 .product-peek-shot{
  isolation:isolate;
}

.home-v2 .hero-shot-frame{
  z-index:2;
  background:var(--card);
}

.home-v2 .hero-shot-frame img{
  height:auto;
  aspect-ratio:1794 / 890;
  object-fit:cover;
  object-position:center top;
}

.hero-floats{
  position:absolute;
  z-index:4;
  inset:-72px -72px -44px;
  pointer-events:none;
}

.hero-float{
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:164px;
  padding:12px 14px;
  border:1px solid color-mix(in oklab,var(--border) 82%,#fff 18%);
  border-radius:16px;
  background:color-mix(in oklab,var(--card) 88%,transparent);
  color:var(--foreground);
  box-shadow:0 18px 38px rgba(15,23,42,.14);
  backdrop-filter:blur(16px);
  animation:hero-float-drift 6s ease-in-out infinite;
}

.hero-float b,
.hero-float small{display:block}
.hero-float b{font-size:12px;font-weight:900;line-height:1.2}
.hero-float small{margin-top:3px;color:var(--muted-foreground);font-size:11px;font-weight:700;line-height:1.2}
.hero-float-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:#7c3aed;background:#ede9fe;font-size:17px}
.hero-float-dot{width:10px;height:10px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 6px rgba(34,197,94,.14)}
.hero-float-ai{top:106px;left:26px;transform:rotate(-4deg)}
.hero-float-sla{top:250px;right:-40px;animation-delay:-2s;transform:rotate(4deg)}
.hero-float-orb{right:18%;bottom:-28px;width:26px;height:26px;border-radius:999px;background:linear-gradient(135deg,#7c3aed,#a78bfa);box-shadow:0 0 0 10px rgba(124,58,237,.12),0 12px 24px rgba(124,58,237,.28);animation:hero-float-orb 5s ease-in-out infinite}

@keyframes hero-float-drift{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes hero-float-orb{0%,100%{translate:0 0}50%{translate:0 -12px}}

html[data-theme="dark"] .hero-float{background:color-mix(in oklab,var(--card) 92%,transparent);box-shadow:0 18px 38px rgba(0,0,0,.32)}

.theme-toggle{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--foreground);
  background:var(--card);
  cursor:pointer;
  box-shadow:var(--shadow-xs);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}

.theme-toggle:hover{border-color:color-mix(in oklab,var(--brand) 42%,var(--border));color:var(--brand);transform:translateY(-1px)}
.theme-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-icon-moon{display:none}
html[data-theme="dark"] .theme-icon-sun{display:none}
html[data-theme="dark"] .theme-icon-moon{display:block}
.mobile-theme-toggle{flex:0 0 auto;margin-left:auto;margin-right:10px}

@media (max-width:760px){
  .hero-floats{inset:-44px -18px -22px}
  .hero-float{min-width:0;padding:10px 11px}
  .hero-float-ai{top:72px;left:8px}
  .hero-float-sla{top:204px;right:-8px}
  .hero-float-orb{right:12%;bottom:-18px}
}

@media (prefers-reduced-motion:reduce){
  .hero-float,.hero-float-orb{animation:none}
}

/* Theme contract: shared surfaces must follow the explicit toggle state. */
html[data-theme="dark"] body,
html[data-theme="dark"] body.home-v2,
html[data-theme="dark"] .home-v2,
html[data-theme="dark"] .page-shell{
  color:var(--foreground);
  background:var(--background);
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .home-v2 .site-header,
html[data-theme="dark"] .site-header.scrolled{
  background:color-mix(in oklab,var(--background) 86%,transparent);
  border-color:var(--border);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}

html[data-theme="dark"] .home-v2 .ref-hero,
html[data-theme="dark"] .home-v2 .ref-section,
html[data-theme="dark"] .home-v2 .operation-section,
html[data-theme="dark"] .home-v2 .pricing-preview,
html[data-theme="dark"] .home-v2 .section,
html[data-theme="dark"] .home-v2 .logo-cloud,
html[data-theme="dark"] .inner-v2 .page-hero,
html[data-theme="dark"] .inner-v2 .section-alt,
html[data-theme="dark"] .site-footer{
  background:var(--background);
  border-color:var(--border);
}

html[data-theme="dark"] .home-v2 .logo-cloud{
  background:var(--background);
  border-bottom-color:var(--border);
}

html[data-theme="dark"] .home-v2 .hero-grid,
html[data-theme="dark"] .inner-v2 .page-hero::before{
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
}

html[data-theme="dark"] .home-v2 .ref-hero h1,
html[data-theme="dark"] .home-v2 .section-head h2,
html[data-theme="dark"] .home-v2 .operation-copy h2,
html[data-theme="dark"] .inner-v2 .page-hero h1,
html[data-theme="dark"] .inner-v2 h2,
html[data-theme="dark"] .inner-v2 h3,
html[data-theme="dark"] .inner-v2 h4{
  color:var(--foreground);
}

html[data-theme="dark"] .home-v2 .nav-links a,
html[data-theme="dark"] .home-v2 .link-btn,
html[data-theme="dark"] .home-v2 .outline-btn,
html[data-theme="dark"] .inner-v2 .kicker,
html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .site-footer span{
  color:var(--muted-foreground);
}

html[data-theme="dark"] .inner-v2 .kicker{
  background:var(--card);
  border-color:var(--border);
  color:var(--foreground);
}

html[data-theme="dark"] .home-v2 .outline-btn,
html[data-theme="dark"] .home-v2 .hero-shot-frame,
html[data-theme="dark"] .home-v2 .ref-card-grid article,
html[data-theme="dark"] .home-v2 .price-card,
html[data-theme="dark"] .home-v2 .route-visual,
html[data-theme="dark"] .home-v2 .node,
html[data-theme="dark"] .home-v2 .mini-stats div,
html[data-theme="dark"] .inner-v2 .feature-card,
html[data-theme="dark"] .inner-v2 .faq-item,
html[data-theme="dark"] .inner-v2 .split-box,
html[data-theme="dark"] .inner-v2 .stats-card,
html[data-theme="dark"] .inner-v2 .visual-card{
  background:var(--card);
  border-color:var(--border);
  color:var(--foreground);
}

html[data-theme="dark"] .home-v2 .browser-bar,
html[data-theme="dark"] .home-v2 .mock-window,
html[data-theme="dark"] .home-v2 .mock-rail,
html[data-theme="dark"] .home-v2 .mock-side,
html[data-theme="dark"] .home-v2 .mock-list,
html[data-theme="dark"] .home-v2 .mock-thread,
html[data-theme="dark"] .home-v2 .mock-detail,
html[data-theme="dark"] .home-v2 .message-card,
html[data-theme="dark"] .home-v2 .reply-box,
html[data-theme="dark"] .home-v2 .contact-card,
html[data-theme="dark"] .home-v2 .workspace-card,
html[data-theme="dark"] .home-v2 .mini-stat-card{
  background:var(--card);
  border-color:var(--border);
  color:var(--foreground);
}

html[data-theme="dark"] .home-v2 .hero-shot-frame::after{
  display:none;
}

html[data-theme="dark"] .home-v2 .cookie-banner{
  background:var(--card);
  border-color:var(--border);
  box-shadow:0 30px 80px rgba(0,0,0,.42);
}

html[data-theme="dark"] .home-v2 .cookie-banner-text strong{
  color:var(--foreground);
}

html[data-theme="dark"] .home-v2 .cookie-banner-text p{
  color:var(--muted-foreground);
}

html[data-theme="dark"] .home-v2 .cookie-decline{
  background:var(--card);
  border-color:var(--border);
  color:var(--foreground);
}

html[data-theme="dark"] .home-v2 .queue-card,
html[data-theme="dark"] .home-v2 .audience-card,
html[data-theme="dark"] .home-v2 .integration-tile,
html[data-theme="dark"] .home-v2 .habit-card,
html[data-theme="dark"] .home-v2 .core-bento-card{
  border-color:var(--border);
  color:var(--foreground);
  box-shadow:var(--shadow-xs);
}

html[data-theme="dark"] .home-v2 .queue-card-intake,
html[data-theme="dark"] .home-v2 .tint-mint,
html[data-theme="dark"] .home-v2 .audience-ecom{
  background:color-mix(in oklab,#06b6d4 12%,var(--card));
}

html[data-theme="dark"] .home-v2 .queue-card-ai,
html[data-theme="dark"] .home-v2 .tint-lime,
html[data-theme="dark"] .home-v2 .audience-saas{
  background:color-mix(in oklab,#f59e0b 12%,var(--card));
}

html[data-theme="dark"] .home-v2 .queue-card-route,
html[data-theme="dark"] .home-v2 .tint-pink,
html[data-theme="dark"] .home-v2 .audience-ops{
  background:color-mix(in oklab,#db2777 11%,var(--card));
}

html[data-theme="dark"] .home-v2 .queue-card-sla,
html[data-theme="dark"] .home-v2 .tint-green,
html[data-theme="dark"] .home-v2 .audience-internal{
  background:color-mix(in oklab,#10b981 11%,var(--card));
}

html[data-theme="dark"] .home-v2 .tint-cream,
html[data-theme="dark"] .home-v2 .audience-agency{
  background:color-mix(in oklab,#f59e0b 9%,var(--card));
}

html[data-theme="dark"] .home-v2 .queue-card h3,
html[data-theme="dark"] .home-v2 .core-bento-card p,
html[data-theme="dark"] .home-v2 .queue-card p,
html[data-theme="dark"] .home-v2 .audience-card p,
html[data-theme="dark"] .home-v2 .habit-card p,
html[data-theme="dark"] .home-v2 .integration-tile span,
html[data-theme="dark"] .home-v2 .section-sub,
html[data-theme="dark"] .home-v2 .hero-note,
html[data-theme="dark"] .inner-v2 p:not(.eyebrow),
html[data-theme="dark"] .inner-v2 .check-list li{
  color:var(--muted-foreground);
}

html[data-theme="dark"] .home-v2 .queue-card>a::before,
html[data-theme="dark"] .home-v2 .core-bento-arrow::before,
html[data-theme="dark"] .home-v2 .habit-card>a::before,
html[data-theme="dark"] .home-v2 .ac-arrow{
  color:var(--foreground);
}

/* Make feature and workflow cards behave like the homepage queue cards. */
.core-bento-card,
.habit-card{
  cursor:pointer;
}

.core-bento-card>.core-bento-arrow,
.habit-card>a{
  position:absolute;
  inset:0;
  z-index:10;
  width:auto;
  height:auto;
  margin:0;
  display:block;
  border-radius:inherit;
  background:transparent;
  box-shadow:none;
  color:transparent;
  font-size:0;
}

.core-bento-card>.core-bento-arrow::before,
.habit-card>a::before{
  position:absolute;
  display:block;
  color:var(--foreground);
  font-size:26px;
  line-height:1;
  transition:transform .2s ease,color .2s ease;
}

.core-bento-card>.core-bento-arrow::before{
  top:26px;
  right:26px;
}

.habit-card>a::before{
  right:24px;
  bottom:22px;
}

.core-bento-card>.core-bento-arrow:hover,
.habit-card>a:hover{
  background:transparent;
  box-shadow:none;
  transform:none;
}

.core-bento-card>.core-bento-arrow:hover::before,
.habit-card>a:hover::before{
  color:var(--brand);
  transform:translateX(4px);
}

.core-bento-card>.core-bento-arrow:focus-visible,
.habit-card>a:focus-visible{
  outline:3px solid color-mix(in oklab,var(--brand) 62%,transparent);
  outline-offset:-4px;
}

@media (max-width:760px){
  .core-bento-card>.core-bento-arrow::before{top:22px;right:22px}
  .habit-card>a::before{right:20px;bottom:20px}
}

/* Features cards: keep the homepage-style full-card links, with a clear hover lift. */
.features-core-section .core-bento-card,
.support-habits-section .habit-card{
  transition:transform .24s cubic-bezier(.22,.61,.36,1),box-shadow .24s ease,border-color .24s ease;
  will-change:transform;
}

.features-core-section .core-bento-card:hover,
.features-core-section .core-bento-card:focus-within,
.support-habits-section .habit-card:hover,
.support-habits-section .habit-card:focus-within{
  transform:translateY(-7px) !important;
  border-color:color-mix(in oklab,var(--brand) 30%,var(--border));
  box-shadow:0 20px 42px color-mix(in oklab,var(--foreground) 14%,transparent) !important;
}

@media (prefers-reduced-motion:reduce){
  .features-core-section .core-bento-card,
  .support-habits-section .habit-card{
    transition:none;
  }

  .features-core-section .core-bento-card:hover,
  .features-core-section .core-bento-card:focus-within,
  .support-habits-section .habit-card:hover,
  .support-habits-section .habit-card:focus-within{
    transform:none !important;
  }
}

/* Final Smart Queue sizing pass: keep the section aligned with the main content column. */
@media (min-width:761px){
  .queue-peek-section .container{
    width:min(1280px,calc(100% - 48px));
  }

  .queue-peek-section .queue-card{
    min-height:380px;
  }

  .queue-peek-section .queue-card h3{
    margin-top:176px;
  }
}

.queue-peek-section .queue-card>a::before{
  top:24px;
  right:24px;
  bottom:auto;
}

@media (max-width:760px){
  .queue-peek-section .queue-card{
    min-height:390px;
  }

  .queue-peek-section .queue-card h3{
    margin-top:178px;
  }

  .queue-peek-section .queue-card>a::before{
    top:20px;
    right:20px;
    bottom:auto;
  }
}

/* Keep the hero CTAs side-by-side on mobile. */
@media (max-width:760px){
  .home-v2 .ref-hero .hero-cta-row{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
    flex-wrap:unset;
  }

  .home-v2 .ref-hero .hero-cta-row > a{
    width:100% !important;
    min-width:0;
    max-width:none;
    flex:none !important;
    min-height:46px;
    padding:0 6px;
    font-size:12px;
    white-space:nowrap;
  }
}

@media (max-width:380px){
  .home-v2 .ref-hero .hero-cta-row{gap:6px;}

  .home-v2 .ref-hero .hero-cta-row > a{
    padding:0 4px;
    font-size:11px;
  }
}

/* Shared card arrow language: line + chevron, matching the Who it's for cards. */
:root{
  --card-arrow-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.queue-card>a::before,
.core-bento-card>.core-bento-arrow::before,
.habit-card>a::before{
  content:"";
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid color-mix(in oklab,var(--brand) 14%,var(--border));
  border-radius:999px;
  background:var(--foreground);
  -webkit-mask:var(--card-arrow-mask) center / 24px 24px no-repeat;
  mask:var(--card-arrow-mask) center / 24px 24px no-repeat;
  box-shadow:0 7px 16px rgba(15,23,42,.08);
}

.queue-card>a::before{
  top:24px;
  right:24px;
  bottom:auto;
  color:var(--foreground);
}

.core-bento-card>.core-bento-arrow::before{
  top:26px;
  right:26px;
  color:var(--foreground);
}

.habit-card>a::before{
  right:24px;
  bottom:22px;
  color:var(--foreground);
}

.audience-card .ac-arrow{
  width:40px;
  height:40px;
  border:1px solid color-mix(in oklab,var(--brand) 14%,var(--border));
  border-radius:999px;
  background:var(--card);
  box-shadow:0 7px 16px rgba(15,23,42,.08);
}

.audience-card .ac-arrow svg{
  width:22px;
  height:22px;
}

/* Match the queue section's restrained desktop lift. */
.features-core-section .core-bento-card:hover,
.features-core-section .core-bento-card:focus-within,
.support-habits-section .habit-card:hover,
.support-habits-section .habit-card:focus-within,
.who-section .audience-card:hover,
.who-section .audience-card:focus-within{
  transform:translateY(-3px) !important;
  border-color:color-mix(in oklab,var(--brand) 18%,var(--border));
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 24px 60px rgba(15,23,42,.08) !important;
}

.audience-card:hover .ac-arrow{
  transform:translateX(3px);
}

/* Touch layouts: no card hover/lift; only the visible arrow button is a link. */
@media (max-width:760px){
  .queue-card:hover,
  .features-core-section .core-bento-card:hover,
  .features-core-section .core-bento-card:focus-within,
  .support-habits-section .habit-card:hover,
  .support-habits-section .habit-card:focus-within,
  .who-section .audience-card:hover,
  .who-section .audience-card:focus-within{
    transform:none !important;
    border-color:var(--border);
    box-shadow:var(--shadow-xs) !important;
  }

  .queue-card,
  .features-core-section .core-bento-card,
  .support-habits-section .habit-card,
  .who-section .audience-card{
    cursor:default;
  }

  .queue-card>a,
  .core-bento-card>.core-bento-arrow,
  .habit-card>a,
  .audience-card>a{
    inset:auto;
    top:18px;
    right:18px;
    bottom:auto;
    left:auto;
    width:42px;
    height:42px;
    margin:0;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in oklab,var(--brand) 16%,var(--border));
    border-radius:999px;
    background:color-mix(in oklab,var(--card) 86%,var(--brand-subtle));
    box-shadow:0 8px 18px rgba(15,23,42,.1);
    pointer-events:auto;
  }

  .queue-card>a::before,
  .core-bento-card>.core-bento-arrow::before,
  .habit-card>a::before{
    top:50% !important;
    right:auto !important;
    bottom:auto !important;
    left:50%;
    width:24px;
    height:24px;
    border:0;
    background:var(--foreground);
    box-shadow:none;
    -webkit-mask-size:24px 24px;
    mask-size:24px 24px;
    transform:translate(-50%,-50%) !important;
  }

  .queue-card>a:hover::before,
  .core-bento-card>.core-bento-arrow:hover::before,
  .habit-card>a:hover::before,
  .queue-card>a:active::before,
  .core-bento-card>.core-bento-arrow:active::before,
  .habit-card>a:active::before{
    color:var(--foreground);
    transform:translate(-50%,-50%) !important;
  }

  .audience-card .ac-arrow{
    width:42px;
    height:42px;
    margin-left:auto;
  }

  .audience-card .ac-arrow svg{
    width:22px;
    height:22px;
  }

  .audience-card:hover .ac-arrow,
  .audience-card:focus-within .ac-arrow{
    transform:none;
  }
}

html[data-theme="dark"] .queue-card>a::before,
html[data-theme="dark"] .core-bento-card>.core-bento-arrow::before,
html[data-theme="dark"] .habit-card>a::before{
  background:var(--foreground);
}

/* Use the actual line-and-chevron SVG on every card control. */
.queue-card>a::before,
.core-bento-card>.core-bento-arrow::before,
.habit-card>a::before{
  display:none !important;
}

.queue-card>a,
.core-bento-card>.core-bento-arrow,
.habit-card>a{
  color:var(--foreground);
}

.card-arrow-icon{
  position:absolute;
  display:block;
  width:40px;
  height:40px;
  padding:8px;
  border:1px solid color-mix(in oklab,var(--brand) 14%,var(--border));
  border-radius:999px;
  background:var(--card);
  color:var(--foreground);
  box-shadow:0 7px 16px rgba(15,23,42,.08);
  transition:transform .2s ease,color .2s ease,background-color .2s ease;
  pointer-events:none;
}

.queue-card>a .card-arrow-icon{
  top:24px;
  right:24px;
}

.core-bento-card>.core-bento-arrow .card-arrow-icon{
  top:26px;
  right:26px;
}

.habit-card>a .card-arrow-icon{
  right:24px;
  bottom:22px;
}

.queue-card:hover>a .card-arrow-icon,
.core-bento-card>.core-bento-arrow:hover .card-arrow-icon,
.habit-card>a:hover .card-arrow-icon{
  color:var(--brand);
  transform:translateX(3px);
}

@media (max-width:760px){
  .queue-card>a .card-arrow-icon,
  .core-bento-card>.core-bento-arrow .card-arrow-icon,
  .habit-card>a .card-arrow-icon{
    position:static;
    width:24px;
    height:24px;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
    transform:none !important;
  }

  .audience-card>a{
    top:24px;
    right:24px;
    width:40px;
    height:40px;
    background:transparent;
    border:0;
    box-shadow:none;
  }

  .queue-card>a:hover .card-arrow-icon,
  .core-bento-card>.core-bento-arrow:hover .card-arrow-icon,
  .habit-card>a:hover .card-arrow-icon{
    color:var(--foreground);
    transform:none !important;
  }
}

/* Marketing QA: restore dark-mode contrast and shared content alignment. */
html[data-theme="dark"] .home-v2 .integration-tile strong,
html[data-theme="dark"] .home-v2 .footer-grid-v2 h4,
html[data-theme="dark"] .home-v2 .habit-card h3,
html[data-theme="dark"] .inner-v2 .integration-tile strong,
html[data-theme="dark"] .inner-v2 .footer-grid-v2 h4,
html[data-theme="dark"] .inner-v2 .habit-card h3{
  color:var(--foreground);
}

html[data-theme="dark"] .home-v2 .habit-card,
html[data-theme="dark"] .inner-v2 .habit-card{
  background:var(--card);
}

html[data-theme="dark"] .inner-v2 .pricing-compare thead th{
  color:var(--foreground);
  border-color:var(--border);
}

html[data-theme="dark"] .inner-v2 .pricing-compare tbody th,
html[data-theme="dark"] .inner-v2 .pricing-compare tbody td{
  color:var(--muted-foreground)!important;
  border-color:var(--border);
}

html[data-theme="dark"] .inner-v2 .pricing-compare tbody tr:hover{
  background:color-mix(in oklab,var(--brand) 8%,var(--card));
}

.inner-v2 .pricing-compare{
  width:100%;
  max-width:none;
}

/* Touch layouts: queue cards appear immediately and stay visually flat. */
@media (max-width:760px){
  .home-v2 .queue-slider .reveal,
  .home-v2 .queue-slider .reveal.in-view{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  .home-v2 .queue-slider .queue-card,
  .home-v2 .queue-slider .queue-card:hover,
  .home-v2 .queue-slider .queue-card:focus-within{
    transform:none!important;
    box-shadow:var(--shadow-xs)!important;
  }
}