/* React Bits tilt motion with the original dark blue benefit-card palette. */
.journal-story{padding:64px 0 40px}
.journal-story + #features{padding-top:40px}
.journal-story-wrap{width:min(1600px,calc(100% - 2 * var(--landing-gutter)))}
.journal-story-stage{width:100%;max-width:1120px;margin-inline:auto;isolation:isolate}
.journal-story-composition{--story-calendar-mid:.804;--story-window-ratio:.28;--story-extent:calc(var(--story-calendar-mid) + var(--story-window-ratio));position:relative;width:100%}
.journal-story-preview{width:calc(100% / var(--story-extent));min-width:0}
.journal-story .hero-stage{margin-top:0;perspective:none}
.journal-story .hero-stage .frame-hero{width:100%;max-width:none;margin:0;animation:none;opacity:1;transform:none}
.journal-story .hero-promise{width:100%;max-width:500px;margin:18px auto 0;text-align:center;font-size:clamp(.8rem,1vw,.95rem);line-height:1.6}
.journal-story .hero-promise::before{width:80px;margin:0 auto 16px;background:linear-gradient(90deg,transparent,#659ce1 50%,transparent)}
.journal-story .hero-promise h2{margin-bottom:8px;font-size:clamp(1.1rem,1.5vw,1.45rem);text-wrap:pretty}
.journal-story-copy{position:absolute;z-index:2;top:50%;left:calc(100% / var(--story-extent) * var(--story-calendar-mid));width:calc(100% / var(--story-extent) * var(--story-window-ratio));aspect-ratio:300 / 390;transform:translateY(-50%);overflow:clip;border-radius:calc(22px * var(--story-window-scale,1))}
.journal-story-heading{position:relative;z-index:1;margin:0;text-align:left}
.journal-story-heading h2{margin:0;color:#fff;font-size:2rem;font-weight:485;line-height:1.14;letter-spacing:-.04em}
.journal-story-title-line{display:block}
.journal-story-title-text{display:inline-block}
.journal-story-title-text.blue-title{background:none;color:inherit;-webkit-text-fill-color:currentColor;filter:none}
.journal-story-wordmark{display:inline-block;width:auto;height:.73em;height:1cap;max-width:none;margin-right:.06em;vertical-align:baseline}
.journal-story-carousel{--story-radius:12px;position:relative;padding:10px;min-width:0;border-radius:calc(var(--story-radius) + 10px);background:linear-gradient(90deg,rgba(17,23,38,.8),rgba(5,6,11,.93));box-shadow:0 22px 44px -20px rgba(0,0,0,.8),0 6px 16px -8px rgba(0,0,0,.5);overflow:hidden;outline:none;-webkit-tap-highlight-color:transparent;-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
.journal-story-carousel:focus-visible{outline:2px solid #c9e1ff;outline-offset:-2px}
.journal-story-benefits{min-width:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#263b60 transparent;overscroll-behavior-x:contain;border-radius:var(--story-radius)}
.journal-story-list{display:flex;gap:16px;list-style:none}
.journal-story-card{position:relative;display:flex;flex-direction:column;flex:0 0 100%;width:100%;min-width:0;min-height:330px;padding:24px;overflow:hidden;border-radius:var(--story-radius);background:#0a0d14;color:#edf3ff;box-shadow:0 4px 10px -4px rgba(0,0,0,.7);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.journal-story-card:not(.journal-story-intro){display:grid;grid-template-columns:36px minmax(0,1fr);align-content:start;gap:22px 12px;background:radial-gradient(ellipse 85% 65% at 100% 0%,rgba(59,130,246,.1) 0%,rgba(59,130,246,.03) 40%,transparent 75%),#0a0d14}
.journal-story-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(122,148,190,.1),inset 0 1px 0 rgba(255,255,255,.025);pointer-events:none}
.journal-story-card-icon{display:grid;place-items:center;align-self:center;flex:none;width:36px;height:36px;border-radius:50%;background:#141e31;color:#7aafff}
.journal-story-card-icon svg{width:19px;height:19px}
.journal-story-card h3{align-self:center;max-inline-size:15ch;margin:0;color:#edf3ff;font-size:1.125rem;font-weight:500;line-height:1.3;letter-spacing:-.025em;white-space:normal;text-wrap:balance}
.journal-story-points{grid-column:1 / -1;display:grid;gap:12px;list-style:none;color:#aebbd0;font-size:.875rem;line-height:1.5}
.journal-story-points li{display:flex;align-items:baseline;gap:10px}
.journal-story-points li::before{content:"";flex:none;width:10px;height:6px;border-left:1.5px solid #5b9bff;border-bottom:1.5px solid #5b9bff;transform:translateY(-2px) rotate(-45deg)}
.journal-story-intro{justify-content:flex-end;isolation:isolate;background:radial-gradient(ellipse 110% 100% at 100% 0%,rgba(37,99,235,.22) 0%,rgba(29,78,216,.09) 50%,transparent 85%),linear-gradient(160deg,#0c0f17 0%,#090b11 55%,#080a10 100%)}
.journal-story-intro::before{content:"";position:absolute;inset:-15% -40% 0 5%;z-index:0;background:url(../images/zenvojournal-star.svg) center/100% auto no-repeat;filter:brightness(0) invert(1);opacity:.045;transform:rotate(-12deg);pointer-events:none}
.journal-story-controls{display:flex;align-items:center;justify-content:center;margin-top:8px}
.journal-story-controls[hidden]{display:none}
.journal-story-dots{display:flex;align-items:center;justify-content:center;flex:1}
.journal-story-dot{display:grid;place-items:center;width:26px;height:32px;border-radius:50%}
.journal-story-dot span{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.35;transition:opacity .2s ease,transform .2s ease}
.journal-story-dot[aria-current="true"] span{opacity:1;transform:scale(1.2)}
.journal-story-caption{margin:18px 0 0;text-align:left;color:#d0e1fb;font-size:.85rem;line-height:1.65}

.journal-story[data-motion="carousel"] .journal-story-benefits{overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.journal-story[data-motion="carousel"] .journal-story-copy{top:var(--story-window-top,50%);transform:none}
.journal-story[data-motion="carousel"] .journal-story-carousel{width:300px;transform:scale(var(--story-window-scale,1));transform-origin:top left}
.journal-story[data-motion="carousel"] .journal-story-benefits[data-dragging="true"]{cursor:grabbing}
.journal-story[data-motion="carousel"] .journal-story-list{position:relative;display:block;height:100%;perspective:1000px}
.journal-story[data-motion="carousel"] .journal-story-card{position:absolute;top:0;left:0;will-change:transform;transform-origin:50% 50%}
.journal-story[data-motion="carousel"] .journal-story-card:not([data-current]){pointer-events:none}

@media(hover:hover){
  .journal-story-dot:not([aria-current]):hover span{opacity:.65}
}

@media(max-width:1000px){
  .journal-story{padding:40px 0 32px}
  .journal-story + #features{padding-top:32px}
}

@media(max-width:600px){
  .journal-story{padding:28px 0 24px}
  .journal-story + #features{padding-top:24px}
  .journal-story .hero-promise h2{font-size:1.05rem}
}

/* Without scripting, keep all five cards readable in a native scrolling row. */
.journal-story:not([data-motion]) .journal-story-preview{width:100%}
.journal-story:not([data-motion]) .journal-story-copy{position:relative;top:auto;left:auto;width:min(300px,100%);margin:28px auto 0;aspect-ratio:auto;transform:none}

@media(prefers-reduced-motion:reduce){
  .journal-story[data-motion="carousel"] .journal-story-card{will-change:auto}
}

@media(forced-colors:active){
  .journal-story-carousel,.journal-story-card{border:1px solid CanvasText}
  .journal-story-title-text.blue-title{color:CanvasText;-webkit-text-fill-color:CanvasText}
  .journal-story-dot[aria-current="true"] span{background:Highlight}
}

@media print{
  .journal-story-stage{display:block}
  .journal-story-preview{width:100%}
  .journal-story-copy{position:relative;top:auto;left:auto;width:auto;height:auto!important;max-width:none;transform:none}
  .journal-story[data-motion="carousel"] .journal-story-copy{top:auto}
  .journal-story[data-motion="carousel"] .journal-story-carousel{width:auto;transform:none}
  .journal-story-controls{display:none}
  .journal-story .journal-story-benefits{height:auto!important;overflow:visible}
  .journal-story .journal-story-list{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .journal-story .journal-story-card{position:relative;height:auto!important;transform:none!important;visibility:visible!important;break-inside:avoid}
}