/* 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:54%;
}

.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;
  }
}

/* Homepage hero: conversational AI workflow, inspired by Inspira UI's
   aurora background and blur-reveal motion language. */
.home-v2 .ref-hero.hero-rework{
  position:relative;
  min-height:1010px;
  padding:122px 0 0;
  overflow:hidden;
  border-bottom:0;
  background:#fff;
  isolation:isolate;
}

.hero-rework::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-12%;
  bottom:-24%;
  width:58%;
  height:68%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.12),rgba(167,139,250,.045) 46%,transparent 72%);
  filter:blur(28px);
  pointer-events:none;
}

.hero-aurora{
  position:absolute;
  z-index:-1;
  top:-320px;
  left:50%;
  width:1120px;
  height:720px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 58%,rgba(109,40,217,.10),rgba(167,139,250,.04) 42%,transparent 72%);
  filter:blur(18px);
  opacity:.88;
  pointer-events:none;
  animation:hero-aurora-drift 14s ease-in-out infinite alternate;
}

.home-v2 .hero-rework .ref-hero-copy{
  position:relative;
  z-index:4;
  text-align:center;
  animation:hero-blur-in .75s cubic-bezier(.2,.72,.2,1) both;
}

.home-v2 .hero-rework h1{
  max-width:980px;
  margin:0 auto 18px;
  color:#111528;
  font-size:clamp(40px,4.05vw,58px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.045em;
}

.home-v2 .hero-rework h1 span{
  display:block;
  color:transparent;
  background:linear-gradient(90deg,#7c3aed 8%,#6d28d9 52%,#8b5cf6 92%);
  -webkit-background-clip:text;
  background-clip:text;
}

.home-v2 .hero-rework .ref-hero-copy>p{
  max-width:700px;
  margin:0 auto;
  color:#667085;
  font-size:17px;
  line-height:1.55;
}

.home-v2 .hero-rework .hero-cta-row{
  gap:16px;
  margin-top:23px;
}

.home-v2 .hero-rework .hero-cta-row>a{
  min-height:44px;
  padding:0 25px;
  border-radius:9px;
  font-size:14px;
  font-weight:800;
}

.home-v2 .hero-rework .solid-btn{
  border-color:#6d28d9;
  background:linear-gradient(180deg,#7c3aed,#6d28d9);
  box-shadow:0 9px 22px rgba(109,40,217,.25),inset 0 1px rgba(255,255,255,.22);
}

.home-v2 .hero-rework .outline-btn{
  border-color:#d8dce5;
  background:rgba(255,255,255,.9);
  color:#171923;
  box-shadow:0 5px 14px rgba(15,23,42,.045);
}

.hero-demo-btn svg{
  width:17px;
  height:17px;
  margin-left:3px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linejoin:round;
}

.hero-proof-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-top:20px;
  color:#778198;
  font-size:12px;
  font-weight:600;
}

.hero-proof-row>span{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.hero-proof-row>span+span::before{
  content:"";
  width:1px;
  height:12px;
  margin:0 16px;
  background:#d5d9e2;
}

.hero-proof-row i{
  display:grid;
  place-items:center;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#f0eaff;
  color:#7c3aed;
  font-size:9px;
  font-style:normal;
  font-weight:900;
}

.hero-demo-stage{
  position:relative;
  z-index:2;
  width:min(1370px,calc(100% - 40px));
  height:595px;
  margin:27px auto 0;
  animation:hero-stage-in .9s .12s cubic-bezier(.2,.72,.2,1) both;
}

.hero-app-ghost{
  position:absolute;
  inset:0 45px;
  overflow:hidden;
  border:1px solid rgba(230,226,246,.66);
  border-radius:24px 24px 0 0;
  background:rgba(255,255,255,.72);
  box-shadow:0 -8px 44px rgba(69,41,121,.055);
}

.hero-app-ghost::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.80) 55%,#fff 100%);
  backdrop-filter:blur(2.5px);
}

.hero-app-ghost img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  opacity:.22;
  filter:saturate(.45) blur(1px);
}

.hero-ticket-card{
  position:absolute;
  z-index:4;
  top:23px;
  left:50%;
  width:690px;
  min-height:507px;
  padding:23px 25px 20px;
  transform:translateX(-50%);
  overflow:hidden;
  border:1px solid #dddff0;
  border-radius:18px;
  background:rgba(255,255,255,.96);
  color:#151927;
  box-shadow:0 26px 58px rgba(54,38,87,.13),0 2px 8px rgba(54,38,87,.05);
  backdrop-filter:blur(18px);
}

.ticket-customer{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto auto 18px;
  align-items:center;
  gap:10px;
}

.ticket-avatar{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#eee8ff;
  color:#7c3aed;
  font-size:14px;
  font-weight:800;
}

.ticket-customer-copy,
.ticket-name{
  display:block;
}

.ticket-name{
  font-size:14px;
  font-weight:800;
}

.ticket-name em{
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  border-radius:6px;
  background:#f0eaff;
  color:#7c3aed;
  font-size:10px;
  font-style:normal;
  line-height:1.2;
  vertical-align:1px;
}

.ticket-customer-copy small{
  display:block;
  margin-top:3px;
  color:#697386;
  font-size:10.5px;
}

.ticket-customer-copy small i{
  display:inline-block;
  width:3px;
  height:3px;
  margin:0 5px;
  border-radius:50%;
  background:#a4abba;
  vertical-align:2px;
}

.ticket-status{
  padding:6px 13px;
  border-radius:7px;
  background:#f0eaff;
  color:#7c3aed;
  font-size:11px;
  font-weight:800;
}

.ticket-age{
  color:#657086;
  font-size:10px;
  white-space:nowrap;
}

.ticket-customer button{
  padding:0;
  border:0;
  background:transparent;
  color:#657086;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}

.ticket-message{
  margin:19px 0 14px;
  color:#171a24;
  font-size:13.5px;
  line-height:1.5;
}

.ai-analysis{
  padding-top:8px;
  border-top:1px solid #ececf2;
}

.ticket-section-label{
  margin:0 0 8px;
  color:#485265;
  font-size:11px;
  font-weight:700;
}

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

.analysis-cell{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-height:72px;
  padding:12px 10px;
  border:1px solid #e4e5ec;
  border-radius:9px;
  background:#fff;
}

.analysis-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:20px;
  height:20px;
  border-radius:50%;
  color:#fff;
  font-size:11px;
  font-weight:900;
}

.icon-slate{background:#788293}.icon-green{background:#5fbe72}.icon-orange{background:#ff9e4d}.icon-purple{background:#b782eb}
.analysis-cell b,.analysis-cell small{display:block}
.analysis-cell b{font-size:10.5px;line-height:1.2}
.analysis-cell small{margin-top:7px;color:#667085;font-size:9.5px;line-height:1.25}
.analysis-cell small em{display:inline-block;margin-top:5px;padding:2px 5px;border-radius:4px;background:#dcf4e3;color:#257846;font-size:8px;font-style:normal;font-weight:800}

.suggested-reply{
  margin-top:12px;
}

.suggested-reply .ticket-section-label{
  display:flex;
  align-items:center;
  gap:7px;
  color:#31384a;
}

.suggested-reply .ticket-section-label span{
  color:#7c3aed;
  font-size:15px;
}

.reply-copy{
  padding:12px 14px;
  border-radius:10px;
  background:linear-gradient(105deg,#faf7ff,#f4effb);
  color:#303548;
  font-size:11px;
  line-height:1.5;
}

.ticket-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:11px;
}

.ticket-actions button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  padding:0 15px;
  border-radius:8px;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.edit-reply{
  border:1px solid #d9dce5;
  background:#fff;
  color:#252a36;
}

.edit-reply span{color:#6d5ba0;font-size:15px}
.approve-reply{border:1px solid #6d28d9;background:#6d28d9;color:#fff;box-shadow:0 5px 13px rgba(109,40,217,.21)}
.approve-reply svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.hero-signal{
  position:absolute;
  z-index:5;
  display:flex;
  align-items:center;
  gap:13px;
  width:214px;
  min-height:79px;
  padding:14px 17px;
  border:1px solid rgba(232,230,241,.9);
  border-radius:15px;
  background:rgba(255,255,255,.93);
  box-shadow:0 18px 42px rgba(56,42,82,.10);
  backdrop-filter:blur(14px);
}

.hero-signal b,.hero-signal strong,.hero-signal small{display:block}
.hero-signal b{color:#202431;font-size:11px;line-height:1.2}
.hero-signal strong{margin-top:6px;color:#6d28d9;font-size:13px;line-height:1.2}
.hero-signal small{margin-top:5px;color:#687286;font-size:9.5px}
.signal-icon{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:50%}
.signal-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.signal-green{color:#27ae60;background:#e7f8ee}.signal-violet{color:#7c3aed;background:#f0eaff}.signal-stars{color:#6d28d9;background:#f3edff;font-size:22px}
.agent-avatar{display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:linear-gradient(145deg,#d7dded,#8864cf);color:#fff;box-shadow:0 0 0 1px #e3e5ec;font-size:11px;font-weight:900}
.hero-signal-agent strong{color:#222632}
.hero-signal-sla{top:132px;left:0}
.hero-signal-time{top:262px;left:0}
.hero-signal-agent{top:186px;right:0;width:225px}
.hero-signal-confidence{top:320px;right:0}

.signal-connector{
  position:absolute;
  z-index:3;
  height:45px;
  border-color:#c8adff;
  border-style:dashed;
  opacity:.9;
}

.connector-sla{top:172px;left:214px;width:calc(50% - 559px);border-width:1px 0 0}
.connector-time{top:302px;left:214px;width:calc(50% - 559px);border-width:1px 0 0}
.connector-agent{top:226px;right:225px;width:calc(50% - 570px);border-width:1px 0 0}
.connector-confidence{top:360px;right:214px;width:calc(50% - 559px);border-width:1px 0 0}

@keyframes hero-aurora-drift{
  from{transform:translateX(-52%) scale(.96);opacity:.66}
  to{transform:translateX(-48%) scale(1.06);opacity:1}
}

@keyframes hero-blur-in{
  from{opacity:0;transform:translateY(16px);filter:blur(9px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

@keyframes hero-stage-in{
  from{opacity:0;transform:translateY(24px) scale(.985);filter:blur(7px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

html[data-theme="dark"] .home-v2 .ref-hero.hero-rework{
  background:var(--background);
}

html[data-theme="dark"] .home-v2 .hero-rework h1{color:var(--foreground)}
html[data-theme="dark"] .home-v2 .hero-rework .ref-hero-copy>p{color:var(--muted-foreground)}
html[data-theme="dark"] .hero-app-ghost{background:rgba(20,18,28,.72);border-color:var(--border)}
html[data-theme="dark"] .hero-app-ghost::after{background:linear-gradient(180deg,rgba(17,15,24,.6),rgba(17,15,24,.78) 55%,var(--background) 100%)}
html[data-theme="dark"] .hero-ticket-card,html[data-theme="dark"] .hero-signal{background:rgba(29,26,39,.94);border-color:var(--border);color:var(--foreground)}
html[data-theme="dark"] .ticket-name,html[data-theme="dark"] .ticket-message,html[data-theme="dark"] .hero-signal b,html[data-theme="dark"] .hero-signal-agent strong{color:var(--foreground)}
html[data-theme="dark"] .ai-analysis{border-color:var(--border)}
html[data-theme="dark"] .analysis-cell{background:var(--card);border-color:var(--border)}
html[data-theme="dark"] .reply-copy{background:color-mix(in oklab,var(--brand) 12%,var(--card));color:var(--foreground)}
html[data-theme="dark"] .edit-reply{background:var(--card);border-color:var(--border);color:var(--foreground)}
html[data-theme="dark"] .hero-proof-row{color:var(--muted-foreground)}

@media (max-width:1180px){
  .hero-signal{width:180px;padding:12px}
  .hero-signal-agent{width:190px}
  .hero-signal-sla,.hero-signal-time{left:-8px}
  .hero-signal-agent,.hero-signal-confidence{right:-8px}
  .connector-sla,.connector-time,.connector-agent,.connector-confidence{display:none}
}

@media (max-width:960px){
  .home-v2 .ref-hero.hero-rework{min-height:960px;padding-top:112px}
  .home-v2 .hero-rework h1{max-width:780px;font-size:clamp(38px,6vw,52px)}
  .hero-demo-stage{width:min(760px,calc(100% - 28px));height:590px;margin-top:28px}
  .hero-app-ghost{inset:0}
  .hero-ticket-card{top:24px;width:min(690px,calc(100% - 42px))}
  .hero-signal{display:none}
}

@media (max-width:700px){
  .home-v2 .ref-hero.hero-rework{min-height:925px;padding-top:96px}
  .home-v2 .hero-rework h1{font-size:clamp(34px,9vw,46px);line-height:1.04}
  .home-v2 .hero-rework .ref-hero-copy>p{max-width:570px;font-size:15px;line-height:1.5}
  .hero-proof-row{justify-content:flex-start;gap:10px;overflow-x:auto;width:calc(100% + 26px);margin-left:-13px;padding:0 13px 6px;scrollbar-width:none}
  .hero-proof-row::-webkit-scrollbar{display:none}
  .hero-proof-row>span+span::before{display:none}
  .hero-proof-row>span{padding:6px 9px;border:1px solid #ece8f5;border-radius:999px;background:rgba(255,255,255,.76)}
  .hero-demo-stage{width:calc(100% - 18px);height:570px;margin-top:14px}
  .hero-app-ghost{display:none}
  .hero-ticket-card{top:0;width:100%;padding:18px 16px;border-radius:16px}
  .analysis-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analysis-cell{min-height:62px}
}

@media (max-width:520px){
  .home-v2 .ref-hero.hero-rework{min-height:900px;padding-top:88px}
  .home-v2 .hero-rework h1{font-size:34px;letter-spacing:-.04em}
  .home-v2 .hero-rework .hero-cta-row{display:grid!important;grid-template-columns:1.3fr 1fr;gap:8px}
  .home-v2 .hero-rework .hero-cta-row>a{min-height:44px!important;padding:0 8px!important;font-size:11px!important}
  .hero-ticket-card{min-height:0}
  .ticket-customer{grid-template-columns:38px minmax(0,1fr) auto 15px;gap:7px}
  .ticket-age{display:none}
  .ticket-avatar{width:34px;height:34px;font-size:12px}
  .ticket-message{font-size:12px}
  .analysis-cell{padding:9px 8px}
  .reply-copy{font-size:10px}
  .ticket-actions button{padding:0 10px;font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  .hero-aurora,.home-v2 .hero-rework .ref-hero-copy,.hero-demo-stage{animation: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;
  }
}

/* ============================================================
   HERO v3 — inverted ink-violet opening band
   Replaces .ref-hero.hero-rework (centered, white, gradient-text).
   Left-aligned argument + the ticket artifact as the hero image.
   ============================================================ */

.hero-v3{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:150px 0 130px;
  background:#100a20;
  color:#fff;
}

/* --- ground --------------------------------------------------- */
.hero-v3-field{position:absolute;inset:0;z-index:-1;pointer-events:none}

.hero-v3-field::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 88% at 50% -6%, #2a1656 0%, rgba(42,22,86,0) 58%),
    radial-gradient(96% 74% at 8% 96%, #1d1142 0%, rgba(29,17,66,0) 62%),
    linear-gradient(168deg,#140c28 0%,#100a20 46%,#0c0719 100%);
}

.hv3-bloom{position:absolute;border-radius:50%;filter:blur(64px)}

.hv3-bloom-a{
  top:-260px;left:50%;
  width:900px;height:620px;
  margin-left:-450px;
  background:radial-gradient(circle,rgba(124,58,237,.42),rgba(124,58,237,0) 68%);
}

.hv3-bloom-b{
  bottom:-320px;left:-180px;
  width:700px;height:560px;
  background:radial-gradient(circle,rgba(76,29,149,.40),rgba(76,29,149,0) 70%);
}

/* faint lavender depth grid, fading out toward the edges so it reads
   as atmosphere behind the claim rather than a drawn pattern */
.hv3-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(196,181,253,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(196,181,253,.16) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(58% 52% at 50% 34%,#000 0%,transparent 76%);
  -webkit-mask-image:radial-gradient(58% 52% at 50% 34%,#000 0%,transparent 76%);
}

.hv3-grain{
  position:absolute;inset:0;
  opacity:.3;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27180%27 height=%27180%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%273%27/%3E%3C/filter%3E%3Crect width=%27180%27 height=%27180%27 filter=%27url(%23n)%27 opacity=%27.5%27/%3E%3C/svg%3E");
}

/* a single hairline closes the band against the section below */
.hero-v3::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(167,139,250,0),rgba(167,139,250,.34),rgba(167,139,250,0));
}

/* --- composition: type only. No product artifact in the hero at
   all, so there is nothing to fake. Centred, because there is
   nothing beside it to balance against. --------------------------- */
.hero-v3-top{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
}

.hero-v3-copy{max-width:680px;text-align:center}

/* --- type ------------------------------------------------------ */
.home-v2 .hero-v3 h1{
  margin:0 0 22px;
  font-size:clamp(38px,4.6vw,68px);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.044em;
  text-wrap:balance;
}

.home-v2 .hero-v3 h1 .hv3-line-a{display:block;color:rgba(255,255,255,.58)}
.home-v2 .hero-v3 h1 .hv3-line-b{display:block;color:#fff}

.hero-v3-sub{
  max-width:54ch;
  margin:0 auto;
  color:#c6bce3;
  font-size:17.5px;
  line-height:1.58;
}

/* --- calls to action ------------------------------------------- */
.hero-v3-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}

.hv3-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 26px;
  border:1px solid transparent;
  border-radius:10px;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.72,.2,1),box-shadow .18s cubic-bezier(.2,.72,.2,1),background-color .18s ease,border-color .18s ease;
}

.hv3-btn-primary{
  border-color:#7c3aed;
  background:linear-gradient(180deg,#8b5cf6,#6d28d9);
  color:#fff;
  box-shadow:0 12px 26px rgba(76,29,149,.46),inset 0 1px rgba(255,255,255,.26);
}

.hv3-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(76,29,149,.56),inset 0 1px rgba(255,255,255,.3);
}

.hv3-btn-ghost{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.05);
  color:#fff;
}

.hv3-btn-ghost:hover{
  border-color:rgba(255,255,255,.46);
  background:rgba(255,255,255,.1);
  transform:translateY(-1px);
}

.hv3-btn-ghost svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s cubic-bezier(.2,.72,.2,1);
}

.hv3-btn-ghost:hover svg{transform:translateX(3px)}

.hv3-btn:focus-visible{
  outline:2px solid #c4b5fd;
  outline-offset:3px;
}

/* --- proof -------------------------------------------------------
   Grid of 2 by default so 4 items never orphan a lone last item;
   widened to a single centered row once the viewport has slack. --- */
.hero-v3-proof{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,max-content));
  justify-content:center;
  gap:11px 22px;
  margin:32px 0 0;
  padding:0;
  list-style:none;
}

@media (min-width:1120px){
  .hero-v3-proof{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    width:960px;
    max-width:960px;
    margin-left:-140px;
    gap:11px 26px;
  }
}

.hero-v3-proof li{
  display:flex;
  align-items:center;
  gap:9px;
  color:#cfc6e8;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.005em;
}

.hero-v3-proof svg{
  flex:0 0 auto;
  width:16px;height:16px;
  padding:2px;
  border-radius:50%;
  background:rgba(167,139,250,.18);
  fill:none;stroke:#c4b5fd;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* --- showcase: the real product, peeking up from the fold --------
   Sits between the hero and the next section (not inside hero-v3,
   which clips overflow) and is pulled up on a negative top margin
   so it overlaps the ink band. Only its top slice shows; the hard
   crop plus the drop shadow read as an intentional peek. */
.hero-showcase{
  position:relative;
  z-index:2;
  margin:-210px auto 0;
  max-width:1040px;
  padding:0 24px;
}

.hero-showcase-frame{
  position:relative;
  overflow:hidden;
  height:clamp(200px,27vw,336px);
  border-radius:16px;
  border:1px solid rgba(196,181,253,.24);
  background:#f4f5f7;
  box-shadow:
    0 46px 100px rgba(6,2,16,.5),
    0 0 0 1px rgba(124,58,237,.1),
    0 -1px 0 rgba(255,255,255,.08) inset;
}

.hero-showcase-frame img{
  display:block;
  width:100%;
  height:auto;
}

@media (max-width:980px){
  .hero-showcase{margin-top:-160px}
}

@media (max-width:760px){
  .hero-showcase{margin-top:-120px;padding:0 18px}
  .hero-showcase-frame{border-radius:14px}
}

/* --- the one authored moment ------------------------------------
   Hidden state lives only inside the keyframe, so the default
   render (no CSS animation, no JS) is already visible.           */
@keyframes hv3-rise{
  from{opacity:.001;transform:translateY(30px) scale(.986);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

.hero-v3-copy{animation:hv3-rise .82s cubic-bezier(.16,.86,.24,1) both}

@media (prefers-reduced-motion:reduce){
  .hero-v3-copy{animation:none}
  .hv3-btn:hover{transform:none}
}

/* --- responsive -------------------------------------------------- */
@media (max-width:1180px){
  .hero-v3{padding:130px 0 108px}
  .home-v2 .hero-v3 h1{font-size:clamp(36px,5vw,56px)}
  .hero-v3-sub{font-size:16px}
}

@media (max-width:960px){
  .hero-v3{padding:112px 0 92px}
  .hero-v3-copy{max-width:560px}
  .home-v2 .hero-v3 h1{font-size:clamp(33px,6.2vw,46px)}
}

@media (max-width:700px){
  .hero-v3{padding:96px 0 72px}
  .home-v2 .hero-v3 h1{font-size:clamp(30px,7.4vw,38px);letter-spacing:-.036em}
  .hero-v3-sub{font-size:15.5px;line-height:1.55}
  .hero-v3-cta{gap:10px;margin-top:26px}
  .hv3-btn{width:100%;padding:0 18px}
  /* 2x2, never a hidden-scrollbar carousel */
  .hero-v3-proof{gap:12px 16px;margin-top:28px}
  .hero-v3-proof li{font-size:12.5px}
}
/* ================================================================
   HOMEPAGE REVAMP v6 — chapters
   Replaces the v4 pass. Extends the shipped HERO v3 language:
   ink-violet product surface, warm white reading space, quiet
   lavender tint, 9-18px geometry, authored product artifacts.
   Every chapter head is left-aligned; only the closer is centred.
   ================================================================ */

/* --- safety: reveal must never hide content if app.js fails ----- */
html:not(.js-ready) .reveal{opacity:1!important;transform:none!important}

/* ================================================================
   Boxed header
   ================================================================ */
#site-header{
  top:16px;
  right:auto;
  left:50%;
  width:min(1280px,calc(100% - 48px));
  transform:translateX(-50%);
  border:1px solid rgba(24,24,27,.09);
  border-bottom-color:rgba(24,24,27,.09);
  border-radius:999px;
  background:rgba(255,255,255,.93);
  box-shadow:0 10px 30px rgba(26,14,57,.14);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}

#site-header.scrolled{
  border-color:rgba(24,24,27,.11);
  background:rgba(255,255,255,.97);
  box-shadow:0 14px 38px rgba(26,14,57,.16);
}

#site-header .nav-wrap{min-height:64px;gap:22px}
#site-header .nav-links{gap:27px}
#site-header .nav-links a{font-size:13.5px;white-space:nowrap}
#site-header .nav-actions{gap:10px}
#site-header .auth-link,
#site-header .auth-btn{white-space:nowrap}
#site-header .brand-name{white-space:nowrap}

html[data-theme="dark"] #site-header{
  border-color:rgba(255,255,255,.13);
  background:rgba(23,18,36,.93);
  box-shadow:0 12px 34px rgba(0,0,0,.34);
}

html[data-theme="dark"] #site-header.scrolled{
  border-color:rgba(255,255,255,.16);
  background:rgba(23,18,36,.97);
}

/* closed shell is a full pill; expanded mobile drawer keeps deliberate corners */
#site-header:has(.mobile-nav:not([hidden])){border-radius:24px}
.mobile-nav{border-radius:0 0 24px 24px}

/* ================================================================
   Head room — the ink band opens well clear of the floating header
   ================================================================ */
.home-v2 .hero-v3{padding:176px 0 96px}
.home-v2 .hero-v3-copy{padding-top:6px}

/* ================================================================
   Chapter frame
   ================================================================ */
.chapter{
  position:relative;
  isolation:isolate;
  padding:104px 0;
}

.chapter-paper{background:#fff}
.chapter-tint{background:#f5f3fb}
.chapter-ink{overflow:hidden;background:#100a20;color:#fff}

.ink-field{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}

.ink-bloom{
  position:absolute;
  top:-240px;right:-170px;
  width:760px;height:620px;
  border-radius:50%;
  filter:blur(72px);
  background:radial-gradient(circle,rgba(124,58,237,.36),rgba(124,58,237,0) 68%);
}

.ink-bloom-close{
  top:auto;right:auto;
  bottom:-300px;left:50%;
  width:980px;height:680px;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(124,58,237,.32),rgba(124,58,237,0) 66%);
}

.chapter-head{max-width:730px;margin:0 0 56px}

.chapter-head h2{
  margin:0;
  color:var(--foreground);
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(33px,3.5vw,50px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.chapter-head p{
  max-width:58ch;
  margin:18px 0 0;
  color:var(--muted-foreground);
  font-size:17px;
  line-height:1.62;
}

.chapter-ink .chapter-head h2{color:#fff}
.chapter-ink .chapter-head p{color:#bdb2d9}

.chapter-head-split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:36px;
  max-width:none;
}

.chapter-head-split > div{max-width:660px}
.chapter-head-split p{margin-bottom:2px}

.chapter-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--brand-strong);
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  text-decoration:none;
}

.chapter-link svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s cubic-bezier(.2,.72,.2,1);
}

.chapter-link:hover{color:var(--brand)}
.chapter-link:hover svg{transform:translateX(4px)}
.chapter-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ================================================================
   Chapter 1 — the on-ramp, three steps on a drawn rail
   ================================================================ */
.onramp{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:46px;
  margin:0;
  padding:0;
  list-style:none;
}

/* the rail encodes the sequence, so no 01/02/03 numerals are needed */
.onramp-step:not(:last-child)::before{
  content:"";
  position:absolute;
  top:27px;
  left:54px;
  width:calc(100% + 46px - 54px);
  height:1px;
  transform-origin:0 50%;
  background:linear-gradient(90deg,
    color-mix(in oklab,var(--brand) 42%,transparent) 0%,
    var(--border) 100%);
}

.onramp.in-view .onramp-step:not(:last-child)::before{animation:railDraw .9s cubic-bezier(.16,1,.3,1) .12s both}

@keyframes railDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.onramp-step{position:relative;display:flex;flex-direction:column;align-items:flex-start}

.onramp-node{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:54px;height:54px;
  margin-bottom:26px;
  border-radius:15px;
  color:#fff;
  background:linear-gradient(158deg,#8b5cf6 0%,#5919c2 100%);
  box-shadow:0 10px 22px rgba(89,25,194,.26),0 0 0 9px #fff;
}

.onramp-node svg{
  width:25px;height:25px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

.onramp-step .chapter-link{margin-top:auto}

.onramp-step h3{
  margin:0 0 12px;
  color:var(--foreground);
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:23px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.022em;
}

.onramp-step > p{
  margin:0 0 22px;
  color:#5a5270;
  font-size:15.5px;
  line-height:1.65;
}

/* ================================================================
   Chapter 2 — operating rhythm: top tab bar + one screenshot panel
   ================================================================ */
.rhythm-tabs-bar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 28px;
  padding:6px;
  border:1px solid #e5e0f2;
  border-radius:16px;
  background:#fff;
}

.rhythm-tab{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 200px;
  padding:12px 16px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#5a5270;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}

.rhythm-tab:hover{background:#f5f3fb;color:#20172f}
.rhythm-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.rhythm-tab.is-active{background:#ede7fb;color:#20172f}

.rhythm-tab-ic{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:34px;height:34px;
  border-radius:10px;
  background:rgba(109,40,217,.1);
  color:#6d28d9;
  transition:background-color .18s ease,color .18s ease;
}

.rhythm-tab.is-active .rhythm-tab-ic{background:#6d28d9;color:#fff}

.rhythm-tab-ic svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

.rhythm-tab-copy{display:grid;gap:1px}
.rhythm-tab-copy strong{font-size:14px;font-weight:700;letter-spacing:-.01em}
.rhythm-tab-copy small{font-size:12px;color:#847c96}
.rhythm-tab.is-active .rhythm-tab-copy small{color:#5a5270}

/* --- panels: only .is-active renders ----------------------------- */
.rhythm-panel{display:none}

.rhythm-panel.is-active{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:40px;
  align-items:center;
}

.rhythm-panel-copy h3{
  margin:0 0 12px;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(24px,2.6vw,30px);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.025em;
}

.rhythm-panel-copy p{margin:0 0 20px;color:#5a5270;font-size:15.5px;line-height:1.62}

.rhythm-panel-shot{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:16px;
  border:1px solid #e5e0f2;
  background:#eef0f5;
  box-shadow:0 22px 54px rgba(48,31,88,.12);
}

.rhythm-panel-shot img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:top;
}

.rhythm-panel-shot.is-contain{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}

.rhythm-panel-shot.is-contain img{
  width:auto;height:88%;
  max-width:88%;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 14px 34px rgba(48,31,88,.14);
}

.rhythm-panel-shot.is-pending{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-style:dashed;
  border-color:#d8d0e8;
  background:#faf9fd;
  color:#9a91ab;
}

.rhythm-pending-ic{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e5e0f2;
  color:#b3a9c4;
}

.rhythm-pending-ic svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

.rhythm-panel-shot.is-pending p{margin:0;font-size:13.5px;font-weight:600}

html[data-theme="dark"] .rhythm-tabs-bar{background:var(--card);border-color:#312b41}
html[data-theme="dark"] .rhythm-tab{color:#b4acc4}
html[data-theme="dark"] .rhythm-tab:hover{background:#241d33;color:#f2eef7}
html[data-theme="dark"] .rhythm-tab.is-active{background:#2a2140;color:#f2eef7}
html[data-theme="dark"] .rhythm-tab-ic{background:rgba(168,85,247,.14);color:#c4b5fd}
html[data-theme="dark"] .rhythm-tab.is-active .rhythm-tab-ic{background:#a855f7;color:#1a1233}
html[data-theme="dark"] .rhythm-tab-copy small{color:#8a8299}
html[data-theme="dark"] .rhythm-tab.is-active .rhythm-tab-copy small{color:#c9c0d9}
html[data-theme="dark"] .rhythm-panel-copy h3{color:var(--foreground)}
html[data-theme="dark"] .rhythm-panel-copy p{color:#b4acc4}
html[data-theme="dark"] .rhythm-panel-shot{border-color:#312b41;background:#1a1720;box-shadow:0 22px 54px rgba(0,0,0,.35)}
html[data-theme="dark"] .rhythm-panel-shot.is-contain{background:#0f0d16}
html[data-theme="dark"] .rhythm-panel-shot.is-pending{border-color:#3b334b;background:#1a1720;color:#7d7590}
html[data-theme="dark"] .rhythm-pending-ic{background:#211a2c;border-color:#3b334b;color:#8f86a3}

/* no-JS safety: show every panel rather than hide content behind
   tabs that will never receive a click handler */
html:not(.js-ready) .rhythm-panel{display:grid!important;margin-bottom:28px}
html:not(.js-ready) .rhythm-tabs-bar{display:none}

@media (max-width:900px){
  .rhythm-panel.is-active{grid-template-columns:minmax(0,1fr);gap:22px}
}

@media (max-width:640px){
  .rhythm-tabs-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:5px;gap:6px}
  .rhythm-tab{flex:none;padding:10px 12px}
  .rhythm-tab-copy small{display:none}
}

/* --- shared vignette vocabulary --------------------------------- */
.vig{
  display:grid;
  align-content:start;
  gap:8px;
  min-height:178px;
  padding:14px;
  border:1px solid #e5e0f2;
  border-radius:13px;
  background:linear-gradient(180deg,#faf9ff 0%,#f2effb 100%);
}

.vig-row{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 9px;
  border:1px solid #e8e3f4;
  border-radius:9px;
  background:#fff;
  box-shadow:0 1px 2px rgba(30,20,60,.045);
}

.vig-row-flat{box-shadow:none}

.vig-ic{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:24px;height:24px;
  border-radius:7px;
}

.vig-ic svg{
  width:14px;height:14px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

.vig-ic-blue{color:#1d4ed8;background:#dbeafe}
.vig-ic-violet{color:#5919c2;background:#ede9fe}
.vig-ic-green{color:#046c4e;background:#d1fae5}

.vig-t{
  display:grid;
  gap:1px;
  min-width:0;
  overflow:hidden;
  color:#241b3a;
  font-size:11.5px;
  font-weight:700;
  line-height:1.28;
}

.vig-t em{color:#655d7d;font-size:10.5px;font-style:normal;font-weight:600}

.vig-label{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 2px;
  color:#5919c2;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.vig-spark{width:13px;height:13px;fill:currentColor}

.vig-foot{
  display:flex;
  align-items:center;
  gap:8px;
  margin:auto 0 0;
  color:#5919c2;
  font-size:11.5px;
  font-weight:700;
}

.vig-brace{
  flex:0 0 auto;
  width:7px;height:7px;
  border-radius:50%;
  background:#8b5cf6;
  box-shadow:0 0 0 3px rgba(139,92,246,.18);
}

.vig-check{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:16px;height:16px;
  border-radius:50%;
  background:#d1fae5;
}

.vig-check svg{
  width:10px;height:10px;
  fill:none;stroke:#046c4e;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round;
}

.vig-draft{
  padding:11px;
  border:1px solid #e8e3f4;
  border-radius:9px;
  background:#fff;
}

.vig-draft p{margin:0;color:#3a3350;font-size:11.5px;line-height:1.52}

.vig-sources{display:flex;flex-wrap:wrap;gap:5px}

.vig-src{
  padding:3px 7px;
  border:1px solid #ddd3f0;
  border-radius:5px;
  color:#5919c2;
  background:#f3effc;
  font-size:10.5px;
  font-weight:700;
}

.vig-route{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid #e8e3f4;
  border-radius:9px;
  background:#fff;
}

.vig-route-from{color:#655d7d;font-size:11px;font-weight:700}

.vig-route-arrow{display:grid;place-items:center}

.vig-route-arrow svg{
  width:17px;height:17px;
  fill:none;stroke:#7c3aed;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

.vig-route-to{
  margin-left:auto;
  padding:3px 9px;
  border-radius:6px;
  color:#fff;
  background:linear-gradient(150deg,#8b5cf6,#5919c2);
  font-size:10.5px;
  font-weight:700;
}

.vig-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}

.vig-rule{
  display:grid;
  gap:2px;
  padding:7px 8px;
  border:1px solid #e8e3f4;
  border-radius:8px;
  background:#fff;
  color:#241b3a;
  font-size:11px;
  font-weight:700;
}

.vig-rule b{color:#655d7d;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}

.vig-av{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:24px;height:24px;
  border-radius:50%;
  color:#fff;
  background:#5919c2;
  font-size:9.5px;
  font-weight:800;
}

.vig-chart{
  display:flex;
  align-items:flex-end;
  gap:6px;
  height:78px;
  padding:10px;
  border:1px solid #e8e3f4;
  border-radius:9px;
  background:#fff;
}

.vig-chart span{
  flex:1;
  height:var(--h);
  border-radius:3px 3px 2px 2px;
  background:linear-gradient(180deg,#c4b5fd,#a78bfa);
}

.vig-chart span.is-risk{background:linear-gradient(180deg,#fbbf24,#e08c07)}

.vig-legend{display:flex;flex-wrap:wrap;gap:12px}

.vig-key{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#5a5270;
  font-size:10.5px;
  font-weight:700;
}

.vig-key::before{content:"";width:8px;height:8px;border-radius:2px}
.vig-key-ok::before{background:#a78bfa}
.vig-key-risk::before{background:#e08c07}

/* ================================================================
   Chapter 3 — the three objections, answered on ink
   ================================================================ */
.obj-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.obj-card{
  display:flex;
  flex-direction:column;
  padding:28px 26px 24px;
  border:1px solid #342a52;
  border-radius:18px;
  background:#191130;
}

.obj-lead{
  margin:0 0 20px;
  color:#c9b8f7;
  font-size:16.5px;
  font-weight:700;
  line-height:1.42;
  letter-spacing:-.015em;
}

.obj-card h3{
  margin:0 0 11px;
  color:#fff;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:23px;
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.025em;
}

.obj-body{margin:0 0 26px;color:#c0b5da;font-size:15px;line-height:1.62}

.obj-panel{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:auto;
  padding:13px 14px;
  border:1px solid #3d3160;
  border-radius:11px;
  background:#221838;
}

.obj-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%}
.obj-dot-violet{background:#a78bfa;box-shadow:0 0 0 4px rgba(167,139,250,.16)}
.obj-dot-green{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.16)}

.obj-panel-copy{display:grid;gap:2px;min-width:0}
.obj-panel-copy b{color:#fff;font-size:12.5px;font-weight:700}
.obj-panel-copy small{color:#b3a7cf;font-size:11.5px}

.obj-panel > strong{
  margin-left:auto;
  padding:4px 9px;
  border-radius:6px;
  color:#d5c6ff;
  background:rgba(167,139,250,.16);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.obj-stack{flex:0 0 auto;display:flex}

.obj-stack span{
  display:grid;
  place-items:center;
  width:24px;height:24px;
  margin-right:-6px;
  border:2px solid #221838;
  border-radius:50%;
  color:#fff;
  font-size:9.5px;
  font-weight:800;
}

.obj-stack span:nth-child(1){background:#6d28d9}
.obj-stack span:nth-child(2){background:#2563eb}
.obj-stack span:nth-child(3){background:#0f766e}

/* --- the queue rail: the honest, illustrative product view ------- */
.queue-rail{
  overflow:hidden;
  margin-top:18px;
  border:1px solid #342a52;
  border-radius:18px;
  background:#191130;
}

.queue-rail-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:20px 24px;
  border-bottom:1px solid #2c2348;
}

.queue-rail-head h3{
  margin:0;
  color:#fff;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.022em;
}

.queue-rail-head p{margin:0;color:#a99dc6;font-size:12.5px}

.queue-rows{margin:0;padding:0;list-style:none}

.queue-rows li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 130px auto;
  align-items:center;
  gap:15px;
  padding:15px 24px;
  border-bottom:1px solid #241c3d;
}

.queue-rows li:last-child{border-bottom:0}

.qr-status{width:9px;height:9px;border-radius:50%}
.qr-open{background:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,.16)}
.qr-risk{background:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,.18)}
.qr-owned{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.16)}

.qr-name{display:grid;gap:3px;min-width:0;color:#fff;font-size:14px;font-weight:650}
.qr-name em{color:#a99dc6;font-size:11.5px;font-style:normal;font-weight:500}

.qr-meta{color:#c0b5da;font-size:12.5px}

.qr-tag{
  padding:5px 10px;
  border-radius:7px;
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
}

.qr-tag-ok{color:#c9bef0;background:rgba(167,139,250,.14)}
.qr-tag-risk{color:#fcd34d;background:rgba(251,191,36,.15)}

/* ================================================================
   Chapter 4 — the stack you can connect
   ================================================================ */
.stack-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  column-gap:54px;
}

.stack-list{margin:0;padding:0;list-style:none}

.stack-list li{
  display:flex;
  align-items:center;
  gap:15px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}

.stack-list li:last-child{border-bottom:0}

.lg{flex:0 0 auto;display:grid;place-items:center;width:44px;height:33px}
.lg svg{width:100%;height:100%}
.lg-plain{color:#4f485f}

.lg-plain svg{
  width:24px;height:24px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

.stack-name{
  display:grid;
  gap:3px;
  min-width:0;
  color:var(--foreground);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
}

.stack-name em{color:#5a5270;font-size:13px;font-style:normal;font-weight:500;line-height:1.45}


/* ================================================================
   Chapter 5 — the price, before anyone has to hunt for it
   ================================================================ */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:28px 26px 26px;
  border:1px solid #e0d9f1;
  border-radius:18px;
  background:#fff;
}

.plan-card-featured{border-color:#5919c2;box-shadow:0 16px 38px rgba(89,25,194,.13)}

.plan-flag{
  position:absolute;
  top:-11px;left:26px;
  padding:5px 10px;
  border-radius:6px;
  color:#fff;
  background:linear-gradient(150deg,#8b5cf6,#5919c2);
  font-size:11px;
  font-weight:700;
}

.plan-card h3{
  margin:0;
  color:#4f485f;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.005em;
}

.plan-price{
  margin:8px 0 0;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:46px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
}

.plan-price span{margin-left:6px;color:#655d7d;font-size:13px;font-weight:600;letter-spacing:-.01em}

.plan-line{margin:14px 0 18px;color:#5a5270;font-size:14px;line-height:1.55}

.plan-list{
  display:grid;
  gap:9px;
  margin:0 0 26px;
  padding:18px 0 0;
  border-top:1px solid #eae5f5;
  list-style:none;
}

.plan-list li{position:relative;padding-left:24px;color:#3d3654;font-size:13.5px;line-height:1.45}

.plan-list li::before{
  content:"";
  position:absolute;
  top:4px;left:0;
  width:15px;height:15px;
  border-radius:50%;
  background:#ede7fb;
}

.plan-list li::after{
  content:"";
  position:absolute;
  top:8.5px;left:4px;
  width:6.5px;height:3.5px;
  border-left:1.7px solid #5919c2;
  border-bottom:1.7px solid #5919c2;
  transform:rotate(-45deg);
}

.plan-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:auto;
  padding:0 18px;
  border:1px solid #d5cbee;
  border-radius:11px;
  color:#3d3654;
  background:#fff;
  font-size:14px;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.72,.2,1),box-shadow .18s cubic-bezier(.2,.72,.2,1),background-color .18s ease,border-color .18s ease,color .18s ease;
}

.plan-cta:hover{border-color:#a78bfa;background:#faf8ff;color:#3f1d8f}

.plan-cta-solid{
  border-color:#5919c2;
  color:#fff;
  background:linear-gradient(180deg,#8b5cf6,#6d28d9);
  box-shadow:0 10px 22px rgba(89,25,194,.26);
}

.plan-cta-solid:hover{
  color:#fff;
  background:linear-gradient(180deg,#7f4cf3,#5c22b8);
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(89,25,194,.32);
}

.plan-cta:focus-visible{outline:2px solid #5919c2;outline-offset:3px}

/* ================================================================
   Closer — the page ends on the ink it opened with
   ================================================================ */
.chapter-close{padding:118px 0 126px}
.chapter-close .hv3-grain{position:absolute;inset:0;opacity:.26;mix-blend-mode:overlay}

.close-inner{max-width:700px;margin-inline:auto;text-align:center}

.close-inner h2{
  margin:0;
  color:#fff;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(33px,3.6vw,52px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.035em;
  text-wrap:balance;
}

.close-inner > p{
  max-width:52ch;
  margin:20px auto 0;
  color:#c2b7de;
  font-size:17px;
  line-height:1.6;
}

.close-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}
.close-note{margin:20px 0 0;color:#d8cff2;font-size:14px;font-weight:600}

/* ================================================================
   Dark theme
   ================================================================ */
html[data-theme="dark"] .chapter-paper{background:var(--card)}
html[data-theme="dark"] .chapter-tint{background:#191423}

html[data-theme="dark"] .onramp-node{box-shadow:0 10px 22px rgba(89,25,194,.34),0 0 0 9px var(--card)}
html[data-theme="dark"] .onramp-step > p{color:#b4acc4}

html[data-theme="dark"] .rhythm-card{border-color:#312b41;background:var(--card);box-shadow:0 10px 26px rgba(0,0,0,.24)}
html[data-theme="dark"] .rhythm-card:hover{border-color:#463c60}
html[data-theme="dark"] .rhythm-copy h3{color:var(--foreground)}
html[data-theme="dark"] .rhythm-copy > p{color:#b4acc4}

html[data-theme="dark"] .vig{border-color:#332c48;background:linear-gradient(180deg,#221c33,#1b1628)}
html[data-theme="dark"] .vig-row,
html[data-theme="dark"] .vig-draft,
html[data-theme="dark"] .vig-route,
html[data-theme="dark"] .vig-rule,
html[data-theme="dark"] .vig-chart{border-color:#372f4d;background:#191423;box-shadow:none}
html[data-theme="dark"] .vig-t,
html[data-theme="dark"] .vig-rule{color:#ece9f3}
html[data-theme="dark"] .vig-t em,
html[data-theme="dark"] .vig-rule b,
html[data-theme="dark"] .vig-route-from,
html[data-theme="dark"] .vig-key{color:#aaa1bf}
html[data-theme="dark"] .vig-draft p{color:#cfc8dd}
html[data-theme="dark"] .vig-label,
html[data-theme="dark"] .vig-foot{color:#c4b5fd}
html[data-theme="dark"] .vig-src{border-color:#3e3260;color:#d5c6ff;background:#2b2142}
html[data-theme="dark"] .vig-ic-blue{color:#93c0ff;background:#1c2c4c}
html[data-theme="dark"] .vig-ic-violet{color:#cbb4ff;background:#2c2144}
html[data-theme="dark"] .vig-ic-green{color:#6ee7b7;background:#12362a}
html[data-theme="dark"] .vig-check{background:#12362a}
html[data-theme="dark"] .vig-check svg{stroke:#6ee7b7}

html[data-theme="dark"] .stack-name em{color:#aaa1bf}
html[data-theme="dark"] .lg-plain{color:#aaa1bf}
html[data-theme="dark"] .lg{padding:2px;border-radius:7px;background:rgba(255,255,255,.9)}
html[data-theme="dark"] .lg-plain{background:none;padding:0}

html[data-theme="dark"] .plan-card{border-color:#312b41;background:var(--card)}
html[data-theme="dark"] .plan-card-featured{border-color:#a78bfa;box-shadow:0 16px 38px rgba(0,0,0,.34)}
html[data-theme="dark"] .plan-card h3{color:#b4acc4}
html[data-theme="dark"] .plan-price{color:var(--foreground)}
html[data-theme="dark"] .plan-price span,
html[data-theme="dark"] .plan-line{color:#b4acc4}
html[data-theme="dark"] .plan-list{border-top-color:#312b41}
html[data-theme="dark"] .plan-list li{color:#d3cde0}
html[data-theme="dark"] .plan-list li::before{background:#2c2144}
html[data-theme="dark"] .plan-list li::after{border-color:#c4b5fd}
html[data-theme="dark"] .plan-cta{border-color:#413a55;color:#e6e2ee;background:transparent}
html[data-theme="dark"] .plan-cta:hover{border-color:#a78bfa;color:#fff;background:rgba(167,139,250,.1)}
html[data-theme="dark"] .plan-cta-solid{border-color:#7c3aed;color:#fff}

/* the ink chapters already carry their own palette in both themes */
html[data-theme="dark"] .chapter-ink{background:#0e0919}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width:1180px){
  #site-header .nav-links{gap:20px}
  #site-header .nav-links a{font-size:13px}
  .stack-grid{column-gap:40px}
}

@media (max-width:1080px){
  .rhythm-card{grid-template-columns:minmax(0,1fr);gap:18px}
  .vig{min-height:0}
  .stack-grid{grid-template-columns:minmax(0,1fr)}
  /* stacked into one column, the two lists read as a single ruled run */
  .stack-grid ul:not(:last-child) li:last-child{border-bottom:1px solid var(--border)}
}

@media (max-width:980px){
  .home-v2 .hero-v3{padding:160px 0 84px}
  .chapter{padding:88px 0}
  .chapter-head{margin-bottom:44px}
  .onramp{grid-template-columns:minmax(0,1fr);gap:34px}
  .onramp-step:not(:last-child)::before{display:none}
  .onramp-node{width:48px;height:48px;margin-bottom:20px;box-shadow:0 10px 22px rgba(89,25,194,.26)}
  .onramp-step > p{max-width:60ch}
  .obj-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .obj-card{padding:24px 22px 22px}
  .queue-rows li{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}
  .qr-meta{display:none}
}

@media (max-width:760px){
  #site-header{top:10px;width:min(1280px,calc(100% - 28px));border-radius:999px}
  #site-header .nav-wrap{min-height:60px}
  .home-v2 .hero-v3{padding:142px 0 76px}
  .chapter{padding:72px 0}
  .chapter-head{margin-bottom:36px}
  .chapter-head p{font-size:16px}
  .chapter-head-split{display:grid;gap:18px}
  .rhythm-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .plan-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .plan-card{padding:24px 22px}
  .queue-rail-head{display:grid;gap:6px;padding:18px 18px}
  .queue-rows li{padding:14px 18px}
  .chapter-close{padding:88px 0 92px}
  .close-cta{display:grid;grid-template-columns:minmax(0,1fr)}
  .close-cta .hv3-btn{width:100%}
}

@media (max-width:560px){
  #site-header{width:min(1280px,calc(100% - 28px))}
}

@media (max-width:480px){
  .chapter{padding:60px 0}
  .queue-rows li{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .qr-tag{grid-column:2}
  .vig-rules{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stack-list li{gap:12px}
  .plan-price{font-size:40px}
}

@media (prefers-reduced-motion:reduce){
  .rhythm-card,
  .plan-cta,
  .chapter-link svg{transition:none}
  .rhythm-card:hover,
  .plan-cta-solid:hover{transform:none}
  .onramp.in-view .onramp-step:not(:last-child)::before{animation:none}
}

/* ================================================================
   Carried over from the v4 pass: stop the hidden-scrollbar carousels
   on the inner pages from swallowing content at small widths.
   ================================================================ */
@media (max-width:980px){
  .inner-v2 .pricing-grid,
  .inner-v2 .faq-grid{display:grid;grid-template-columns:1fr;overflow:visible;scroll-snap-type:none}
  .inner-v2 .pricing-grid article,
  .inner-v2 .faq-grid article{width:auto;min-width:0;max-width:none}
}

/* ================================================================
   Rhythm scrollytelling — sticky narrative, active product stage
   ================================================================ */
.rhythm-story{
  display:grid;
  grid-template-columns:minmax(320px,.78fr) minmax(0,1.52fr);
  align-items:start;
  gap:clamp(56px,6vw,84px);
}

.rhythm-sticky{
  position:sticky;
  top:156px;
  align-self:start;
  padding-top:18px;
}

.rhythm-sticky .chapter-head{margin:0 0 34px}
.rhythm-sticky .chapter-head h2{max-width:10ch}
.rhythm-sticky .chapter-head p{max-width:38ch}

.rhythm-nav{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid #d8d0e8;
}

.rhythm-nav a{
  position:relative;
  display:grid;
  grid-template-columns:30px minmax(72px,.7fr) minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-height:58px;
  border-bottom:1px solid #d8d0e8;
  color:#6c647c;
  transition:color 220ms ease,background 220ms ease,box-shadow 220ms ease;
}

.rhythm-nav a::after{
  content:"";
  position:absolute;
  right:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#630ed4;
  opacity:0;
  transform:scale(.45);
  transition:opacity 180ms ease,transform 360ms cubic-bezier(.16,1,.3,1);
}

.rhythm-nav a:hover,
.rhythm-nav a:focus-visible,
.rhythm-nav a.is-active{color:#20172f}
.rhythm-nav a.is-active{padding-left:8px;background:rgba(99,14,212,.045)}
.rhythm-nav a.is-active::after{opacity:1;transform:scale(1)}
.rhythm-nav span{font-size:10px;font-weight:800;letter-spacing:.12em}
.rhythm-nav strong{font-size:14px;font-weight:800}
.rhythm-nav small{font-size:11.5px;font-weight:650}

.rhythm-story .rhythm-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(32px,5vh,52px);
}

.rhythm-story .rhythm-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(220px,.82fr) minmax(300px,1.18fr);
  grid-template-areas:"meta meta" "copy visual";
  align-items:center;
  min-height:440px;
  gap:24px 30px;
  padding:clamp(28px,3vw,36px);
  overflow:hidden;
  scroll-margin-top:132px;
  border:1px solid #dcd4ec;
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 48px rgba(48,31,88,.09);
  contain:paint;
  transition:transform 520ms cubic-bezier(.16,1,.3,1),border-color 260ms ease,box-shadow 420ms ease;
}

.rhythm-story .rhythm-card:hover{border-color:#c9bde2;box-shadow:0 22px 54px rgba(48,31,88,.12)}

.js-ready .rhythm-story .rhythm-card{
  opacity:1;
  transform:translate3d(0,10px,0) scale(.995);
  clip-path:none;
}

.js-ready .rhythm-story .rhythm-card.is-active{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  clip-path:none;
  border-color:#c8b9e6;
  box-shadow:0 26px 64px rgba(48,31,88,.14);
}

.rhythm-card-meta{
  grid-area:meta;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:0;
  padding-bottom:14px;
  border-bottom:1px solid #e6e0f0;
  color:#630ed4;
  font-size:11px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.rhythm-card-meta strong{color:#8b8397;font-size:10px;letter-spacing:.08em}
.rhythm-story .rhythm-copy{grid-area:copy;margin:0;align-self:center}
.rhythm-story .rhythm-copy h3{max-width:16ch;font-size:clamp(26px,3vw,36px);line-height:1.08}
.rhythm-story .rhythm-copy > p{max-width:54ch;margin-bottom:18px;font-size:16px;line-height:1.62}

.rhythm-story .vig{
  grid-area:visual;
  min-height:320px;
  align-content:center;
  gap:12px;
  padding:clamp(20px,3vw,30px);
  border-radius:14px;
  transition:transform 620ms cubic-bezier(.16,1,.3,1),opacity 360ms ease,box-shadow 480ms ease;
}

.js-ready .rhythm-story .rhythm-card .vig{
  opacity:.82;
  transform:translateY(12px);
  clip-path:none;
}

.js-ready .rhythm-story .rhythm-card.is-active .vig{
  opacity:1;
  transform:translateY(0);
  clip-path:none;
  box-shadow:0 16px 34px rgba(64,42,112,.09);
}

.rhythm-story .vig-row{padding:13px 14px;border-radius:10px}
.rhythm-story .vig-ic{width:32px;height:32px;border-radius:9px}
.rhythm-story .vig-ic svg{width:17px;height:17px}
.rhythm-story .vig-t{font-size:13.5px}
.rhythm-story .vig-t em{font-size:11.5px}
.rhythm-story .vig-label{font-size:11.5px}
.rhythm-story .vig-draft{padding:18px;border-radius:11px}
.rhythm-story .vig-draft p{font-size:14px;line-height:1.58}
.rhythm-story .vig-src{padding:5px 9px;font-size:11.5px}
.rhythm-story .vig-route{padding:14px 16px}
.rhythm-story .vig-route-from{font-size:13px}
.rhythm-story .vig-route-to{padding:5px 11px;font-size:12px}
.rhythm-story .vig-rule{padding:12px;font-size:13px}
.rhythm-story .vig-rule b{font-size:10px}
.rhythm-story .vig-chart{height:172px;padding:16px;gap:9px}
.rhythm-story .vig-legend{gap:18px}
.rhythm-story .vig-key{font-size:11.5px}

.js-ready .rhythm-story .rhythm-card .vig-row,
.js-ready .rhythm-story .rhythm-card .vig-draft,
.js-ready .rhythm-story .rhythm-card .vig-route,
.js-ready .rhythm-story .rhythm-card .vig-chart{
  transform:translateY(6px);
  opacity:.82;
  transition:transform 520ms cubic-bezier(.16,1,.3,1),opacity 360ms ease;
}

.js-ready .rhythm-story .rhythm-card.is-active .vig-row,
.js-ready .rhythm-story .rhythm-card.is-active .vig-draft,
.js-ready .rhythm-story .rhythm-card.is-active .vig-route,
.js-ready .rhythm-story .rhythm-card.is-active .vig-chart{transform:translateY(0);opacity:1}
.js-ready .rhythm-story .rhythm-card.is-active .vig-row:nth-child(2){transition-delay:70ms}
.js-ready .rhythm-story .rhythm-card.is-active .vig-row:nth-child(3){transition-delay:140ms}
.js-ready .rhythm-story .rhythm-card .vig-chart span{transform:scaleY(.18);transform-origin:bottom;transition:transform 620ms cubic-bezier(.16,1,.3,1)}
.js-ready .rhythm-story .rhythm-card.is-active .vig-chart span{transform:scaleY(1)}
.js-ready .rhythm-story .rhythm-card.is-active .vig-chart span:nth-child(2){transition-delay:45ms}
.js-ready .rhythm-story .rhythm-card.is-active .vig-chart span:nth-child(3){transition-delay:90ms}
.js-ready .rhythm-story .rhythm-card.is-active .vig-chart span:nth-child(4){transition-delay:135ms}
.js-ready .rhythm-story .rhythm-card.is-active .vig-chart span:nth-child(5){transition-delay:180ms}
.js-ready .rhythm-story .rhythm-card.is-active .vig-chart span:nth-child(6){transition-delay:225ms}
.js-ready .rhythm-story .rhythm-card.is-active .vig-chart span:nth-child(7){transition-delay:270ms}

html[data-theme="dark"] .rhythm-nav{border-top-color:#3b334b}
html[data-theme="dark"] .rhythm-nav a{border-bottom-color:#3b334b;color:#a9a0b8}
html[data-theme="dark"] .rhythm-nav a:hover,
html[data-theme="dark"] .rhythm-nav a:focus-visible,
html[data-theme="dark"] .rhythm-nav a.is-active{color:#f2eef7}
html[data-theme="dark"] .rhythm-nav a.is-active{background:rgba(168,85,247,.08)}
html[data-theme="dark"] .rhythm-story .rhythm-card{border-color:#383044;background:var(--card);box-shadow:0 18px 48px rgba(0,0,0,.22)}
html[data-theme="dark"] .rhythm-card-meta{border-bottom-color:#3b334b;color:#c4b5fd}
html[data-theme="dark"] .rhythm-story .vig{border-color:#403653;background:#211a2c}

@media (max-width:1180px){
  .rhythm-story .rhythm-card{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"meta" "copy" "visual";
    min-height:0;
  }
  .rhythm-story .vig{min-height:290px}
}

@media (max-width:980px){
  .rhythm-story{grid-template-columns:minmax(0,1fr);gap:42px}
  .rhythm-sticky{position:static}
  .rhythm-sticky .chapter-head h2{max-width:13ch}
  .rhythm-sticky .chapter-head p{max-width:58ch}
  .rhythm-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:0}
  .rhythm-nav a{grid-template-columns:auto;align-content:start;gap:4px;min-height:96px;padding:14px;border-top:1px solid #d8d0e8;border-right:1px solid #d8d0e8}
  .rhythm-nav li:last-child a{border-right:0}
  .rhythm-nav a.is-active{padding-left:14px}
  .rhythm-nav a::after{right:12px;top:18px}
  .rhythm-story .rhythm-card{min-height:0}
}

@media (max-width:760px){
  .rhythm-story{gap:28px}
  .rhythm-sticky .chapter-head{margin-bottom:0}
  .rhythm-nav{display:none}
  .rhythm-story .rhythm-grid{gap:24px}
  .rhythm-story .rhythm-card{min-height:0;padding:22px}
  .rhythm-story .vig{min-height:270px;padding:18px}
  .js-ready .rhythm-story .rhythm-card,
  .js-ready .rhythm-story .rhythm-card.is-active{opacity:1;transform:none;clip-path:none}
  .js-ready .rhythm-story .rhythm-card .vig,
  .js-ready .rhythm-story .rhythm-card.is-active .vig{transform:none;clip-path:none}
}

@media (max-width:480px){
  .rhythm-story .rhythm-copy h3{font-size:26px}
  .rhythm-story .rhythm-copy > p{font-size:15px}
  .rhythm-story .vig{min-height:240px}
  .rhythm-story .vig-chart{height:132px}
}

@media (prefers-reduced-motion:reduce){
  .rhythm-story .rhythm-card,
  .rhythm-story .vig,
  .rhythm-story .vig-row,
  .rhythm-story .vig-draft,
  .rhythm-story .vig-route,
  .rhythm-story .vig-chart,
  .rhythm-story .vig-chart span,
  .rhythm-nav a,
  .rhythm-nav a::after{transition:none!important;transform:none!important;clip-path:none!important;opacity:1!important}
}

/* ================================================================
   HOMEPAGE v10 — non-sticky navigation + editorial rhythm artwork
   ================================================================ */
#site-header{
  position:absolute;
}

.rhythm-sticky{
  top:72px;
  padding-top:0;
}

.rhythm-story .rhythm-grid{
  gap:clamp(42px,6vh,68px);
}

.rhythm-story .rhythm-card{
  --art-accent:#3157d5;
  --art-accent-rgb:49,87,213;
  grid-template-columns:minmax(230px,.76fr) minmax(390px,1.34fr);
  min-height:520px;
  gap:28px 38px;
  padding:clamp(30px,3vw,42px);
  border-color:rgba(38,31,59,.1);
  border-radius:26px;
  background:rgba(255,255,255,.92);
  box-shadow:0 22px 70px rgba(42,27,74,.08);
}

.rhythm-story .rhythm-card:hover,
.js-ready .rhythm-story .rhythm-card.is-active{
  border-color:rgba(var(--art-accent-rgb),.28);
  box-shadow:0 30px 82px rgba(42,27,74,.13);
}

#rhythm-draft{--art-accent:#bd6900;--art-accent-rgb:189,105,0}
#rhythm-route{--art-accent:#9b3f7e;--art-accent-rgb:155,63,126}
#rhythm-watch{--art-accent:#14734c;--art-accent-rgb:20,115,76}

.rhythm-card-meta{
  color:var(--art-accent);
  border-bottom-color:rgba(var(--art-accent-rgb),.16);
}

.rhythm-story .rhythm-copy h3{
  max-width:13ch;
  margin-bottom:14px;
}

.rhythm-story .rhythm-copy > p{
  color:#665e72;
}

.rhythm-story .rhythm-copy .chapter-link{
  color:var(--art-accent);
}

.rhythm-art{
  position:relative;
  isolation:isolate;
  grid-area:visual;
  min-height:390px;
  overflow:hidden;
  border:1px solid rgba(var(--art-accent-rgb),.12);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 14%,rgba(var(--art-accent-rgb),.22),transparent 38%),
    radial-gradient(circle at 12% 92%,rgba(255,255,255,.94),transparent 44%),
    linear-gradient(145deg,#fbfbfe 8%,rgba(var(--art-accent-rgb),.10) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 20px 46px rgba(var(--art-accent-rgb),.09);
}

.rhythm-art::before,
.rhythm-art::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  filter:blur(28px);
  pointer-events:none;
}

.rhythm-art::before{
  top:-18%;
  right:-9%;
  width:58%;
  aspect-ratio:1;
  background:rgba(var(--art-accent-rgb),.18);
}

.rhythm-art::after{
  bottom:-24%;
  left:-14%;
  width:62%;
  aspect-ratio:1;
  background:rgba(255,255,255,.84);
}

.rhythm-art-heading{
  position:absolute;
  z-index:3;
  top:24px;
  left:26px;
  max-width:240px;
}

.rhythm-art-heading span{
  display:block;
  margin-bottom:7px;
  color:var(--art-accent);
  font-size:10px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.rhythm-art-heading strong{
  display:block;
  color:#211c2b;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:17px;
  line-height:1.3;
  letter-spacing:-.025em;
}

.rhythm-art img{
  position:absolute;
  z-index:1;
  right:-12%;
  bottom:-25%;
  width:96%;
  max-width:none;
  filter:drop-shadow(0 28px 38px rgba(var(--art-accent-rgb),.17));
  transform:translate3d(0,14px,0) scale(.97);
  transition:transform 800ms cubic-bezier(.16,1,.3,1),filter 500ms ease;
}

.rhythm-art-draft img{right:-10%;bottom:-27%;width:94%}
.rhythm-art-route img{right:-14%;bottom:-27%;width:102%}
.rhythm-art-watch img{right:-12%;bottom:-24%;width:98%}

.rhythm-art-chip{
  position:absolute;
  z-index:4;
  right:18px;
  bottom:18px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:999px;
  color:#272130;
  background:rgba(255,255,255,.82);
  box-shadow:0 10px 28px rgba(35,27,55,.12);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  font-size:10.5px;
  font-weight:780;
  letter-spacing:.015em;
}

.js-ready .rhythm-story .rhythm-card.is-active .rhythm-art img{
  filter:drop-shadow(0 32px 44px rgba(var(--art-accent-rgb),.22));
  transform:translate3d(0,0,0) scale(1);
}

html[data-theme="dark"] .rhythm-story .rhythm-card{
  border-color:rgba(var(--art-accent-rgb),.3);
  background:#17131f;
}

html[data-theme="dark"] .rhythm-story .rhythm-copy > p{color:#bbb2c7}
html[data-theme="dark"] .rhythm-art-heading strong{color:#211c2b}

@media (max-width:1180px){
  .rhythm-story .rhythm-card{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"meta" "copy" "visual";
  }
  .rhythm-art{min-height:430px}
  .rhythm-art img{width:82%;right:-5%;bottom:-30%}
  .rhythm-art-route img{width:88%;right:-6%}
}

@media (max-width:760px){
  #site-header{top:10px}
  .rhythm-story .rhythm-card{padding:20px;border-radius:22px}
  .rhythm-art{min-height:340px;border-radius:18px}
  .rhythm-art-heading{top:20px;left:20px;max-width:205px}
  .rhythm-art-heading strong{font-size:15px}
  .rhythm-art img,
  .rhythm-art-draft img,
  .rhythm-art-route img,
  .rhythm-art-watch img{right:-12%;bottom:-19%;width:104%}
  .rhythm-art-chip{right:12px;bottom:12px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media (max-width:480px){
  .rhythm-art{min-height:300px}
  .rhythm-art-heading{max-width:180px}
  .rhythm-art img,
  .rhythm-art-draft img,
  .rhythm-art-route img,
  .rhythm-art-watch img{bottom:-13%;width:108%}
}

@media (prefers-reduced-motion:reduce){
  .rhythm-art img{transition:none!important;transform:none!important}
}

/* ================================================================
   HOMEPAGE v11 — visible product art + deterministic stage rail
   ================================================================ */
.rhythm-nav a::after{display:none}

/* Hover is an invitation, never a claim about what is on screen. Only the stage
   actually in front carries the purple rail, the white card and the lit numeral. */
.rhythm-nav a{padding-left:12px;box-shadow:inset 3px 0 0 transparent}
.rhythm-nav a span{color:#8b8397;transition:color 220ms ease}

.rhythm-nav a:hover,
.rhythm-nav a:focus-visible{background:rgba(255,255,255,.42)}

.rhythm-nav a.is-active{
  padding-left:12px;
  background:rgba(255,255,255,.86);
  box-shadow:inset 3px 0 0 #630ed4;
}

.rhythm-nav a.is-active span{color:#630ed4}

@media (max-width:980px){
  .rhythm-nav a,
  .rhythm-nav a.is-active{padding-left:14px}
}

html[data-theme="dark"] .rhythm-nav a:hover,
html[data-theme="dark"] .rhythm-nav a:focus-visible{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .rhythm-nav a.is-active{
  background:rgba(255,255,255,.09);
  box-shadow:inset 3px 0 0 #a855f7;
}
html[data-theme="dark"] .rhythm-nav a span{color:#8f86a0}
html[data-theme="dark"] .rhythm-nav a.is-active span{color:#c4b5fd}

.rhythm-art-heading{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  gap:2px 11px;
  max-width:300px;
}

.rhythm-art-heading > span:not(.rhythm-art-icon){
  grid-column:2;
  grid-row:1;
  margin:0;
}

.rhythm-art-heading strong{
  grid-column:2;
  grid-row:2;
}

.rhythm-art-heading .rhythm-art-icon{
  grid-column:1;
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  margin:0;
  border:1px solid rgba(255,255,255,.82);
  border-radius:13px;
  color:#fff;
  background:var(--art-accent);
  box-shadow:0 12px 28px rgba(var(--art-accent-rgb),.25),inset 0 1px 0 rgba(255,255,255,.3);
}

.rhythm-art-icon svg{
  width:21px;
  height:21px;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.rhythm-art img,
.rhythm-art-draft img,
.rhythm-art-route img,
.rhythm-art-watch img{
  top:76px;
  right:-13%;
  bottom:auto;
  width:112%;
  height:calc(100% - 76px);
  max-width:none;
  object-fit:contain;
  object-position:center;
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,12px,0) scale(1.08);
  transform-origin:62% 55%;
}

.rhythm-art-draft img{right:-15%;transform-origin:68% 55%}
.rhythm-art-route img{right:-17%;width:116%;transform-origin:68% 52%}
.rhythm-art-watch img{right:-14%;width:114%;transform-origin:65% 54%}

.js-ready .rhythm-story .rhythm-card.is-active .rhythm-art img{
  transform:translate3d(0,0,0) scale(1.13);
}


@media (max-width:1180px){
  .rhythm-art img,
  .rhythm-art-draft img,
  .rhythm-art-route img,
  .rhythm-art-watch img{top:72px;right:-7%;width:102%;height:calc(100% - 68px)}
}

@media (max-width:760px){
  .rhythm-art-heading{max-width:255px;grid-template-columns:38px minmax(0,1fr);gap:2px 9px}
  .rhythm-art-heading .rhythm-art-icon{width:38px;height:38px;border-radius:11px}
  .rhythm-art-icon svg{width:19px;height:19px}
  .rhythm-art img,
  .rhythm-art-draft img,
  .rhythm-art-route img,
  .rhythm-art-watch img{top:70px;right:-13%;bottom:auto;width:114%;height:calc(100% - 62px)}
}

@media (prefers-reduced-motion:reduce){
  .rhythm-art img,
  .js-ready .rhythm-story .rhythm-card.is-active .rhythm-art img{transform:scale(1.08)!important}
}

/* ================================================================
   Solid CTA legibility — the label is white in every state
   ================================================================
   A filled brand button must never inherit its text colour: any
   later rule that touches the anchor can otherwise leave a dark
   label sitting on a dark purple fill. Pin it per state, and give
   the plan CTA a deeper fill so white clears AA on the lavender
   chapter rather than sitting at ~3.5:1 against the old top stop. */
.plan-cta-solid,
.plan-cta-solid:link,
.plan-cta-solid:visited,
.plan-cta-solid:hover,
.plan-cta-solid:focus,
.plan-cta-solid:focus-visible,
.plan-cta-solid:active{
  color:#fff;
  border-color:#4c1d95;
}

.plan-cta-solid{
  background:linear-gradient(180deg,#6d28d9,#4c1d95);
  box-shadow:0 10px 22px rgba(76,29,149,.28);
}

.plan-cta-solid:hover{
  background:linear-gradient(180deg,#5b21b6,#3f1580);
  box-shadow:0 14px 28px rgba(76,29,149,.34);
}

.hv3-btn-primary,
.hv3-btn-primary:link,
.hv3-btn-primary:visited,
.hv3-btn-primary:hover,
.hv3-btn-primary:focus,
.hv3-btn-primary:focus-visible,
.hv3-btn-primary:active{color:#fff}

html[data-theme="dark"] .plan-cta-solid,
html[data-theme="dark"] .plan-cta-solid:hover,
html[data-theme="dark"] .plan-cta-solid:focus-visible,
html[data-theme="dark"] .plan-cta-solid:active{color:#fff;border-color:#7c3aed}

/* ================================================================
   HOMEPAGE v12 — the asks, as tinted product cards
   ================================================================
   Each card carries its own hue: an accent badge, a wash that fades
   from the top-left corner into the ink, and an accent-tinted rule.
   The inner panel stays, because it is a fragment of the real
   product rather than a decorative box, so it is built as an inset
   surface that reads below the card rather than as a second card
   floating on top of it. */
.obj-grid{gap:20px}

.obj-card{
  --a:#a78bfa;
  --a-rgb:167,139,250;
  position:relative;
  padding:30px 26px 24px;
  border:1px solid rgba(var(--a-rgb),.22);
  border-radius:20px;
  background:
    radial-gradient(115% 85% at 0% 0%,rgba(var(--a-rgb),.14),rgba(var(--a-rgb),0) 60%),
    linear-gradient(180deg,#1a1233,#150e29);
  box-shadow:0 18px 44px rgba(6,2,16,.42);
  transition:border-color .24s ease,transform .24s cubic-bezier(.16,1,.3,1),box-shadow .24s ease;
}

.obj-card:nth-child(2){--a:#6ee7b7;--a-rgb:110,231,183}
.obj-card:nth-child(3){--a:#93c5fd;--a-rgb:147,197,253}

.obj-card:hover{
  border-color:rgba(var(--a-rgb),.44);
  transform:translateY(-3px);
  box-shadow:0 28px 62px rgba(6,2,16,.55);
}

.obj-ic{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  margin:0 0 20px;
  border:1px solid rgba(var(--a-rgb),.3);
  border-radius:14px;
  color:var(--a);
  background:rgba(var(--a-rgb),.13);
}

.obj-ic svg{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

.obj-lead{
  margin:0 0 12px;
  color:var(--a);
  font-size:15px;
  font-weight:650;
  line-height:1.5;
  letter-spacing:-.01em;
}

.obj-card h3{margin:0 0 12px;font-size:24px}
.obj-body{margin:0 0 26px;color:#b6abd2}

/* An inset product surface: recessed into the card, not stacked on it. */
.obj-panel{
  gap:12px;
  padding:14px 15px;
  border:1px solid rgba(var(--a-rgb),.18);
  border-radius:13px;
  background:rgba(6,2,16,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.obj-dot,
.obj-dot-violet,
.obj-dot-green{
  background:var(--a);
  box-shadow:0 0 0 4px rgba(var(--a-rgb),.16);
}

.obj-panel > strong{
  color:var(--a);
  background:rgba(var(--a-rgb),.15);
}

.obj-stack span{border-color:#150e29}

/* --- the queue rail, given room and a live-feeling hover --------- */
.queue-rail{
  margin-top:34px;
  border-color:#2f2650;
  background:linear-gradient(180deg,#1b1333,#150e28);
  box-shadow:0 24px 60px rgba(6,2,16,.5);
}

.queue-rows li{transition:background-color .18s ease}
.queue-rows li:hover{background:rgba(167,139,250,.055)}

@media (max-width:980px){
  .obj-grid{gap:14px}
  .obj-card{padding:26px 22px 22px}
  .queue-rail{margin-top:24px}
}

@media (prefers-reduced-motion:reduce){
  .obj-card,
  .queue-rows li{transition:none}
  .obj-card:hover{transform:none}
}

/* ================================================================
   INNER PAGES v1 - the homepage chapter language, carried across
   features / pricing / compare / security / contact
   ================================================================
   These five pages used to run a separate centred, grid-lined
   world. They now speak the same sentence as the homepage: ink,
   white and lavender chapters in alternation, left-aligned heads,
   tinted product cards that carry their own accent hue with an
   icon badge and an inset product panel, authored icons at one
   stroke weight, and 10-26px geometry with nothing fully rounded.
   Scope is .page-v2 so nothing here can reach the homepage or the
   help centre.
   ================================================================ */

/* The compare tab panes keep their class because app.js toggles them by it,
   but the frame they used to draw now belongs to .spec inside them. */
.page-v2 .compare-table-wrap{
  overflow:visible;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

/* an underlined link inside running prose */
.inline-link{
  color:var(--brand-strong);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1.5px;
}

.inline-link:hover{color:var(--brand)}
.chapter-ink .inline-link,
.page-open .inline-link{color:#c4b5fd}

/* screen-reader-only text, for table captions and icon-only marks */
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ----------------------------------------------------------------
   1 - The opening band. Same ink ground as the hero, same left
   aligned argument, sized for a page that leads with a claim
   rather than a full product artifact.
   ---------------------------------------------------------------- */
.page-open{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:168px 0 96px;
  background:#100a20;
  color:#fff;
}

.page-open::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(167,139,250,0),rgba(167,139,250,.34),rgba(167,139,250,0));
}

.page-open-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  align-items:center;
  gap:clamp(40px,4.6vw,74px);
}

.page-open-grid.is-solo{grid-template-columns:minmax(0,1fr)}
.page-open-copy{max-width:620px}

/* A solo opening has no second column to balance against, so it reads
   as the homepage hero's family: centered, not left-hung. */
.page-open-grid.is-solo .page-open-copy{margin:0 auto;text-align:center}
.page-open-grid.is-solo .page-open-sub{margin-left:auto;margin-right:auto}
.page-open-grid.is-solo .page-open-cta,
.page-open-grid.is-solo .page-proof{justify-content:center}

.page-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 20px;
  color:#c4b5fd;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.page-eyebrow::before{
  content:"";
  width:7px;height:7px;
  border-radius:50%;
  background:#a78bfa;
  box-shadow:0 0 0 4px rgba(167,139,250,.18);
}

.page-v2 .page-open h1{
  margin:0;
  color:#fff;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(35px,3.9vw,56px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.page-open-sub{
  max-width:54ch;
  margin:20px 0 0;
  color:#c6bce3;
  font-size:17.5px;
  line-height:1.6;
}

.page-open-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.page-open-note{margin:18px 0 0;color:#a99dc6;font-size:13.5px;font-weight:600}

.page-proof{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,auto));
  justify-content:start;
  gap:12px 28px;
  margin:32px 0 0;
  padding:0;
  list-style:none;
}

.page-proof li{
  display:flex;
  align-items:center;
  gap:9px;
  color:#cfc6e8;
  font-size:13.5px;
  font-weight:600;
}

.page-proof svg{
  flex:0 0 auto;
  width:16px;height:16px;
  padding:2px;
  border-radius:50%;
  background:rgba(167,139,250,.18);
  fill:none;stroke:#c4b5fd;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ----------------------------------------------------------------
   2 - The tinted product card. One component, four accent hues,
   two grounds. On paper it is a white card washed from its top
   left corner; on ink it is the homepage card exactly.
   ---------------------------------------------------------------- */
.tcard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tcard-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tcard-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

.tcard{
  --a:#6d28d9;
  --a-rgb:109,40,217;
  position:relative;
  display:flex;
  flex-direction:column;
  padding:30px 26px 26px;
  border:1px solid rgba(var(--a-rgb),.28);
  border-radius:20px;
  background:
    radial-gradient(115% 85% at 0% 0%,rgba(var(--a-rgb),.1),rgba(var(--a-rgb),0) 58%),
    linear-gradient(180deg,#fff,#faf8ff);
  box-shadow:0 18px 40px rgba(48,31,88,.09);
  transition:border-color .24s ease,transform .24s cubic-bezier(.16,1,.3,1),box-shadow .24s ease;
}

.tcard:hover{
  border-color:rgba(var(--a-rgb),.4);
  transform:translateY(-3px);
  box-shadow:0 24px 52px rgba(48,31,88,.11);
}

.a-violet{--a:#6d28d9;--a-rgb:109,40,217}
.a-emerald{--a:#047857;--a-rgb:4,120,87}
.a-sky{--a:#1d4ed8;--a-rgb:29,78,216}
.a-amber{--a:#b45309;--a-rgb:180,83,9}

.chapter-ink .a-violet,.page-open .a-violet{--a:#a78bfa;--a-rgb:167,139,250}
.chapter-ink .a-emerald,.page-open .a-emerald{--a:#6ee7b7;--a-rgb:110,231,183}
.chapter-ink .a-sky,.page-open .a-sky{--a:#93c5fd;--a-rgb:147,197,253}
.chapter-ink .a-amber,.page-open .a-amber{--a:#fbbf24;--a-rgb:251,191,36}

.chapter-ink .tcard,
.page-open .tcard{
  border-color:rgba(var(--a-rgb),.22);
  background:
    radial-gradient(115% 85% at 0% 0%,rgba(var(--a-rgb),.14),rgba(var(--a-rgb),0) 60%),
    linear-gradient(180deg,#1a1233,#150e29);
  box-shadow:0 18px 44px rgba(6,2,16,.42);
}

.chapter-ink .tcard:hover,
.page-open .tcard:hover{
  border-color:rgba(var(--a-rgb),.44);
  box-shadow:0 28px 62px rgba(6,2,16,.55);
}

.tcard-ic{
  display:grid;
  place-items:center;
  width:46px;height:46px;
  margin:0 0 20px;
  border:1px solid rgba(var(--a-rgb),.28);
  border-radius:14px;
  color:var(--a);
  background:rgba(var(--a-rgb),.1);
}

.tcard-ic svg{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

.chapter-ink .tcard-ic,
.page-open .tcard-ic{background:rgba(var(--a-rgb),.13);border-color:rgba(var(--a-rgb),.3)}

.tcard-lead{
  margin:0 0 12px;
  color:var(--a);
  font-size:14.5px;
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.01em;
}

.page-v2 .tcard h3{
  margin:0 0 11px;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:22px;
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.025em;
}

.page-v2 .chapter-ink .tcard h3{color:#fff}

.tcard > p{
  margin:0 0 22px;
  color:#5a5270;
  font-size:15px;
  line-height:1.62;
}

.chapter-ink .tcard > p{color:#b6abd2}

.tcard-list{
  display:grid;
  gap:9px;
  margin:0 0 22px;
  padding:0;
  list-style:none;
}

.tcard-list li{
  position:relative;
  padding-left:25px;
  color:#3d3654;
  font-size:14px;
  line-height:1.5;
}

.tcard-list li::before{
  content:"";
  position:absolute;
  top:4px;left:0;
  width:16px;height:16px;
  border-radius:50%;
  background:rgba(var(--a-rgb),.13);
}

.tcard-list li::after{
  content:"";
  position:absolute;
  top:8.8px;left:4.2px;
  width:6.6px;height:3.4px;
  border-left:1.7px solid var(--a);
  border-bottom:1.7px solid var(--a);
  transform:rotate(-45deg);
}

.chapter-ink .tcard-list li{color:#cfc6e2}

.tcard .chapter-link{color:var(--a);margin-top:auto}
.tcard .chapter-link:hover{color:var(--a);opacity:.82}

/* a quieter card for supporting facts: no wash, no panel */
.fcard{
  --a:#6d28d9;
  --a-rgb:109,40,217;
  display:flex;
  flex-direction:column;
  padding:24px 22px;
  border:1px solid #e5e0f2;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 26px rgba(48,31,88,.05);
}

.fcard-ic{
  display:grid;
  place-items:center;
  width:38px;height:38px;
  margin:0 0 16px;
  border-radius:11px;
  color:var(--a);
  background:rgba(var(--a-rgb),.1);
}

.fcard-ic svg{
  width:19px;height:19px;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
}

.page-v2 .fcard h3{
  margin:0 0 8px;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:17.5px;
  font-weight:800;
  line-height:1.24;
  letter-spacing:-.02em;
}

.fcard p{margin:0;color:#5a5270;font-size:14.5px;line-height:1.6}

/* ----------------------------------------------------------------
   3 - Split: a chapter head and copy beside a real, functional
   surface (the contact form). Not used for illustrated artifacts.
   ---------------------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;
  gap:clamp(36px,4.4vw,68px);
}

.split-flip .split-copy{order:2}
.split-copy .chapter-head{margin-bottom:26px}
.split-copy .chapter-head h2{font-size:clamp(29px,2.9vw,40px)}

/* ----------------------------------------------------------------
   4 - Segmented control. Replaces the old pill toggle and the
   compare tab row with one 10-14px control.
   ---------------------------------------------------------------- */
.segbar{
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px;
  border:1px solid #e2dcf0;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 26px rgba(48,31,88,.06);
}

.page-v2 .segbar button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 18px;
  border:1px solid transparent;
  border-radius:10px;
  color:#5a5270;
  background:transparent;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:color .18s ease,background-color .18s ease,box-shadow .18s ease;
}

.page-v2 .segbar button:hover{color:#3f1d8f;background:#f6f3fe}

.page-v2 .segbar button.is-active{
  color:#fff;
  border-color:#4c1d95;
  background:linear-gradient(180deg,#6d28d9,#4c1d95);
  box-shadow:0 10px 22px rgba(76,29,149,.26);
}

.page-v2 .segbar button:focus-visible{outline:2px solid #6d28d9;outline-offset:3px}

.page-v2 .segbar button span{
  padding:3px 7px;
  border-radius:6px;
  color:#047857;
  background:rgba(4,120,87,.1);
  font-size:11px;
  font-weight:800;
}

.page-v2 .segbar button.is-active span{color:#fff;background:rgba(255,255,255,.2)}

.segbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:34px}
.segbar-note{margin:0;color:#5a5270;font-size:13.5px;font-weight:600}

/* ----------------------------------------------------------------
   5 - Spec table. One table style for the pricing breakdown and
   every compare view.
   ---------------------------------------------------------------- */
.spec{
  overflow-x:auto;
  border:1px solid #e2dcf0;
  border-radius:20px;
  background:#fff;
  box-shadow:0 16px 40px rgba(48,31,88,.07);
}

.page-v2 .spec table{
  width:100%;
  min-width:660px;
  border-collapse:collapse;
  font-size:14.5px;
}

.page-v2 .spec th,
.page-v2 .spec td{
  padding:15px 20px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid #efeaf8;
}

.page-v2 .spec thead th{
  color:#4f485f;
  background:#faf9fe;
  border-bottom:1px solid #e4ddf3;
  font-size:11.5px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

.page-v2 .spec tbody th{color:#3d3654;font-weight:650}
.page-v2 .spec td{color:#5a5270}
.page-v2 .spec tbody tr:last-child th,
.page-v2 .spec tbody tr:last-child td{border-bottom:0}
.page-v2 .spec tbody tr:hover th,
.page-v2 .spec tbody tr:hover td{background:rgba(109,40,217,.028)}

.page-v2 .spec .is-ads{color:#3f1d8f;background:rgba(109,40,217,.05);font-weight:700}
.page-v2 .spec thead .is-ads{color:#4c1d95;background:rgba(109,40,217,.1)}
.page-v2 .spec tbody tr:hover .is-ads{background:rgba(109,40,217,.075)}

.mk-yes{
  display:inline-grid;
  place-items:center;
  width:20px;height:20px;
  border-radius:50%;
  background:rgba(4,120,87,.12);
}

.mk-yes svg{
  width:11px;height:11px;
  fill:none;stroke:#047857;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round;
}

.mk-no{
  display:inline-block;
  width:14px;height:2px;
  border-radius:1px;
  background:#c7c0d8;
  vertical-align:middle;
}

/* ----------------------------------------------------------------
   6 - Plan cards on pricing: the homepage card, given more room
   ---------------------------------------------------------------- */
.page-v2 .plan-grid{gap:20px}
.page-v2 .plan-card{padding:32px 28px 28px;border-radius:20px}
.page-v2 .plan-card h3{font-size:18px}
.page-v2 .plan-note{margin:16px 0 0;color:#655d7d;font-size:12.5px;font-weight:600}

.plan-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 0 16px;
  padding:5px 10px;
  border:1px solid rgba(109,40,217,.2);
  border-radius:8px;
  color:#4c1d95;
  background:rgba(109,40,217,.07);
  font-size:11.5px;
  font-weight:800;
}

/* ----------------------------------------------------------------
   7 - Fact rows: plain, checkable statements on ink
   ---------------------------------------------------------------- */
.factrows{
  overflow:hidden;
  border:1px solid #2f2650;
  border-radius:20px;
  background:linear-gradient(180deg,#1b1333,#150e28);
  box-shadow:0 24px 60px rgba(6,2,16,.5);
}

.factrow{
  display:grid;
  grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:8px 26px;
  padding:20px 26px;
  border-bottom:1px solid #241c3d;
}

.factrow:last-child{border-bottom:0}

.factrow b{
  color:#fff;
  font-size:14.5px;
  font-weight:750;
  letter-spacing:-.01em;
}

.factrow p{margin:0;color:#b6abd2;font-size:14.5px;line-height:1.62}

/* ----------------------------------------------------------------
   8 - Note band: quiet sourcing and small print, on paper
   ---------------------------------------------------------------- */
.note-band{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-top:26px;
  padding:22px 24px;
  border:1px solid #e5e0f2;
  border-radius:16px;
  background:#fbfaff;
}

.note-band > svg{
  flex:0 0 auto;
  width:22px;height:22px;
  margin-top:1px;
  fill:none;stroke:#6d28d9;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

.note-band p{margin:0;color:#5a5270;font-size:14px;line-height:1.65}
.note-band p + p{margin-top:9px}
.note-band strong{color:#1b1430;font-weight:750}

/* ----------------------------------------------------------------
   9 - Contact form
   ---------------------------------------------------------------- */
.page-v2 button.hv3-btn{font-family:inherit;cursor:pointer}

.form-card{
  padding:clamp(24px,3vw,34px);
  border:1px solid #e2dcf0;
  border-radius:24px;
  background:#fff;
  box-shadow:0 22px 56px rgba(48,31,88,.09);
}

.page-v2 .form-card h3{
  margin:0 0 6px;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.024em;
}

.form-card > p{margin:0 0 24px;color:#5a5270;font-size:14.5px;line-height:1.6}

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

.page-v2 .form-card label{display:grid;gap:8px;margin:0 0 16px}

.page-v2 .form-card label > span{
  color:#3d3654;
  font-size:13px;
  font-weight:750;
  letter-spacing:-.005em;
}

.page-v2 .form-card label em{color:#6d28d9;font-style:normal;font-weight:800}

.page-v2 .form-card input,
.page-v2 .form-card select,
.page-v2 .form-card textarea{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1px solid #ddd6ee;
  border-radius:12px;
  color:#1b1430;
  background:#fbfaff;
  font-family:inherit;
  font-size:15px;
  line-height:1.45;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}

.page-v2 .form-card textarea{min-height:136px;resize:vertical}

.page-v2 .form-card select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6382' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:17px 17px;
}

.page-v2 .form-card input::placeholder,
.page-v2 .form-card textarea::placeholder{color:#9a92ad}

.page-v2 .form-card input:focus,
.page-v2 .form-card select:focus,
.page-v2 .form-card textarea:focus{
  outline:none;
  border-color:#8b5cf6;
  background:#fff;
  box-shadow:0 0 0 3px rgba(124,58,237,.16);
}

.cf-consent{margin:4px 0 18px;color:#655d7d;font-size:12.5px;line-height:1.55}
.cf-consent a{color:#5919c2;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.page-v2 .cf-submit{width:100%}

.page-v2 .cf-status{
  margin-top:16px;
  padding:13px 15px;
  border:1px solid #cfe9dc;
  border-radius:12px;
  color:#065f46;
  background:#effaf5;
  font-size:13.5px;
  font-weight:650;
}

.page-v2 .cf-status[data-kind="err"]{border-color:#f3d0d0;color:#9f1239;background:#fdf0f2}

/* the direct routes beside the form */
.reach{display:grid;gap:12px;margin-top:26px}

.reach a,
.reach div{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  border:1px solid #e5e0f2;
  border-radius:14px;
  background:#fff;
  transition:border-color .2s ease,transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease;
}

.reach a:hover{
  border-color:#c4b5fd;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(48,31,88,.08);
}

.reach-ic{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:40px;height:40px;
  border-radius:12px;
  color:#6d28d9;
  background:rgba(109,40,217,.1);
}

.reach-ic svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
}

.reach-t{display:grid;gap:3px;min-width:0}
.reach-t b{color:#1b1430;font-size:14.5px;font-weight:750}
.reach-t small{color:#655d7d;font-size:13px}

.reach-arrow{
  flex:0 0 auto;
  margin-left:auto;
  width:17px;height:17px;
  fill:none;stroke:#8b8397;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ----------------------------------------------------------------
   10 - Dark theme
   ---------------------------------------------------------------- */
html[data-theme="dark"] .page-v2 .chapter-paper .tcard,
html[data-theme="dark"] .page-v2 .chapter-tint .tcard{
  border-color:rgba(var(--a-rgb),.26);
  background:
    radial-gradient(115% 85% at 0% 0%,rgba(var(--a-rgb),.1),rgba(var(--a-rgb),0) 58%),
    var(--card);
  box-shadow:0 14px 34px rgba(0,0,0,.26);
}

html[data-theme="dark"] .page-v2 .chapter-paper .a-violet,
html[data-theme="dark"] .page-v2 .chapter-tint .a-violet{--a:#c4b5fd;--a-rgb:196,181,253}
html[data-theme="dark"] .page-v2 .chapter-paper .a-emerald,
html[data-theme="dark"] .page-v2 .chapter-tint .a-emerald{--a:#6ee7b7;--a-rgb:110,231,183}
html[data-theme="dark"] .page-v2 .chapter-paper .a-sky,
html[data-theme="dark"] .page-v2 .chapter-tint .a-sky{--a:#93c5fd;--a-rgb:147,197,253}
html[data-theme="dark"] .page-v2 .chapter-paper .a-amber,
html[data-theme="dark"] .page-v2 .chapter-tint .a-amber{--a:#fbbf24;--a-rgb:251,191,36}

html[data-theme="dark"] .page-v2 .chapter-paper .tcard h3,
html[data-theme="dark"] .page-v2 .chapter-tint .tcard h3{color:var(--foreground)}
html[data-theme="dark"] .page-v2 .chapter-paper .tcard > p,
html[data-theme="dark"] .page-v2 .chapter-tint .tcard > p{color:#b4acc4}
html[data-theme="dark"] .page-v2 .chapter-paper .tcard-list li,
html[data-theme="dark"] .page-v2 .chapter-tint .tcard-list li{color:#d3cde0}

html[data-theme="dark"] .page-v2 .fcard{border-color:#312b41;background:var(--card);box-shadow:0 10px 26px rgba(0,0,0,.24)}
html[data-theme="dark"] .page-v2 .fcard h3{color:var(--foreground)}
html[data-theme="dark"] .page-v2 .fcard p{color:#b4acc4}

html[data-theme="dark"] .page-v2 .segbar{border-color:#312b41;background:var(--card);box-shadow:0 10px 26px rgba(0,0,0,.24)}
html[data-theme="dark"] .page-v2 .segbar button{color:#b4acc4}
html[data-theme="dark"] .page-v2 .segbar button:hover{color:#fff;background:rgba(167,139,250,.12)}
html[data-theme="dark"] .page-v2 .segbar button.is-active{border-color:#7c3aed;color:#fff}
html[data-theme="dark"] .page-v2 .segbar-note{color:#b4acc4}

html[data-theme="dark"] .page-v2 .spec{border-color:#312b41;background:var(--card);box-shadow:0 16px 40px rgba(0,0,0,.28)}
html[data-theme="dark"] .page-v2 .spec th,
html[data-theme="dark"] .page-v2 .spec td{border-bottom-color:#2c2637}
html[data-theme="dark"] .page-v2 .spec thead th{color:#b4acc4;background:#1f1a2b;border-bottom-color:#3a3350}
html[data-theme="dark"] .page-v2 .spec tbody th{color:#e6e2ee}
html[data-theme="dark"] .page-v2 .spec td{color:#b4acc4}
html[data-theme="dark"] .page-v2 .spec tbody tr:hover th,
html[data-theme="dark"] .page-v2 .spec tbody tr:hover td{background:rgba(167,139,250,.06)}
html[data-theme="dark"] .page-v2 .spec .is-ads{color:#d7c9ff;background:rgba(167,139,250,.1)}
html[data-theme="dark"] .page-v2 .spec thead .is-ads{color:#d7c9ff;background:rgba(167,139,250,.16)}
html[data-theme="dark"] .page-v2 .spec tbody tr:hover .is-ads{background:rgba(167,139,250,.15)}
html[data-theme="dark"] .mk-yes{background:rgba(110,231,183,.14)}
html[data-theme="dark"] .mk-yes svg{stroke:#6ee7b7}
html[data-theme="dark"] .mk-no{background:#4a4360}

html[data-theme="dark"] .page-v2 .plan-badge{border-color:rgba(167,139,250,.28);color:#d7c9ff;background:rgba(167,139,250,.12)}
html[data-theme="dark"] .page-v2 .plan-note{color:#aaa1bf}

html[data-theme="dark"] .page-v2 .note-band{border-color:#312b41;background:#1c1727}
html[data-theme="dark"] .page-v2 .note-band p{color:#b4acc4}
html[data-theme="dark"] .page-v2 .note-band strong{color:var(--foreground)}
html[data-theme="dark"] .page-v2 .note-band > svg{stroke:#c4b5fd}

html[data-theme="dark"] .page-v2 .form-card{border-color:#312b41;background:var(--card);box-shadow:0 22px 56px rgba(0,0,0,.32)}
html[data-theme="dark"] .page-v2 .form-card h3{color:var(--foreground)}
html[data-theme="dark"] .page-v2 .form-card > p{color:#b4acc4}
html[data-theme="dark"] .page-v2 .form-card label > span{color:#d3cde0}
html[data-theme="dark"] .page-v2 .form-card label em{color:#c4b5fd}
html[data-theme="dark"] .page-v2 .form-card input,
html[data-theme="dark"] .page-v2 .form-card select,
html[data-theme="dark"] .page-v2 .form-card textarea{border-color:#3b3450;color:var(--foreground);background:#1d1829}
html[data-theme="dark"] .page-v2 .form-card select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aaa1bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
html[data-theme="dark"] .page-v2 .form-card input:focus,
html[data-theme="dark"] .page-v2 .form-card select:focus,
html[data-theme="dark"] .page-v2 .form-card textarea:focus{border-color:#a78bfa;background:#221c30;box-shadow:0 0 0 3px rgba(167,139,250,.18)}
html[data-theme="dark"] .page-v2 .form-card input::placeholder,
html[data-theme="dark"] .page-v2 .form-card textarea::placeholder{color:#847c99}
html[data-theme="dark"] .page-v2 .cf-consent{color:#aaa1bf}
html[data-theme="dark"] .page-v2 .cf-consent a{color:#c4b5fd}
html[data-theme="dark"] .page-v2 .cf-status{border-color:#1f5744;color:#a7f3d0;background:#12362a}
html[data-theme="dark"] .page-v2 .cf-status[data-kind="err"]{border-color:#6b2536;color:#fecdd3;background:#3b1622}

html[data-theme="dark"] .page-v2 .reach a,
html[data-theme="dark"] .page-v2 .reach div{border-color:#312b41;background:var(--card)}
html[data-theme="dark"] .page-v2 .reach a:hover{border-color:#7c3aed}
html[data-theme="dark"] .page-v2 .reach-ic{color:#c4b5fd;background:rgba(167,139,250,.13)}
html[data-theme="dark"] .page-v2 .reach-t b{color:var(--foreground)}
html[data-theme="dark"] .page-v2 .reach-t small{color:#aaa1bf}
html[data-theme="dark"] .page-v2 .reach-arrow{stroke:#aaa1bf}

/* ----------------------------------------------------------------
   11 - Responsive
   ---------------------------------------------------------------- */
@media (max-width:1180px){
  .page-open-grid{gap:44px}
  .tcard-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1080px){
  .split{grid-template-columns:minmax(0,1fr);gap:38px}
  .split-flip .split-copy{order:0}
}

@media (max-width:980px){
  .page-open{padding:150px 0 80px}
  .page-open-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .page-open-copy{max-width:660px}
  .tcard-grid:not(.tcard-grid-4),
  .tcard-grid-2{grid-template-columns:minmax(0,1fr);gap:16px}
  .tcard{padding:26px 22px 22px}
  .factrow{grid-template-columns:minmax(0,1fr);gap:6px;padding:18px 22px}
}

@media (max-width:760px){
  .page-open{padding:134px 0 68px}
  .page-open-sub{font-size:16.5px}
  .page-open-cta{display:grid;grid-template-columns:minmax(0,1fr)}
  .page-open-cta .hv3-btn{width:100%}
  .page-proof{grid-template-columns:minmax(0,1fr);gap:11px}
  .tcard-grid-4{grid-template-columns:minmax(0,1fr)}
  .fc-row{grid-template-columns:minmax(0,1fr);gap:0}
  .segbar-row{gap:12px;margin-bottom:26px}
  .segbar{width:100%}
  .page-v2 .segbar button{flex:1;justify-content:center;padding:0 12px;font-size:13.5px}
  .note-band{flex-direction:column;gap:12px;padding:20px}
}

@media (max-width:480px){
  .page-open{padding:118px 0 58px}
  .page-v2 .page-open h1{font-size:clamp(29px,7.6vw,37px);letter-spacing:-.036em}
  .page-v2 .plan-card{padding:26px 22px 24px}
}

@media (prefers-reduced-motion:reduce){
  .tcard,
  .reach a,
  .page-v2 .segbar button{transition:none}
  .tcard:hover,
  .reach a:hover{transform:none}
}

/* ================================================================
   TIDIO-PATTERN HERO + TABS
   Layout ported from tidio.com: a centred hero stack over a media
   stage, and a centred pill tab row over one swapping stage.
   Palette / type / geometry stay ADS: ink-violet #100a20, brand
   #630ed4-#7c3aed, lavender #f5f3fb, 12-18px corners.
   Media slots are .ph-box placeholders: paste an <img> or <video>
   as the first child and the placeholder chrome hides itself.
   ================================================================ */

/* ---------- placeholder stage ----------------------------------- */
.ph-box{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  overflow:hidden;
  padding:20px;
  border:1px dashed rgba(196,181,253,.32);
  border-radius:18px;
  background:
    linear-gradient(rgba(196,181,253,.055) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,rgba(196,181,253,.055) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(158deg,rgba(124,58,237,.20) 0%,rgba(16,10,32,.72) 62%,rgba(12,7,25,.86) 100%);
  color:#cabfe6;
  text-align:center;
}

.ph-16x9{aspect-ratio:16/9}
.ph-3x2{aspect-ratio:3/2}

.ph-ic{
  display:grid;
  place-items:center;
  width:52px;height:52px;
  border-radius:14px;
  border:1px solid rgba(196,181,253,.26);
  background:rgba(255,255,255,.06);
  color:#c4b5fd;
}

.ph-ic svg{
  width:24px;height:24px;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

.ph-title{
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:-.015em;
  color:#e7e0f7;
}

.ph-meta{font-size:12.5px;line-height:1.5;color:rgba(202,191,230,.66)}

/* light chapters (white / lavender) */
.ph-box.is-light{
  border-color:#d8d0e8;
  background:
    linear-gradient(rgba(99,14,212,.045) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,rgba(99,14,212,.045) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(158deg,#ffffff 0%,#faf9fd 60%,#f3effc 100%);
  color:#6b6280;
}

.ph-box.is-light .ph-ic{
  border-color:#e5e0f2;
  background:#fff;
  color:#7c3aed;
  box-shadow:0 6px 18px rgba(48,31,88,.08);
}

.ph-box.is-light .ph-title{color:#1b1430}
.ph-box.is-light .ph-meta{color:#847c96}

/* the swap: drop in real media and the scaffolding disappears */
.ph-box>img,
.ph-box>video{
  position:absolute;
  inset:0;
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:top center;
}

.ph-box:has(>img),
.ph-box:has(>video){
  border-style:solid;
  border-color:rgba(196,181,253,.24);
  background:#0e0a19;
  padding:0;
}

.ph-box.is-light:has(>img),
.ph-box.is-light:has(>video){border-color:#e5e0f2;background:#eef0f5}

.ph-box:has(>img)>:not(img):not(video),
.ph-box:has(>video)>:not(img):not(video){display:none}

.hero-product-poster{display:none!important}

@media (prefers-reduced-motion:reduce){
  .hero-product-video{display:none!important}
  .hero-product-poster{display:block!important}
}

/* ---------- hero: centred stack over a media stage --------------- */
.home-v2 .hero-v3.hero-tid{padding:158px 0 92px}
.hero-tid .hero-v3-copy{max-width:800px}

/* badge above the headline (tidio.com runs a G2 rating in this slot) */
.tid-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0 0 24px;
  padding:7px 15px 7px 8px;
  border:1px solid rgba(196,181,253,.26);
  border-radius:999px;
  background:rgba(124,58,237,.16);
  color:rgba(233,226,248,.8);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.005em;
}

.tid-badge.is-placeholder{border-style:dashed;color:rgba(233,226,248,.62)}

.tid-badge-mark{
  width:20px;height:20px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px dashed rgba(196,181,253,.42);
  background:rgba(255,255,255,.07);
}

.hero-tid .hero-v3-cta{margin-top:30px}

/* chevron on the primary CTA, matching the tidio.com button */
.hv3-btn-primary svg{
  width:17px;height:17px;
  margin-left:2px;
  fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease;
}

.hv3-btn-primary:hover svg{transform:translateX(3px)}

.hero-media{
  position:relative;
  z-index:2;
  max-width:1160px;
  margin:60px auto 0;
  padding:0 24px;
}

.hero-media-inner{position:relative}

.hero-media .ph-box{
  box-shadow:
    0 46px 100px rgba(6,2,16,.55),
    0 0 0 1px rgba(124,58,237,.12);
}

.hero-media-cap{
  margin:18px 0 0;
  color:rgba(233,226,248,.6);
  font-size:13.5px;
  line-height:1.55;
  text-align:center;
}

@media (max-width:960px){
  .home-v2 .hero-v3.hero-tid{padding:132px 0 76px}
  .hero-media{margin-top:46px}
}

@media (max-width:700px){
  .home-v2 .hero-v3.hero-tid{padding:112px 0 60px}
  .tid-badge{margin-bottom:20px;font-size:11.5px;padding:6px 12px 6px 7px}
  .hero-media{margin-top:34px;padding:0 18px}
  .hero-media .ph-box{border-radius:14px}
  .ph-title{font-size:14px}
  .ph-meta{font-size:11.5px}
  .ph-ic{width:44px;height:44px;border-radius:12px}
}

/* ---------- centred chapter head (tidio.com centres this band) --- */
.chapter-head.is-centered{
  margin-left:auto;
  margin-right:auto;
  margin-bottom:40px;
  text-align:center;
}

.chapter-head.is-centered p{margin-left:auto;margin-right:auto}

/* ---------- tab bar: centred wrapping pills ---------------------- */
.tid-tabbar{
  display:flex;
  flex-flow:row nowrap;
  gap:8px;
  margin:0 0 32px;
  padding:2px 0 4px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.tid-tabbar::-webkit-scrollbar{display:none}

@media (min-width:905px){
  .tid-tabbar{
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-bottom:40px;
    overflow:visible;
  }
}

.tid-tab{
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  padding:12px 18px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#5a5270;
  font:inherit;
  text-align:left;
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.tid-tab strong{
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
}

.tid-tab-ic{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;color:#7c3aed}

.tid-tab-ic svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}

.tid-tab:hover{background:rgba(99,14,212,.07);color:#20172f}
.tid-tab:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.tid-tab.is-active{
  background:#fff;
  border-color:#e5e0f2;
  color:#1b1430;
  box-shadow:0 8px 22px rgba(48,31,88,.10);
}

.tid-tab.is-active strong{font-weight:700}
.tid-tab.is-active .tid-tab-ic{color:#630ed4}

/* dark variant: add `is-ink` to the section for the onDark band */
.tid-tabs.is-ink{background:#100a20;color:#fff}
.tid-tabs.is-ink .chapter-head h2{color:#fff}
.tid-tabs.is-ink .chapter-head p{color:rgba(233,226,248,.72)}
.tid-tabs.is-ink .tid-tab{color:rgba(255,255,255,.74)}
.tid-tabs.is-ink .tid-tab-ic{color:rgba(255,255,255,.82)}
.tid-tabs.is-ink .tid-tab:hover{background:rgba(255,255,255,.1);color:#fff}
.tid-tabs.is-ink .tid-tab.is-active{background:#fff;border-color:transparent;color:#100a20}
.tid-tabs.is-ink .tid-tab.is-active .tid-tab-ic{color:#630ed4}
.tid-tabs.is-ink .tid-panel-cap h3{color:#fff}
.tid-tabs.is-ink .tid-panel-cap p{color:rgba(233,226,248,.72)}
.tid-tabs.is-ink .chapter-link{color:#c4b5fd}

.tab-demo-video{object-position:center center}

/* the stage hides every non-media child once real media lands, so the
   replay control has to opt back in; centred without a transform so it
   does not get its own raster layer */
.ph-box:has(>video)>.demo-replay{
  position:absolute;
  inset:0;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:fit-content;
  height:fit-content;
  margin:auto;
  padding:12px 20px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:rgba(16,10,32,.74);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease;
}

.demo-replay svg{
  width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}

.ph-box:has(>video)>.demo-replay:hover{
  border-color:rgba(255,255,255,.5);
  background:rgba(16,10,32,.86);
}

.demo-replay:focus-visible{outline:2px solid #c4b5fd;outline-offset:3px}

/* the attribute always wins over the opt-in above */
.demo-replay[hidden]{display:none!important}

/* ---------- stage: only the selected panel renders --------------- */
.tid-panel{display:none}

.tid-panel.is-active{
  display:block;
  max-width:960px;
  margin:0 auto;
  animation:tid-panel-in .34s cubic-bezier(.16,.86,.24,1) both;
}

@keyframes tid-panel-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

.tid-panel .ph-box{box-shadow:0 26px 60px rgba(48,31,88,.13)}

.tid-panel-cap{
  max-width:62ch;
  margin:26px auto 0;
  text-align:center;
}

.tid-panel-cap h3{
  margin:0 0 9px;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(20px,2.1vw,25px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.025em;
}

.tid-panel-cap p{margin:0 0 16px;color:#5a5270;font-size:15.5px;line-height:1.62}

@media (max-width:700px){
  .tid-tabbar{gap:7px;margin-bottom:24px}
  .tid-tab{padding:10px 15px}
  .tid-tab strong{font-size:14px}
  .tid-panel-cap{margin-top:20px}
  .tid-panel-cap p{font-size:15px}
}

/* dark theme */
html[data-theme="dark"] .tid-tab{color:#b4acc4}
html[data-theme="dark"] .tid-tab-ic{color:#c4b5fd}
html[data-theme="dark"] .tid-tab:hover{background:#241d33;color:#f2eef7}
html[data-theme="dark"] .tid-tab.is-active{background:#2a2140;border-color:#3b334b;color:#f2eef7}
html[data-theme="dark"] .tid-tab.is-active .tid-tab-ic{color:#c77dff}
html[data-theme="dark"] .tid-panel-cap h3{color:var(--foreground)}
html[data-theme="dark"] .tid-panel-cap p{color:#b4acc4}
html[data-theme="dark"] .ph-box.is-light{
  border-color:#3b334b;
  background:linear-gradient(158deg,#1a1720 0%,#161320 100%);
  color:#8a8299;
}
html[data-theme="dark"] .ph-box.is-light .ph-ic{background:#211a2c;border-color:#3b334b;color:#c4b5fd;box-shadow:none}
html[data-theme="dark"] .ph-box.is-light .ph-title{color:#e9e4f2}
html[data-theme="dark"] .ph-box.is-light .ph-meta{color:#8a8299}

@media (prefers-reduced-motion:reduce){
  .tid-panel.is-active{animation:none}
  .hv3-btn-primary:hover svg{transform:none}
}

/* no-JS safety: show every stage rather than hide content behind
   tabs that will never receive a click handler */
html:not(.js-ready) .tid-panel{display:block!important;margin-bottom:34px}

/* ================================================================
   TIDIO-PATTERN HEADER
   tidio.com runs a full-bleed sticky bar flush to the top of the
   page: square corners, no floating pill, 72px tall, dark ground,
   white logo left, nav chips beside it, a text sign-in and one
   filled CTA on the right. Ours takes the same shape in ink-violet
   so the bar and the hero read as a single band.
   Mega menu panels land in a later pass; the bar shape is here now.
   ================================================================ */
#site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:auto;
  transform:none;
  z-index:998;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0;
  background:#100a20;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

#site-header.scrolled{
  border-bottom-color:rgba(255,255,255,.12);
  background:#100a20;
  box-shadow:0 10px 30px rgba(6,2,16,.42);
}

html[data-theme="dark"] #site-header,
html[data-theme="dark"] #site-header.scrolled{
  border-bottom-color:rgba(255,255,255,.1);
  background:#100a20;
}

#site-header .nav-wrap{
  width:min(1216px,calc(100% - 48px));
  min-height:72px;
  margin:0 auto;
  gap:20px;
}

.home-v2 #site-header .nav-wrap{min-height:72px}

/* brand and nav items are hover chips, the way tidio.com does it */
#site-header .brand{
  padding:8px 12px;
  margin-left:-12px;
  border-radius:12px;
  color:#fff;
  transition:background-color .18s ease;
}

#site-header .brand:hover{background:rgba(255,255,255,.08)}
#site-header .brand-name{color:#fff}

#site-header .nav-links{gap:2px}

#site-header .nav-links a{
  padding:10px 14px;
  border-radius:12px;
  color:rgba(255,255,255,.78);
  font-size:14px;
  font-weight:600;
  transition:background-color .18s ease,color .18s ease;
}

#site-header .nav-links a:hover{background:rgba(255,255,255,.09);color:#fff}

#site-header .nav-actions{gap:8px}

#site-header .theme-toggle{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.82);
}

#site-header .theme-toggle:hover{background:rgba(255,255,255,.12);color:#fff}

/* sign in reads as a text link, not a bordered button */
#site-header .auth-link,
#site-header .outline-btn.auth-link{
  min-height:40px;
  padding:0 14px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:rgba(255,255,255,.86);
  font-size:14px;
  font-weight:600;
  box-shadow:none;
}

#site-header .auth-link:hover,
#site-header .outline-btn.auth-link:hover{
  background:rgba(255,255,255,.09);
  color:#fff;
  transform:none;
}

#site-header .auth-btn,
#site-header .solid-btn.auth-btn{
  min-height:42px;
  padding:0 18px;
  border:0;
  border-radius:12px;
  background:var(--gradient-brand);
  color:#fff;
  font-size:14px;
  font-weight:700;
  box-shadow:0 8px 22px rgba(99,14,212,.34);
}

#site-header .auth-btn:hover,
#site-header .solid-btn.auth-btn:hover{
  background:var(--gradient-brand-hover);
  box-shadow:0 10px 26px rgba(99,14,212,.42);
}

#site-header .menu-btn{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
}

#site-header .menu-btn span{background:#fff}

/* the drawer opens square off a square bar */
#site-header:has(.mobile-nav:not([hidden])){border-radius:0}
.mobile-nav{border-radius:0}

@media (max-width:860px){
  #site-header .nav-wrap{width:min(1216px,calc(100% - 32px))}
}

/* ================================================================
   TIDIO-PATTERN HOMEPAGE SECTIONS
   ================================================================ */

/* the hero band now runs into the logo strip, so the hero closes
   its own hairline and the strip carries it instead */
.hero-tid::after{display:none}
.home-v2 .hero-v3.hero-tid{padding:128px 0 92px}

@media (max-width:960px){
  .home-v2 .hero-v3.hero-tid{padding:112px 0 76px}
}

@media (max-width:700px){
  .home-v2 .hero-v3.hero-tid{padding:96px 0 60px}
}

/* ---------- 2 · logo strip, still on the ink band ---------------- */
.logo-strip{
  position:relative;
  z-index:1;
  padding:0 0 96px;
  background:#100a20;
  color:#fff;
}

.logo-strip::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(167,139,250,0),rgba(167,139,250,.34),rgba(167,139,250,0));
}

.logo-strip-head{
  max-width:720px;
  margin:0 auto 32px;
  color:#fff;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(19px,2.1vw,29px);
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.025em;
  text-align:center;
  text-wrap:balance;
}

.logo-row{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.logo-slot{
  display:grid;
  place-items:center;
  height:74px;
  border:1px dashed rgba(196,181,253,.26);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  color:rgba(202,191,230,.5);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.logo-slot img{max-height:34px;width:auto}
.logo-slot:has(img){border-style:solid;border-color:rgba(196,181,253,.16)}
.logo-slot:has(img) span{display:none}

.logo-strip-note{
  margin:16px 0 0;
  color:rgba(233,226,248,.42);
  font-size:12.5px;
  text-align:center;
}

@media (max-width:900px){
  .logo-strip{padding-bottom:72px}
  .logo-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:520px){
  .logo-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo-slot{height:62px}
}

/* ---------- 3 and 6 · card grid --------------------------------- */
.tid-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  margin:0;
  padding:0;
  list-style:none;
}

.tid-card{display:flex;flex-direction:column}
.tid-card .ph-box{margin-bottom:22px}
.ph-4x3{aspect-ratio:4/3}

.tid-card h3{
  margin:0 0 10px;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(19px,1.9vw,23px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.024em;
}

.tid-card p{
  flex:1;
  margin:0 0 16px;
  color:#5a5270;
  font-size:15.5px;
  line-height:1.62;
}

.tid-card-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.tid-step-n{color:#7c3aed}

@media (max-width:900px){
  .tid-grid{grid-template-columns:1fr;gap:40px;max-width:540px;margin:0 auto}
}

/* ---------- 3 · who it is for · hairline rows -------------------- */
.fit-rows{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(27,20,48,.1);
}

.fit-row{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:14px 56px;
  padding:36px 0 38px;
  border-bottom:1px solid rgba(27,20,48,.1);
}

.fit-n{
  display:block;
  margin-bottom:12px;
  color:#7c3aed;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.16em;
}

.fit-lede h3{
  margin:0 0 12px;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(20px,2.05vw,25px);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.026em;
}

.fit-quote{
  margin:0;
  max-width:34ch;
  color:#6b6383;
  font-size:15.5px;
  font-style:italic;
  line-height:1.55;
}

.fit-body{display:flex;flex-direction:column;align-items:flex-start}

.fit-body p{
  margin:0 0 18px;
  max-width:58ch;
  color:#5a5270;
  font-size:16px;
  line-height:1.65;
}

@media (max-width:900px){
  .fit-row{grid-template-columns:1fr;gap:16px;padding:30px 0 32px}
  .fit-quote{max-width:none}
  .fit-body p{margin-bottom:14px}
}

html[data-theme="dark"] .fit-rows{border-top-color:rgba(255,255,255,.11)}
html[data-theme="dark"] .fit-row{border-bottom-color:rgba(255,255,255,.11)}
html[data-theme="dark"] .fit-lede h3{color:var(--foreground)}
html[data-theme="dark"] .fit-quote{color:#a79fbb}
html[data-theme="dark"] .fit-body p{color:#b4acc4}
html[data-theme="dark"] .fit-n{color:#a78bfa}

/* ---------- 4 · day-one boxes ----------------------------------- */
.chapter-tight{padding:76px 0}

.tid-boxes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
}

.tid-box{
  padding:32px 26px;
  border:1px solid #e5e0f2;
  border-radius:18px;
  background:#fff;
  text-align:center;
  box-shadow:0 10px 30px rgba(48,31,88,.06);
}

.tid-box strong{
  display:block;
  color:#630ed4;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(34px,4vw,50px);
  font-weight:800;
  line-height:1;
  letter-spacing:-.035em;
}

.tid-box span{
  display:block;
  margin-top:12px;
  color:#5a5270;
  font-size:15px;
  line-height:1.55;
}

@media (max-width:820px){
  .tid-boxes{grid-template-columns:1fr}
  .chapter-tight{padding:60px 0}
}

html[data-theme="dark"] .tid-box{background:var(--card);border-color:#312b41}
html[data-theme="dark"] .tid-box strong{color:#c77dff}
html[data-theme="dark"] .tid-box span{color:#b4acc4}

/* ---------- 5 · the case, then the three tab blocks -------------- */
.tid-lead{
  max-width:860px;
  margin:0 auto 68px;
  text-align:center;
}

.tid-lead h2{
  margin:0;
  color:#fff;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(27px,3.4vw,46px);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.032em;
  text-wrap:balance;
}

.tid-lead-kicker{
  margin:20px 0 0;
  color:rgba(233,226,248,.56);
  font-size:17px;
  font-weight:600;
}

.tid-block+.tid-block{
  margin-top:92px;
  padding-top:84px;
  border-top:1px solid rgba(196,181,253,.14);
}

.tid-block .chapter-head.is-centered h3{
  margin:0;
  color:#fff;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(23px,2.8vw,36px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.tid-block .chapter-head.is-centered p{
  max-width:58ch;
  margin:16px auto 0;
  color:rgba(233,226,248,.7);
  font-size:17px;
  line-height:1.62;
}

/* panel captions sit under an h3 block head, so they are h4 */
.tid-panel-cap h4{
  margin:0 0 9px;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(20px,2.1vw,25px);
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.025em;
}

.tid-tabs.is-ink .tid-panel-cap h4{color:#fff}

@media (max-width:700px){
  .tid-lead{margin-bottom:52px}
  .tid-block+.tid-block{margin-top:68px;padding-top:60px}
}

html[data-theme="dark"] .tid-panel-cap h4{color:var(--foreground)}

/* ---------- 8 · managed desk panel ------------------------------- */
.tid-custom{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:52px;
  align-items:center;
  padding:48px;
  border:1px solid #e5e0f2;
  border-radius:24px;
  background:#fff;
  box-shadow:0 22px 60px rgba(48,31,88,.1);
}

.tid-custom-flag{
  display:inline-block;
  margin-bottom:16px;
  padding:6px 12px;
  border-radius:999px;
  background:#f3effc;
  color:#630ed4;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.tid-custom-copy h2{
  margin:0 0 14px;
  color:#1b1430;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(25px,2.9vw,38px);
  font-weight:800;
  line-height:1.14;
  letter-spacing:-.03em;
}

.tid-custom-copy p{margin:0 0 26px;color:#5a5270;font-size:16px;line-height:1.65}

.tid-custom-list{display:grid;gap:13px;margin:0;padding:0;list-style:none}

.tid-custom-list li{
  position:relative;
  padding-left:30px;
  color:#3d3552;
  font-size:15px;
  font-weight:600;
  line-height:1.5;
}

.tid-custom-list li::before{
  content:"";
  position:absolute;
  left:0;top:2px;
  width:19px;height:19px;
  border:1px solid #ddd6fe;
  border-radius:50%;
  background:#f3effc;
}

.tid-custom-list li::after{
  content:"";
  position:absolute;
  left:5.5px;top:7px;
  width:8px;height:4px;
  border-left:2px solid #630ed4;
  border-bottom:2px solid #630ed4;
  transform:rotate(-45deg);
}

@media (max-width:900px){
  .tid-custom{grid-template-columns:1fr;gap:34px;padding:32px}
}

@media (max-width:520px){
  .tid-custom{padding:26px;border-radius:20px}
}

html[data-theme="dark"] .tid-custom{background:var(--card);border-color:#312b41}
html[data-theme="dark"] .tid-custom-copy h2{color:var(--foreground)}
html[data-theme="dark"] .tid-custom-copy p{color:#b4acc4}
html[data-theme="dark"] .tid-custom-list li{color:#c9c0d9}
html[data-theme="dark"] .tid-custom-flag{background:rgba(168,85,247,.16);color:#c4b5fd}
html[data-theme="dark"] .tid-card h3{color:var(--foreground)}
html[data-theme="dark"] .tid-card p{color:#b4acc4}

/* inner-page ink opener: the header is now flush and 72px, so the
   old floating-pill clearance is no longer needed */
.page-open{padding-top:136px}

@media (max-width:960px){.page-open{padding-top:118px}}
@media (max-width:700px){.page-open{padding-top:104px}}

/* ================================================================
   TIDIO PORT - REVIEW PASS 1
   Feedback from the live eyeball: white secondary button, no logo
   hover box, a real hero badge, real wordmarks in the logo row,
   and air between the hero and the logo band.
   ================================================================ */

/* ---- secondary CTA: white button, accent text on hover --------- */
.hv3-btn-ghost{
  border-color:transparent;
  background:#fff;
  color:#100a20;
}

.hv3-btn-ghost:hover{
  border-color:transparent;
  background:#fff;
  color:#630ed4;
}

.hv3-btn-ghost svg{
  stroke:currentColor;
  opacity:1;
}

.hv3-btn-ghost:hover svg{stroke:#630ed4}

/* ---- header brand: no hover box -------------------------------- */
#site-header .brand{
  padding:0;
  margin-left:0;
  border-radius:0;
  background:transparent;
  transition:opacity .18s ease;
}

#site-header .brand:hover{background:transparent;opacity:.82}

/* ---- hero badge: a real claim, not a dashed slot --------------- */
.tid-badge{
  gap:8px;
  padding:7px 16px 7px 8px;
  border-color:rgba(196,181,253,.28);
  background:rgba(124,58,237,.18);
  color:rgba(240,235,252,.92);
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
}

.tid-badge-ic{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:22px;height:22px;
  border-radius:50%;
  background:rgba(196,181,253,.22);
  color:#d8ccff;
}

.tid-badge-ic svg{
  width:13px;height:13px;
  fill:none;stroke:currentColor;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---- logo band: air above it, plain wordmarks in a row --------- */
.logo-strip{padding:84px 0 96px}

.logo-strip-head{margin-bottom:38px}

.logo-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:22px 56px;
  margin:0;
  padding:0;
  list-style:none;
}

.logo-mark{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:rgba(233,226,248,.66);
  transition:color .2s ease;
}

.logo-mark:hover{color:rgba(255,255,255,.94)}

.logo-glyph{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto}

.logo-glyph svg{
  width:24px;height:24px;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}

.logo-word{
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.03em;
  white-space:nowrap;
}

.logo-strip-note{margin-top:30px;color:rgba(233,226,248,.34);font-size:12px}

@media (max-width:900px){
  .logo-strip{padding:64px 0 76px}
  .logo-row{gap:20px 38px}
  .logo-word{font-size:17px}
}

@media (max-width:520px){
  .logo-row{gap:18px 28px}
  .logo-word{font-size:15.5px}
  .logo-glyph,.logo-glyph svg{width:20px;height:20px}
}

/* ---- tabs band: one heading, four tabs -------------------------- */
.tid-tabs.is-ink .chapter-head.is-centered{margin-bottom:44px}

.tid-tabs.is-ink .chapter-head.is-centered h2{
  color:#fff;
  text-wrap:balance;
}

.tid-tabs.is-ink .chapter-head.is-centered p{
  max-width:60ch;
  color:rgba(233,226,248,.7);
}

/* ================================================================
   TIDIO PORT - REVIEW PASS 2
   Second live eyeball. Four structural notes and two bugs:
     1. the h1 ran to four lines, so the copy is now two short
        parallel clauses that hold two lines to well below 900px;
     2. the hero band moves to clean white, the way tidio.com opens,
        and the logo strip follows it so the page starts on paper;
     3. the header becomes a white sticky bar with a very light
        shadow instead of an ink slab;
     4. the hero media is a real 16:9 stage in a white frame, placed
        so the fold cuts it and the page asks to be scrolled;
     5. BUG: the secondary CTA rendered as a blank white pill. Its
        colour is now pinned per link state, the same way the solid
        CTA already was;
     6. BUG: the drawer sat at z-index 100 under a z-index 998
        header, so the top of the panel was covered. The whole
        off-canvas menu is rebuilt below.
   Dark theme keeps the ink treatment; every light rule here is
   restored to ink under html[data-theme="dark"].
   ================================================================ */

/* ---------------------------------------------------------------
   1 - HEADER - white, sticky, very light shadow
   --------------------------------------------------------------- */
#site-header{
  border-bottom:1px solid rgba(16,10,32,.07);
  background:#fff;
  box-shadow:0 1px 2px rgba(16,10,32,.04);
  transition:box-shadow .22s ease,border-color .22s ease;
}

#site-header.scrolled{
  border-bottom-color:rgba(16,10,32,.08);
  background:#fff;
  box-shadow:0 1px 2px rgba(16,10,32,.05),0 8px 24px rgba(16,10,32,.07);
}

#site-header .brand-name{color:#100a20}

#site-header .nav-links a{color:#4a4262}
#site-header .nav-links a:hover{background:#f5f2fc;color:#100a20}
#site-header .nav-links a[aria-current="page"]{color:#630ed4}

#site-header .theme-toggle{
  border-color:#e6e1f0;
  background:#fff;
  color:#5a5270;
}

#site-header .theme-toggle:hover{background:#f5f2fc;color:#100a20}

#site-header .auth-link,
#site-header .outline-btn.auth-link{color:#3d3552}

#site-header .auth-link:hover,
#site-header .outline-btn.auth-link:hover{background:#f5f2fc;color:#100a20}

#site-header .menu-btn{
  border-color:#e6e1f0;
  background:#fff;
}

#site-header .menu-btn span{background:#100a20}

/* ---------------------------------------------------------------
   2 - HERO - white ground
   --------------------------------------------------------------- */
.home-v2 .hero-v3.hero-tid{
  padding:104px 0 0;
  background:#fff;
  color:#100a20;
}

.hero-tid .hero-v3-field::before{
  background:
    radial-gradient(120% 86% at 50% -12%,#f1eaff 0%,rgba(241,234,255,0) 62%),
    radial-gradient(88% 68% at 88% 4%,#eef3ff 0%,rgba(238,243,255,0) 58%),
    linear-gradient(180deg,#fbfaff 0%,#ffffff 62%);
}

.hero-tid .hv3-bloom-a{background:radial-gradient(circle,rgba(124,58,237,.13),rgba(124,58,237,0) 68%)}
.hero-tid .hv3-bloom-b{background:radial-gradient(circle,rgba(99,14,212,.09),rgba(99,14,212,0) 70%)}

.hero-tid .hv3-grid{
  background-image:
    linear-gradient(rgba(99,14,212,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,14,212,.07) 1px,transparent 1px);
  mask-image:radial-gradient(62% 56% at 50% 30%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(62% 56% at 50% 30%,#000 0%,transparent 78%);
}

/* grain is a dark-ground device; it muddies white */
.hero-tid .hv3-grain{display:none}

/* badge reads as a light chip carrying a brand tick */
.hero-tid .tid-badge{
  border-color:#e4dbf8;
  background:#f6f2fe;
  color:#4c1d95;
}

.hero-tid .tid-badge-ic{background:#630ed4;color:#fff}

/* headline: two short clauses, muted setup over an ink payoff */
.hero-tid .hero-v3-copy{max-width:940px}

.home-v2 .hero-v3.hero-tid h1{
  margin:0 0 20px;
  font-size:clamp(31px,4.5vw,56px);
  line-height:1.06;
  letter-spacing:-.036em;
}

.home-v2 .hero-v3.hero-tid h1 .hv3-line-a{color:#8d85a5}
.home-v2 .hero-v3.hero-tid h1 .hv3-line-b{color:#100a20}

.hero-tid .hero-v3-sub{color:#5a5270}
.hero-tid .hero-v3-note{color:#847c96}

/* ---------------------------------------------------------------
   3 - HERO MEDIA - 16:9 in a white frame, cut by the fold
   --------------------------------------------------------------- */
.ph-16x9{aspect-ratio:16/9;height:auto}

.hero-media{
  max-width:1120px;
  margin:46px auto 0;
  padding:0 24px;
}

.hero-tid .hero-media-inner{
  padding:10px;
  border:1px solid #e9e4f4;
  border-radius:22px;
  background:linear-gradient(180deg,#fff 0%,#faf9fe 100%);
  box-shadow:0 30px 70px rgba(48,31,88,.14),0 2px 6px rgba(48,31,88,.05);
}

.hero-tid .hero-media .ph-box{
  aspect-ratio:2/1;
  border-radius:14px;
  box-shadow:none;
}

.hero-tid .hero-product-video,
.hero-tid .hero-product-poster{
  inset:-5%;
  width:110%;height:110%;
  object-fit:cover;
  object-position:center center;
}

/* ---------------------------------------------------------------
   4 - CTA BUTTONS
   The secondary button is white with an ink label. Pin the label
   per link state: an unpinned anchor colour is what left it
   rendering as a blank white pill.
   --------------------------------------------------------------- */
.hv3-btn-ghost,
.hv3-btn-ghost:link,
.hv3-btn-ghost:visited,
.hv3-btn-ghost:focus,
.hv3-btn-ghost:focus-visible,
.hv3-btn-ghost:active{
  border-color:#ded6ef;
  background:#fff;
  color:#241a3d;
  box-shadow:0 1px 2px rgba(16,10,32,.06);
}

.hv3-btn-ghost:hover{
  border-color:#c4b5fd;
  background:#faf8ff;
  color:#630ed4;
  box-shadow:0 4px 14px rgba(48,31,88,.08);
}

.hv3-btn-ghost svg,
.hv3-btn-ghost:hover svg{stroke:currentColor}

/* on the ink chapters the same button keeps a clean white edge */
.chapter-ink .hv3-btn-ghost,
.page-open .hv3-btn-ghost{border-color:transparent}

/* mobile: buttons size to their label instead of stretching edge
   to edge, which read as two elongated slabs */
@media (max-width:700px){
  .hero-v3-cta,
  .page-open-cta{justify-content:center}

  .hv3-btn,
  .page-open-cta .hv3-btn,
  .close-cta .hv3-btn{
    width:auto;
    min-height:46px;
    padding:0 20px;
    font-size:14px;
  }
}

/* ---------------------------------------------------------------
   5 - LOGO STRIP - follows the hero onto paper
   --------------------------------------------------------------- */
.logo-strip{
  padding:76px 0 84px;
  background:#fff;
  color:#100a20;
}

.logo-strip::after{
  background:linear-gradient(90deg,rgba(99,14,212,0),rgba(99,14,212,.16),rgba(99,14,212,0));
}

.logo-strip-head{color:#1b1430}
.logo-mark{color:#8d85a5}
.logo-mark:hover{color:#2b2143}
.logo-strip-note{color:#a49bb8}

/* ---------------------------------------------------------------
   6 - OFF-CANVAS MENU - rebuilt
   Was painted under the header and styled for the old floating
   pill. Now: above every fixed layer, full-bleed on small phones,
   white chrome and hairlines to match the new header.
   --------------------------------------------------------------- */
.menu-backdrop{
  z-index:1150;
  background:rgba(16,10,32,.44);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}

.mobile-nav{
  position:fixed;
  top:0;right:0;bottom:0;
  left:auto;
  z-index:1200;
  width:min(400px,100%);
  display:flex!important;
  flex-direction:column;
  gap:0;
  padding:0;
  border:0;
  border-left:1px solid #ece7f5;
  border-radius:0;
  background:#fff;
  box-shadow:-24px 0 70px rgba(16,10,32,.18);
  overflow:hidden;
  overscroll-behavior:contain;
  transform:translateX(100%);
  visibility:hidden;
  transition:transform .34s cubic-bezier(.32,.72,0,1),visibility 0s linear .34s;
}

.mobile-nav[hidden]{display:flex!important;transform:translateX(100%);visibility:hidden}

.mobile-nav:not([hidden]){
  transform:none;
  visibility:visible;
  transition:transform .34s cubic-bezier(.32,.72,0,1),visibility 0s linear;
}

/* head: brand left, controls right */
.mobile-nav .mnav-head{
  flex:0 0 auto;
  align-items:center;
  gap:12px;
  padding:14px 16px 14px 18px;
  border-bottom:1px solid #f0ecf7;
  background:#fff;
}

.mnav-head-actions{display:flex;align-items:center;gap:8px}

.mobile-nav .mnav-brand{font-size:16.5px;color:#100a20}
.mobile-nav .mnav-brand img{width:28px;height:28px;border-radius:9px;box-shadow:none}

.mobile-nav .mobile-nav-close,
.mobile-nav .theme-toggle{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  flex:0 0 auto;
  border:1px solid #e6e1f0;
  border-radius:12px;
  background:#fff;
  color:#4a4262;
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

.mobile-nav .mobile-nav-close:hover,
.mobile-nav .theme-toggle:hover{
  border-color:#c4b5fd;
  background:#f6f2ff;
  color:#630ed4;
  transform:none;
}

.mobile-nav .mobile-nav-close svg{width:18px;height:18px;stroke:currentColor}

/* body */
.mobile-nav .mnav-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px 12px 12px;
  background:#fff;
}

.mobile-nav .mnav-label{
  margin:0 0 8px 10px;
  color:#a49bb8;
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
}

.mobile-nav .mnav-label:not(:first-child){margin-top:20px}

.mobile-nav .mnav-links{gap:2px}

.mobile-nav .mnav-links a{
  gap:12px;
  padding:10px;
  border:1px solid transparent;
  border-radius:14px;
}

.mobile-nav .mnav-links a:hover,
.mobile-nav .mnav-links a[aria-current="page"],
.home-v2 .mobile-nav .mnav-links a[aria-current="page"]{
  border-color:#eae3f9;
  background:#f7f4fd;
  box-shadow:none;
}

.mobile-nav .mnav-ic{width:38px;height:38px;border-radius:11px}
.mobile-nav .mnav-txt strong{font-size:15px;color:#100a20}
.mobile-nav .mnav-txt small{color:#8d85a5;font-size:12.5px}
.mobile-nav .mnav-arrow{color:#c9c1da}

/* foot: the two actions, then the reassurance line and the mail */
.mobile-nav .mnav-cta{
  flex:0 0 auto;
  padding:14px 16px 12px;
  border-top:1px solid #f0ecf7;
  background:#fff;
}

.mobile-nav .mnav-cta a{
  min-height:46px;
  border-radius:12px;
  font-size:14.5px;
  font-weight:700;
}

.mobile-nav .mnav-signin{
  border:1px solid #ded6ef;
  background:#fff;
  color:#241a3d;
}

.mobile-nav .mnav-signin:hover{
  border-color:#c4b5fd;
  background:#faf8ff;
  color:#630ed4;
}

.mobile-nav .mnav-trial{
  margin-top:10px;
  border:0;
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:0 10px 24px rgba(99,14,212,.28);
}

.mobile-nav .mnav-trial:hover{
  background:var(--gradient-brand-hover);
  box-shadow:0 12px 28px rgba(99,14,212,.34);
  transform:none;
}

.mobile-nav .mnav-cta-note{color:#a49bb8;font-size:12px}

.mobile-nav .mnav-foot{
  flex:0 0 auto;
  padding:12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid #f0ecf7;
  background:#fbfaff;
}

.mobile-nav .mnav-foot-mail{color:#6b6280;font-size:12.5px}
.mobile-nav .mnav-foot-mail:hover{color:#630ed4}

@media (prefers-reduced-motion:reduce){
  .mobile-nav{transition:visibility 0s linear}
}

/* ---------------------------------------------------------------
   7 - DARK THEME - everything above returns to ink
   --------------------------------------------------------------- */
html[data-theme="dark"] #site-header{
  border-bottom-color:rgba(255,255,255,.1);
  background:#100a20;
  box-shadow:none;
}

html[data-theme="dark"] #site-header.scrolled{
  border-bottom-color:rgba(255,255,255,.1);
  background:#100a20;
  box-shadow:0 10px 30px rgba(6,2,16,.42);
}

html[data-theme="dark"] #site-header .brand-name{color:#fff}
html[data-theme="dark"] #site-header .nav-links a{color:rgba(255,255,255,.78)}
html[data-theme="dark"] #site-header .nav-links a:hover{background:rgba(255,255,255,.09);color:#fff}
html[data-theme="dark"] #site-header .nav-links a[aria-current="page"]{color:#c4b5fd}

html[data-theme="dark"] #site-header .theme-toggle{
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.82);
}

html[data-theme="dark"] #site-header .theme-toggle:hover{background:rgba(255,255,255,.12);color:#fff}

html[data-theme="dark"] #site-header .auth-link,
html[data-theme="dark"] #site-header .outline-btn.auth-link{color:rgba(255,255,255,.86)}

html[data-theme="dark"] #site-header .auth-link:hover,
html[data-theme="dark"] #site-header .outline-btn.auth-link:hover{background:rgba(255,255,255,.09);color:#fff}

html[data-theme="dark"] #site-header .menu-btn{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
}

html[data-theme="dark"] #site-header .menu-btn span{background:#fff}

html[data-theme="dark"] .home-v2 .hero-v3.hero-tid{background:#100a20;color:#fff}

html[data-theme="dark"] .hero-tid .hero-v3-field::before{
  background:
    radial-gradient(120% 88% at 50% -6%,#2a1656 0%,rgba(42,22,86,0) 58%),
    radial-gradient(96% 74% at 8% 96%,#1d1142 0%,rgba(29,17,66,0) 62%),
    linear-gradient(168deg,#140c28 0%,#100a20 46%,#0c0719 100%);
}

html[data-theme="dark"] .hero-tid .hv3-bloom-a{background:radial-gradient(circle,rgba(124,58,237,.42),rgba(124,58,237,0) 68%)}
html[data-theme="dark"] .hero-tid .hv3-bloom-b{background:radial-gradient(circle,rgba(76,29,149,.40),rgba(76,29,149,0) 70%)}

html[data-theme="dark"] .hero-tid .hv3-grid{
  background-image:
    linear-gradient(rgba(196,181,253,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(196,181,253,.16) 1px,transparent 1px);
}

html[data-theme="dark"] .hero-tid .hv3-grain{display:block}

html[data-theme="dark"] .hero-tid .tid-badge{
  border-color:rgba(196,181,253,.28);
  background:rgba(124,58,237,.18);
  color:rgba(240,235,252,.92);
}

html[data-theme="dark"] .hero-tid .tid-badge-ic{background:rgba(196,181,253,.22);color:#d8ccff}
html[data-theme="dark"] .home-v2 .hero-v3.hero-tid h1 .hv3-line-a{color:rgba(255,255,255,.58)}
html[data-theme="dark"] .home-v2 .hero-v3.hero-tid h1 .hv3-line-b{color:#fff}
html[data-theme="dark"] .hero-tid .hero-v3-sub{color:#c6bce3}
html[data-theme="dark"] .hero-tid .hero-v3-note{color:rgba(233,226,248,.6)}

html[data-theme="dark"] .hero-tid .hero-media-inner{
  border-color:rgba(196,181,253,.16);
  background:rgba(255,255,255,.03);
  box-shadow:0 40px 90px rgba(6,2,16,.5);
}

html[data-theme="dark"] .logo-strip{background:#100a20;color:#fff}
html[data-theme="dark"] .logo-strip::after{background:linear-gradient(90deg,rgba(167,139,250,0),rgba(167,139,250,.34),rgba(167,139,250,0))}
html[data-theme="dark"] .logo-strip-head{color:#fff}
html[data-theme="dark"] .logo-mark{color:rgba(233,226,248,.66)}
html[data-theme="dark"] .logo-mark:hover{color:rgba(255,255,255,.94)}
html[data-theme="dark"] .logo-strip-note{color:rgba(233,226,248,.34)}

html[data-theme="dark"] .hv3-btn-ghost,
html[data-theme="dark"] .hv3-btn-ghost:link,
html[data-theme="dark"] .hv3-btn-ghost:visited,
html[data-theme="dark"] .hv3-btn-ghost:focus,
html[data-theme="dark"] .hv3-btn-ghost:active{
  border-color:transparent;
  background:#fff;
  color:#100a20;
}

html[data-theme="dark"] .mobile-nav{
  border-left-color:#2a2340;
  background:#151022;
}

html[data-theme="dark"] .mobile-nav .mnav-head,
html[data-theme="dark"] .mobile-nav .mnav-scroll,
html[data-theme="dark"] .mobile-nav .mnav-cta{background:#151022;border-color:#241d38}

html[data-theme="dark"] .mobile-nav .mnav-foot{background:#120e1e;border-color:#241d38}
html[data-theme="dark"] .mobile-nav .mnav-brand{color:#fff}
html[data-theme="dark"] .mobile-nav .mnav-txt strong{color:#f3f0fa}
html[data-theme="dark"] .mobile-nav .mnav-txt small{color:#9a92ad}
html[data-theme="dark"] .mobile-nav .mnav-label{color:#8b83a3}

html[data-theme="dark"] .mobile-nav .mnav-links a:hover,
html[data-theme="dark"] .mobile-nav .mnav-links a[aria-current="page"],
html[data-theme="dark"] .home-v2 .mobile-nav .mnav-links a[aria-current="page"]{
  border-color:#332a4d;
  background:#1d1730;
}

html[data-theme="dark"] .mobile-nav .mobile-nav-close,
html[data-theme="dark"] .mobile-nav .theme-toggle,
html[data-theme="dark"] .mobile-nav .mnav-signin{
  border-color:#2f2846;
  background:#1b1530;
  color:#e7e2f4;
}

/* ---------------------------------------------------------------
   8 - RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width:960px){
  .home-v2 .hero-v3.hero-tid{padding:96px 0 0}
  .hero-media{margin-top:40px}
}

/* ---------------------------------------------------------------
   Mobile hero: the still stands in for the video. Frame and crop stay
   exactly as they are on desktop.
   --------------------------------------------------------------- */
@media (max-width:700px){
  .hero-tid .hero-product-video{display:none!important}
  .hero-tid .hero-product-poster{display:block!important}
}

@media (max-width:700px){
  .home-v2 .hero-v3.hero-tid{padding:88px 0 0}
  .home-v2 .hero-v3.hero-tid h1{font-size:clamp(28px,7.4vw,36px);margin-bottom:16px}
  .hero-media{margin-top:32px;padding:0 18px}
  .hero-tid .hero-media-inner{padding:7px;border-radius:16px}
  .hero-tid .hero-media .ph-box{border-radius:11px}
  .logo-strip{padding:60px 0 68px}
}

@media (max-width:440px){
  .mobile-nav{width:100%;border-left:0}
}

/* ================================================================
   TIDIO PORT - REVIEW PASS 3
   Third live eyeball:
     1. the hero ground drops the gradient, blooms, grid and grain.
        It is crisp white, full stop;
     2. the hero opens lower so the badge is not hugging the header;
     3. the muted first h1 line read as blurred, so it moves from a
        pale lilac grey to a solid ink grey;
     4. the badge carries the product claim, not the policy line;
     5. the hard edge under the demo stage was the hero clipping its
        own shadow (overflow:hidden with padding-bottom:0). The hero
        now paints above the logo band and lets the shadow bleed;
     6. the drawer backdrop no longer blurs, which was smearing the
        whole panel on the user's browser;
     7. the brand becomes the supplied lockup, with no rounded fill
        or drop shadow behind it and no tap highlight on press.
   ================================================================ */

/* ---------------------------------------------------------------
   1 - HERO GROUND - crisp white, nothing else
   --------------------------------------------------------------- */
.hero-tid .hero-v3-field{display:none}

.home-v2 .hero-v3.hero-tid{
  padding:140px 0 0;
  background:#fff;
  color:#100a20;
}

/* the hero must not clip the demo stage shadow, and it has to paint
   over the logo band so that shadow can bleed into it */
.hero-v3.hero-tid{overflow:visible;z-index:2}
.logo-strip{z-index:1}

/* ---------------------------------------------------------------
   2 - HERO TYPE - the setup line reads as ink, not haze
   --------------------------------------------------------------- */
.home-v2 .hero-v3.hero-tid h1 .hv3-line-a{color:#4a4262}
.home-v2 .hero-v3.hero-tid h1 .hv3-line-b{color:#100a20}

/* ---------------------------------------------------------------
   3 - DRAWER BACKDROP - a plain scrim, no blur
   --------------------------------------------------------------- */
.menu-backdrop{
  z-index:1150;
  background:rgba(16,10,32,.46);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ---------------------------------------------------------------
   4 - BRAND LOCKUP
   One image carrying the mark and the wordmark. Dark theme swaps
   to the light-wordmark file through content:url(), so only the
   file the theme needs is ever fetched.
   --------------------------------------------------------------- */
.brand-lockup{
  display:block;
  width:auto;
  height:30px;
  max-width:none;
  border-radius:0;
  background:none;
  box-shadow:none;
  object-fit:contain;
}

html[data-theme="dark"] .brand-lockup{
  content:url("/assets/brand/ads-helpdesk-lockup-dark.png?v=20260814-lockup");
}

.brand,
.mnav-brand{-webkit-tap-highlight-color:transparent}

.brand:focus-visible,
.mnav-brand:focus-visible{outline:2px solid #630ed4;outline-offset:4px;border-radius:6px}

#site-header .brand{background:none;box-shadow:none}

.mobile-nav .mnav-brand .brand-lockup{
  width:auto;
  height:27px;
  border-radius:0;
  box-shadow:none;
}

.site-footer .brand-lockup{height:30px}

@media (max-width:700px){
  #site-header .brand-lockup{height:26px}
}

/* ---------------------------------------------------------------
   5 - DARK THEME - the hero ground comes back
   --------------------------------------------------------------- */
html[data-theme="dark"] .hero-tid .hero-v3-field{display:block}

html[data-theme="dark"] .home-v2 .hero-v3.hero-tid{
  background:#100a20;
  color:#fff;
}

html[data-theme="dark"] .home-v2 .hero-v3.hero-tid h1 .hv3-line-a{color:rgba(255,255,255,.62)}
html[data-theme="dark"] .home-v2 .hero-v3.hero-tid h1 .hv3-line-b{color:#fff}

/* ---------------------------------------------------------------
   6 - RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width:960px){
  .home-v2 .hero-v3.hero-tid{padding:124px 0 0}
}

@media (max-width:700px){
  .home-v2 .hero-v3.hero-tid{padding:112px 0 0}
}

/* ================================================================
   TIDIO PORT - REVIEW PASS 4
     1. OFF-CANVAS MENU REBUILT on its own mnav2-* namespace. The old
        .mobile-nav / .mnav-* stack had four layers of rules across
        home.css and three override passes, and the panel kept losing
        its stacking fight with the header. Nothing here shares a
        class name with that stack, the scrim is a child of the panel
        root instead of a JS-created sibling, and the header is hidden
        outright while the menu is open so an overlap is impossible.
        No backdrop-filter anywhere in this system.
     2. The hero ground is flat in BOTH themes now. Dark was still
        restoring the grid, blooms and gradient.
     3. The brand-coloured drop shadow comes off the primary buttons.
   ================================================================ */

/* ---------------------------------------------------------------
   1 - HERO GROUND - flat in dark too
   --------------------------------------------------------------- */
.hero-tid .hero-v3-field,
html[data-theme="dark"] .hero-tid .hero-v3-field{display:none}

html[data-theme="dark"] .home-v2 .hero-v3.hero-tid{background:#100a20}

/* ---------------------------------------------------------------
   2 - PRIMARY BUTTONS - no coloured glow under them
   --------------------------------------------------------------- */
.hv3-btn-primary,
.hv3-btn-primary:hover,
.hv3-btn-primary:focus,
.hv3-btn-primary:active{box-shadow:none}

#site-header .auth-btn,
#site-header .solid-btn.auth-btn,
#site-header .auth-btn:hover,
#site-header .solid-btn.auth-btn:hover{box-shadow:none}

/* ---------------------------------------------------------------
   3 - OFF-CANVAS MENU (mnav2)
   --------------------------------------------------------------- */
.mnav2{
  position:fixed;
  inset:0;
  z-index:9999;
  display:block;
  visibility:hidden;
  pointer-events:none;
}

/* the hidden attribute stays authoritative for assistive tech, but
   display is ours so the panel can animate out before it goes */
.mnav2[hidden]{display:none}

.mnav2.is-open{visibility:visible;pointer-events:auto}

.mnav2-scrim{
  position:absolute;
  inset:0;
  background:rgba(16,10,32,.5);
  opacity:0;
  transition:opacity .3s ease;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.mnav2.is-open .mnav2-scrim{opacity:1}

.mnav2-panel{
  position:absolute;
  top:0;right:0;bottom:0;
  display:flex;
  flex-direction:column;
  width:min(420px,100%);
  background:#fff;
  border-left:1px solid #ece7f5;
  box-shadow:-20px 0 60px rgba(16,10,32,.22);
  overscroll-behavior:contain;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}

.mnav2.is-open .mnav2-panel{transform:none}

/* the drawer carries its own brand and close, so the site header
   would only ever be in the way */
body.menu-open #site-header{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* head */
.mnav2-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex:0 0 auto;
  padding:14px 16px 14px 18px;
  border-bottom:1px solid #f0ecf7;
}

.mnav2-brand{
  display:inline-flex;
  align-items:center;
  -webkit-tap-highlight-color:transparent;
}

.mnav2-brand .brand-lockup{height:27px;width:auto}

.mnav2-close{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:40px;height:40px;
  padding:0;
  border:1px solid #e6e1f0;
  border-radius:12px;
  background:#fff;
  color:#4a4262;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

.mnav2-close:hover{border-color:#c4b5fd;background:#f6f2ff;color:#630ed4}
.mnav2-close svg{width:18px;height:18px}

/* body */
.mnav2-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:16px 12px 12px;
}

.mnav2-label{
  margin:0 0 8px 10px;
  color:#a49bb8;
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.mnav2-label:not(:first-child){margin-top:20px}

.mnav2-links{display:flex;flex-direction:column;gap:2px}

.mnav2-links a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid transparent;
  border-radius:14px;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .18s ease,border-color .18s ease;
}

.mnav2-links a:hover,
.mnav2-links a[aria-current="page"]{border-color:#eae3f9;background:#f7f4fd}

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

.mnav2-ic svg{width:19px;height:19px}

.mnav2-ic-a{background:var(--tint-violet-bg);border-color:var(--tint-violet-border);color:var(--tint-violet-fg)}
.mnav2-ic-b{background:var(--tint-blue-bg);border-color:var(--tint-blue-border);color:var(--tint-blue-fg)}
.mnav2-ic-c{background:var(--tint-green-bg);border-color:var(--tint-green-border);color:var(--tint-green-fg)}
.mnav2-ic-d{background:var(--tint-amber-bg);border-color:var(--tint-amber-border);color:var(--tint-amber-fg)}
.mnav2-ic-e{background:var(--tint-pink-bg);border-color:var(--tint-pink-border);color:var(--tint-pink-fg)}
.mnav2-ic-f{background:var(--tint-blue-bg);border-color:var(--tint-blue-border);color:var(--tint-blue-fg)}

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

.mnav2-txt strong{
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:15px;
  font-weight:800;
  color:#100a20;
}

.mnav2-txt small{font-size:12.5px;font-weight:600;line-height:1.35;color:#8d85a5}

.mnav2-arrow{flex:0 0 auto;width:17px;height:17px;color:#c9c1da}

/* foot */
.mnav2-foot{
  flex:0 0 auto;
  padding:14px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid #f0ecf7;
}

.mnav2-signin,
.mnav2-trial{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  border-radius:12px;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:14.5px;
  font-weight:700;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}

.mnav2-signin{border:1px solid #ded6ef;background:#fff;color:#241a3d}
.mnav2-signin:hover{border-color:#c4b5fd;background:#faf8ff;color:#630ed4}

.mnav2-trial{
  margin-top:10px;
  border:0;
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:none;
}

.mnav2-trial:hover{background:var(--gradient-brand-hover)}
.mnav2-trial svg{width:17px;height:17px}

.mnav2-note{margin:10px 0 0;text-align:center;font-size:12px;font-weight:600;color:#a49bb8}

.mnav2-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #f0ecf7;
}

.mnav2-mail{font-size:12.5px;font-weight:700;color:#6b6280;text-decoration:none}
.mnav2-mail:hover{color:#630ed4}

.mnav2-theme{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:36px;height:36px;
  padding:0;
  border:1px solid #e6e1f0;
  border-radius:10px;
  background:#fff;
  color:#5a5270;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.mnav2-theme:hover{border-color:#c4b5fd;background:#f6f2ff;color:#630ed4}

@media (prefers-reduced-motion:reduce){
  .mnav2-panel,
  .mnav2-scrim{transition:none}
}

/* dark theme */
html[data-theme="dark"] .mnav2-panel{background:#151022;border-left-color:#2a2340}
html[data-theme="dark"] .mnav2-head,
html[data-theme="dark"] .mnav2-foot,
html[data-theme="dark"] .mnav2-meta{border-color:#241d38}
html[data-theme="dark"] .mnav2-txt strong{color:#f3f0fa}
html[data-theme="dark"] .mnav2-txt small{color:#9a92ad}
html[data-theme="dark"] .mnav2-label{color:#8b83a3}
html[data-theme="dark"] .mnav2-arrow{color:#4d4468}

html[data-theme="dark"] .mnav2-links a:hover,
html[data-theme="dark"] .mnav2-links a[aria-current="page"]{border-color:#332a4d;background:#1d1730}

html[data-theme="dark"] .mnav2-close,
html[data-theme="dark"] .mnav2-theme,
html[data-theme="dark"] .mnav2-signin{border-color:#2f2846;background:#1b1530;color:#e7e2f4}

html[data-theme="dark"] .mnav2-mail{color:#a79ec0}
html[data-theme="dark"] .mnav2-note{color:#7d7495}

/* ================================================================
   TIDIO PORT - REVIEW PASS 5
   The shelved feature-card artwork comes back, in the homepage
   platform grid, in place of the three image placeholders. Same
   treatment as the old .rhythm-art: an accent-tinted ground with a
   soft bloom, an eyebrow and claim in the top-left, the 3D artwork
   bleeding off the bottom-right corner, and a glass chip.
   Each card carries its own accent through --art-a / --art-a-rgb,
   so the row reads as a set of varying colours rather than three
   copies of one card.
   ================================================================ */

.tid-art{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  aspect-ratio:4/3;
  margin-bottom:22px;
  border:1px solid rgba(var(--art-a-rgb),.14);
  border-radius:20px;
  background:
    radial-gradient(circle at 88% 14%,rgba(var(--art-a-rgb),.22),transparent 38%),
    radial-gradient(circle at 12% 92%,rgba(255,255,255,.94),transparent 44%),
    linear-gradient(145deg,#fbfbfe 8%,rgba(var(--art-a-rgb),.11) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 18px 40px rgba(var(--art-a-rgb),.10);
}

/* per-card accent */
.tid-art-capture{--art-a:#3157d5;--art-a-rgb:49,87,213}
.tid-art-draft{--art-a:#bd6900;--art-a-rgb:189,105,0}
.tid-art-route{--art-a:#9b3f7e;--art-a-rgb:155,63,126}
.tid-art-watch{--art-a:#14734c;--art-a-rgb:20,115,76}

.tid-art-heading{
  position:absolute;
  z-index:3;
  top:20px;
  left:22px;
  max-width:54%;
}

.tid-art-heading span{
  display:block;
  color:var(--art-a);
  font-size:10px;
  font-weight:850;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.tid-art-chip{
  position:absolute;
  z-index:4;
  left:22px;
  bottom:18px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:#272130;
  box-shadow:0 8px 22px rgba(35,27,55,.12);
  font-size:10.5px;
  font-weight:780;
  letter-spacing:.015em;
}

/* User-supplied 4:3 photography fills the existing 4:3 frame. */
.tid-art img{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}

@media (max-width:700px){
  .tid-art{border-radius:16px;margin-bottom:18px}
  .tid-art-heading{top:16px;left:18px}
  .tid-art-chip{left:18px;bottom:14px}
}

@media (prefers-reduced-motion:reduce){
  .tid-art img{transition:none;transform:none}
}

/* dark theme: the artwork is drawn for a light ground, so the card
   keeps its pale plate and only the frame darkens around it */
html[data-theme="dark"] .tid-art{
  border-color:rgba(var(--art-a-rgb),.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 40px rgba(0,0,0,.3);
}

/* ================================================================
   FEATURES HERO — unified channels rendered as a crisp orbit system.
   Scoped to /features so other inner-page openers remain unchanged.
   ================================================================ */
.features-page-open{
  min-height:720px;
  padding:148px 0 86px;
  background:#fbfbfd;
  color:#100a20;
}

.features-page-open::after{
  background:linear-gradient(90deg,transparent,#e7e0f3,transparent);
}

.features-page-open .page-open-grid{
  grid-template-columns:minmax(0,.88fr) minmax(470px,1.12fr);
  gap:clamp(46px,5vw,84px);
}

.features-page-open .page-open-copy{max-width:590px}

.page-v2 .features-page-open h1{
  color:#100a20;
  font-size:clamp(43px,4.25vw,64px);
  line-height:1.04;
  letter-spacing:-.04em;
}

.features-page-open .page-open-sub{
  max-width:50ch;
  color:#5e566f;
  font-size:18px;
  line-height:1.65;
}

.features-page-open .page-open-cta{margin-top:30px}
.features-page-open .page-open-note{margin:12px 0 0;color:#756d84;font-size:13px}

.features-page-open .hv3-btn-ghost,
.features-page-open .hv3-btn-ghost:link,
.features-page-open .hv3-btn-ghost:visited{
  border-color:#ddd6e8;
  background:#fff;
  color:#241a3d;
}

.features-hero-art{
  position:relative;
  isolation:isolate;
  width:min(100%,600px);
  aspect-ratio:1;
  justify-self:end;
}

.features-hero-plate{
  position:absolute;
  z-index:-2;
  inset:14%;
  border-radius:14px;
  background:linear-gradient(145deg,#f6f7fa 0%,#f1f2f6 100%);
}

.features-hero-plate::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 48%,rgba(124,58,237,.09),transparent 45%);
}

.features-orbit{
  position:absolute;
  z-index:-1;
  border:1px solid rgba(124,58,237,.24);
  border-radius:50%;
}

.features-orbit-outer{inset:2%}
.features-orbit-inner{inset:14%}

.features-hub{
  position:absolute;
  z-index:2;
  top:50%;left:50%;
  display:grid;
  place-items:center;
  width:166px;height:166px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  box-shadow:0 28px 55px rgba(34,22,65,.18),0 3px 10px rgba(34,22,65,.07);
}

.features-hub img{width:132px;height:auto}

.features-node{
  --node-color:#6d28d9;
  position:absolute;
  z-index:3;
  display:grid;
  place-items:center;
  width:68px;height:68px;
  border:1px solid #ece8f3;
  border-radius:50%;
  background:#fff;
  color:var(--node-color);
  box-shadow:0 12px 28px rgba(42,31,69,.08);
  animation:features-node-drift 5.6s ease-in-out infinite;
}

.features-node svg{
  width:25px;height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.features-node b{
  position:absolute;
  top:calc(100% + 7px);
  left:50%;
  padding:4px 8px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#fff;
  color:#4f465e;
  box-shadow:0 5px 14px rgba(42,31,69,.08);
  font-size:10px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.features-node-ai{top:5%;left:44%;--node-color:#7c3aed}
.features-node-email{top:20%;right:2%;--node-color:#2563eb;animation-delay:-1.8s}
.features-node-chat{right:1%;bottom:21%;--node-color:#0e9f6e;animation-delay:-3.5s}
.features-node-sla{bottom:3%;left:54%;--node-color:#c24175;animation-delay:-.9s}
.features-node-route{top:38%;left:0;--node-color:#3157d5;animation-delay:-2.7s}
.features-node-approval{bottom:16%;left:7%;--node-color:#bd6900;animation-delay:-4.4s}

@keyframes features-node-drift{
  0%,100%{translate:0 0}
  50%{translate:0 -7px}
}

html[data-theme="dark"] .features-page-open{background:var(--background);color:var(--foreground)}
html[data-theme="dark"] .page-v2 .features-page-open h1{color:var(--foreground)}
html[data-theme="dark"] .features-page-open .page-open-sub,
html[data-theme="dark"] .features-page-open .page-open-note{color:var(--muted-foreground)}
html[data-theme="dark"] .features-hero-plate{background:linear-gradient(145deg,#191622,#211a2e)}
html[data-theme="dark"] .features-node,
html[data-theme="dark"] .features-node b,
html[data-theme="dark"] .features-hub{border-color:var(--border);background:var(--card)}
html[data-theme="dark"] .features-node b{color:var(--foreground)}
html[data-theme="dark"] .features-hub img{filter:brightness(0) invert(1)}

@media (max-width:980px){
  .features-page-open{padding:132px 0 74px}
  .features-page-open .page-open-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .features-page-open .page-open-copy{max-width:700px}
  .features-hero-art{justify-self:center;width:min(100%,570px)}
}

@media (max-width:620px){
  .features-page-open{min-height:0;padding:112px 0 58px}
  .page-v2 .features-page-open h1{font-size:clamp(37px,11vw,48px)}
  .features-page-open .page-open-sub{font-size:16.5px;line-height:1.6}
  .features-page-open .page-open-cta{justify-content:flex-start}
  .features-hero-art{width:calc(100% - 8px)}
  .features-hub{width:132px;height:132px}
  .features-hub img{width:105px}
  .features-node{width:54px;height:54px}
  .features-node svg{width:21px;height:21px}
  .features-node b{top:calc(100% + 5px);padding:3px 6px;font-size:8.5px}
}

@media (prefers-reduced-motion:reduce){
  .features-node{animation:none}
}

/* Features v2: image-led editorial layout, matching the homepage. */
.features-page-open{
  min-height:700px;
  padding:142px 0 78px;
}

.features-page-open .page-open-grid{
  grid-template-columns:minmax(0,.88fr) minmax(460px,1.12fr);
  gap:clamp(48px,5vw,82px);
}

.features-hero-image,
.feature-story-image{
  margin:0;
  overflow:hidden;
  border:1px solid #ece7f3;
  border-radius:16px;
  background:#f7f5fb;
}

.features-hero-image{
  width:min(100%,590px);
  aspect-ratio:1;
  justify-self:end;
}

.features-hero-image img,
.feature-story-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.feature-story{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(460px,1.1fr);
  align-items:center;
  gap:clamp(52px,6vw,92px);
}

.feature-story-reverse{grid-template-columns:minmax(460px,1.1fr) minmax(0,.9fr)}
.feature-story-copy{max-width:570px}

.feature-story-copy h2{
  max-width:12ch;
  margin:0;
  color:#100a20;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(38px,3.6vw,54px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.feature-story-lead{
  max-width:58ch;
  margin:22px 0 0;
  color:#61596f;
  font-size:16.5px;
  line-height:1.65;
}

.feature-story-image{aspect-ratio:4/3}

.feature-story-points{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  margin-top:34px;
}

.feature-story-points article{
  padding-top:18px;
  border-top:1px solid #ded8e8;
}

.feature-story-points h3{
  margin:0;
  color:#171120;
  font-size:17px;
  line-height:1.3;
}

.feature-story-points p{
  margin:9px 0 0;
  color:#6b6377;
  font-size:14px;
  line-height:1.58;
}

.feature-story-points .chapter-link{margin-top:16px}

.feature-story-points-stacked{
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  margin-top:30px;
}

.feature-story-points-stacked article{
  display:grid;
  grid-template-columns:minmax(130px,.42fr) minmax(0,1fr);
  align-items:start;
  gap:18px;
  padding-top:14px;
}

.feature-story-points-stacked p{margin:0}
.feature-story-links{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:28px}

.feature-check-list{
  display:grid;
  gap:12px;
  margin:30px 0 26px;
  padding:0;
  list-style:none;
}

.feature-check-list li{
  position:relative;
  padding-left:28px;
  color:#332a40;
  font-size:14.5px;
  line-height:1.5;
}

.feature-check-list li::before{
  content:"";
  position:absolute;
  top:4px;left:0;
  width:16px;height:16px;
  border-radius:50%;
  background:#e8ddfb;
}

.feature-check-list li::after{
  content:"";
  position:absolute;
  top:8px;left:5px;
  width:5px;height:3px;
  transform:rotate(-45deg);
  border-left:2px solid #6d28d9;
  border-bottom:2px solid #6d28d9;
}

#oversight .tcard-grid-4{
  gap:0;
  margin-top:52px;
  border-top:1px solid #e5dfec;
}

#oversight .fcard{
  min-height:0;
  padding:28px 24px 30px 0;
  border:0;
  border-bottom:1px solid #e5dfec;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#oversight .fcard:hover{transform:none;box-shadow:none}

html[data-theme="dark"] .features-hero-image,
html[data-theme="dark"] .feature-story-image{border-color:var(--border);background:var(--card)}
html[data-theme="dark"] .feature-story-copy h2,
html[data-theme="dark"] .feature-story-points h3,
html[data-theme="dark"] .feature-check-list li{color:var(--foreground)}
html[data-theme="dark"] .feature-story-lead,
html[data-theme="dark"] .feature-story-points p{color:var(--muted-foreground)}
html[data-theme="dark"] .feature-story-points article,
html[data-theme="dark"] #oversight .tcard-grid-4,
html[data-theme="dark"] #oversight .fcard{border-color:var(--border)}

@media (max-width:1040px){
  .features-page-open .page-open-grid,
  .feature-story,
  .feature-story-reverse{grid-template-columns:minmax(0,1fr);gap:42px}
  .features-hero-image{justify-self:center;width:min(100%,560px)}
  .feature-story-copy{max-width:700px}
  .feature-story-image{width:min(100%,760px)}
  .feature-story-reverse .feature-story-image{order:2}
}

@media (max-width:700px){
  .features-page-open{padding:108px 0 58px}
  .features-page-open .page-open-cta{justify-content:flex-start}
  .features-hero-image{width:100%}
  .feature-story{gap:32px}
  .feature-story-copy h2{font-size:clamp(34px,10vw,44px)}
  .feature-story-points{grid-template-columns:minmax(0,1fr);gap:22px}
  .feature-story-points-stacked article{grid-template-columns:minmax(0,1fr);gap:7px}
  #oversight .tcard-grid-4{grid-template-columns:minmax(0,1fr)}
  #oversight .fcard{padding-right:0}
}


/* features hero art is a transparent cutout, so it floats on the band
   rather than sitting in the tinted plate the story photos need */
.features-hero-image{
  overflow:visible;
  border:0;
  border-radius:0;
  background:none;
}

html[data-theme="dark"] .features-hero-image{border:0;background:none}


/* ── FAQ accordion on the page-v2 chapter layer ─────────────────────────
   The accordion predates the chapter system: home.css centres it
   (max-width:760px;margin:0 auto) and hard-codes near-black summary text
   and slate body text. Under a left-aligned .chapter-head that reads as a
   stray centred block, and in dark mode #18181b sits on a dark --card and
   is effectively invisible. Both fixes are scoped to .page-v2, and /faq/
   is the only page that uses .faq-accordion at all. */
.page-v2 .faq-accordion{margin:0}
.page-v2 .faq-accordion summary{color:var(--foreground)}
.page-v2 .faq-accordion details>div{color:var(--muted-foreground)}
.page-v2 .faq-accordion details>div a{color:var(--brand)}

/* the tinted chapter already carries a lavender wash, so the open-state
   ring is toned down there to stop it doubling up */
.page-v2 .chapter-tint .faq-accordion details[open]{
  border-color:color-mix(in oklab,var(--brand) 22%,var(--border));
}

/* ================================================================
   FEATURES V3 — Tidio-inspired storytelling translated into the
   established ADS Helpdesk chapter system. Artwork slots remain
   intentionally explicit until final product images are supplied.
   ================================================================ */
.features-page-open-v3{
  min-height:0;
  padding:156px 0 94px;
}

.features-page-open-v3 .page-open-copy{max-width:850px}
.page-v2 .features-page-open-v3 h1{font-size:clamp(43px,5.2vw,74px)}
.features-page-open-v3 .page-open-sub{max-width:62ch;font-size:18px}
.features-page-open-v3 .page-proof{
  grid-template-columns:repeat(3,minmax(0,auto));
  justify-content:center;
}

.features-section-head{
  max-width:880px;
  margin:0 auto 56px;
  text-align:center;
}

.features-section-head h2{
  margin:0;
  color:#100a20;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(36px,4vw,56px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.features-section-head p{
  max-width:67ch;
  margin:20px auto 0;
  color:#625970;
  font-size:17px;
  line-height:1.62;
}

.features-suite-grid,
.features-step-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,2.5vw,36px);
}

.features-suite-card,
.features-step-card{
  min-width:0;
}

.features-suite-card h3,
.features-step-card h3{
  margin:28px 0 0;
  color:#171120;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:20px;
  font-weight:750;
  line-height:1.3;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.features-suite-card p,
.features-step-card p{
  margin:14px 0 0;
  color:#625a6e;
  font-size:15px;
  line-height:1.62;
}

.features-suite-card .chapter-link,
.features-step-card .chapter-link{margin-top:22px}

.feature-art-placeholder{
  position:relative;
  isolation:isolate;
  display:flex;
  min-height:310px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:36px;
  border:1px solid #d9d7ee;
  border-radius:16px;
  background:#e8eafa;
  color:#30245c;
  text-align:center;
}

.feature-art-placeholder::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:24px;
  border:1px dashed rgba(82,61,151,.28);
  border-radius:10px;
}

.feature-art-placeholder::after{
  content:"";
  position:absolute;
  z-index:-2;
  top:-90px;
  right:-80px;
  width:250px;
  height:250px;
  border-radius:50%;
  background:rgba(130,98,220,.13);
}

.feature-art-id{
  display:inline-flex;
  padding:6px 10px;
  border:1px solid rgba(75,48,157,.24);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  color:#6338c5;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}

.feature-art-name{
  margin-top:14px;
  color:#21163e;
  font-size:17px;
  font-weight:750;
  line-height:1.3;
}

.feature-art-note{
  margin-top:7px;
  color:#716886;
  font-size:12.5px;
  line-height:1.4;
}

.features-step-grid{
  margin:0;
  padding:0;
  list-style:none;
}

.features-step-card h3 span{color:#7240d8}
.feature-art-placeholder-square{min-height:0;aspect-ratio:1/1}

.features-proof{padding:112px 0}
.features-proof-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(480px,1.02fr) minmax(0,.98fr);
  align-items:center;
  gap:clamp(58px,7vw,112px);
}

.features-proof-stage{
  min-width:0;
  min-height:610px;
}

.features-proof-panel{
  min-height:610px;
  padding:34px;
  border:1px solid rgba(167,139,250,.16);
  border-radius:16px;
  background:#170f31;
  box-shadow:0 28px 70px rgba(4,1,13,.3);
  animation:feature-panel-enter .38s cubic-bezier(.22,.61,.36,1) both;
}

.features-proof-panel[hidden]{display:none}

@keyframes feature-panel-enter{
  from{opacity:.45;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}


.feature-art-placeholder-proof{
  min-height:260px;
  margin-top:32px;
  border-color:rgba(126,231,173,.34);
  background:#202d55;
  color:#fff;
}

.feature-art-placeholder-proof::before{border-color:rgba(255,255,255,.24)}
.feature-art-placeholder-proof::after{background:rgba(92,217,255,.12)}
.feature-art-placeholder-proof .feature-art-id{
  border-color:rgba(126,231,173,.34);
  background:rgba(255,255,255,.09);
  color:#8cf0b7;
}
.feature-art-placeholder-proof .feature-art-name{color:#fff}
.feature-art-placeholder-proof .feature-art-note{color:#c5c1d8}

.features-proof-copy h2{
  max-width:12ch;
  margin:0;
  color:#fff;
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  font-size:clamp(39px,4vw,58px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.features-proof-copy>p{
  max-width:56ch;
  margin:22px 0 0;
  color:#c6bce3;
  font-size:16.5px;
  line-height:1.64;
}

.features-proof-tabs{
  display:grid;
  justify-items:start;
  gap:8px;
  margin-top:32px;
}

.features-proof-tabs button{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:11px 16px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#fff;
  font:inherit;
  font-size:15px;
  font-weight:650;
  line-height:1.35;
  text-align:left;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}

.features-proof-tabs button:hover{background:rgba(255,255,255,.08)}
.features-proof-tabs button[aria-selected="true"]{
  background:#fff;
  color:#160e2c;
  box-shadow:0 10px 28px rgba(4,1,13,.2);
}
.features-proof-tabs button:focus-visible{
  outline:3px solid rgba(167,139,250,.55);
  outline-offset:3px;
}

.features-proof-tabs svg{
  flex:0 0 auto;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

html[data-theme="dark"] .features-section-head h2,
html[data-theme="dark"] .features-suite-card h3,
html[data-theme="dark"] .features-step-card h3{color:var(--foreground)}

html[data-theme="dark"] .features-section-head p,
html[data-theme="dark"] .features-suite-card p,
html[data-theme="dark"] .features-step-card p{color:var(--muted-foreground)}

html[data-theme="dark"] .feature-art-placeholder:not(.feature-art-placeholder-proof){
  border-color:var(--border);
  background:#211b32;
}

html[data-theme="dark"] .feature-art-placeholder:not(.feature-art-placeholder-proof)::before{border-color:#49405e}
html[data-theme="dark"] .feature-art-placeholder:not(.feature-art-placeholder-proof) .feature-art-id{background:#2d2440;color:#c4b5fd}
html[data-theme="dark"] .feature-art-placeholder:not(.feature-art-placeholder-proof) .feature-art-name{color:var(--foreground)}
html[data-theme="dark"] .feature-art-placeholder:not(.feature-art-placeholder-proof) .feature-art-note{color:var(--muted-foreground)}

@media (max-width:1040px){
  .features-suite-grid,
  .features-step-grid{gap:24px}
  .feature-art-placeholder{min-height:270px;padding:28px}
  .feature-art-placeholder-square{min-height:0}
  .features-proof-grid{grid-template-columns:minmax(420px,1fr) minmax(0,.92fr);gap:48px}
}

@media (max-width:880px){
  .features-suite-grid,
  .features-step-grid{grid-template-columns:minmax(0,1fr);gap:52px}
  .features-suite-card,
  .features-step-card{max-width:680px;margin:0 auto}
  .feature-art-placeholder{min-height:360px}
  .feature-art-placeholder-square{min-height:0;aspect-ratio:4/3}
  .features-proof-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .features-proof-copy{order:1}
  .features-proof-stage{order:2;min-height:0}
  .features-proof-panel{min-height:0}
  .features-proof-copy h2{max-width:15ch}
}

@media (max-width:700px){
  .features-page-open-v3{padding:118px 0 66px}
  .page-v2 .features-page-open-v3 h1{font-size:clamp(35px,10vw,46px)}
  .features-page-open-v3 .page-open-sub{font-size:16.5px}
  .features-page-open-v3 .page-proof{grid-template-columns:minmax(0,1fr);justify-content:start;text-align:left}
  .features-page-open-v3 .page-open-grid.is-solo .page-proof{justify-content:start}
  .features-section-head{margin-bottom:40px;text-align:left}
  .features-section-head h2{font-size:clamp(33px,9.5vw,44px)}
  .features-section-head p{margin-left:0;font-size:16px}
  .features-suite-grid,
  .features-step-grid{gap:44px}
  .feature-art-placeholder{min-height:270px;padding:24px}
  .feature-art-placeholder::before{inset:16px}
  .feature-art-placeholder-square{min-height:0;aspect-ratio:1/1}
  .features-suite-card h3,
  .features-step-card h3{margin-top:22px;font-size:19px}
  .features-proof{padding:78px 0}
  .features-proof-grid{gap:36px}
  .features-proof-copy h2{font-size:clamp(35px,10vw,45px)}
  .features-proof-tabs{justify-items:stretch}
  .features-proof-tabs button{width:100%}
  .features-proof-panel{padding:24px}
  .feature-art-placeholder-proof{min-height:230px}
}

@media (prefers-reduced-motion:reduce){
  .features-proof-panel{animation:none}
  .features-proof-tabs button{transition:none}
}


/* ── real artwork in the three platform cards ───────────────────────────
   Takes over the geometry .feature-art-placeholder held, so swapping a
   placeholder for a supplied image does not move the card. All three
   sources are normalised to 4:3 before they ship, so the row keeps a
   single art height and the headings below stay on one baseline. */
.feature-art{
  margin:0;
  overflow:hidden;
  border:1px solid #d9d7ee;
  border-radius:16px;
  background:#e8eafa;
}

.feature-art img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
}

/* the art carries its own light ground, so in dark mode only the frame
   moves; inverting the image itself would misrepresent the product */
html[data-theme="dark"] .feature-art{
  border-color:var(--border);
  background:#211b32;
}