/* The globe unfolds into a floating browser window, without hardware. */
.journey-visual{--device-presence:0;--device-green:1}
.computer-stage{
 position:absolute;left:var(--surface-x,71%);top:var(--surface-top,49%);
 width:var(--surface-w,110px);height:var(--surface-h,120px);z-index:2;
 transform:translate(-50%,-50%);opacity:var(--device-opacity,1);pointer-events:none;
 will-change:transform,opacity;
}
.device-camera{position:absolute;inset:0;transform:translateY(var(--device-lift,0px)) rotate(var(--device-rz,0deg)) scale(var(--device-scale,1));will-change:transform}
.computer-float{position:absolute;inset:0;animation:window-hover 8s ease-in-out infinite;animation-delay:-1.5s}
.computer-float:before,.computer-float:after{content:none}
.journey-visual .computer-stage .computer-float>.journey-surface{
 left:0;top:0;width:100%;height:100%;transform:none;opacity:1;isolation:isolate;will-change:auto;
 border:1px solid var(--surface-border,#ccd8d1);border-radius:var(--surface-radius,18px);outline:0;
 background:var(--surface-bg,#fff);box-shadow:0 30px 65px -28px #283e3540,0 8px 20px -12px #263c3433,inset 0 1px 0 #fff;
}
.computer-stage .journey-surface:before,.computer-stage .journey-surface:after{content:none}
/* A restrained tab strip keeps the illustration recognizable as a window. */
.journey-visual .computer-stage :is(.scene-confused,.scene-product,.scene-feature) .scene-top{
 height:calc(48px * var(--scene-scale,1));padding:0 calc(20px * var(--scene-scale,1));
 display:grid;grid-template-columns:calc(48px * var(--scene-scale,1)) minmax(0,1fr) auto;
 gap:calc(14px * var(--scene-scale,1));align-items:center;
 background:#f1f4f2;border-bottom:1px solid #dce4de;color:#6e7f76;
 font-size:calc(10px * var(--scene-scale,1));letter-spacing:.03em;
}
.journey-visual .computer-stage :is(.scene-confused,.scene-product,.scene-feature) .scene-top:before{
 content:'';width:calc(6px * var(--scene-scale,1));height:calc(6px * var(--scene-scale,1));
 background:#a9b6af;border-radius:50%;box-shadow:calc(12px * var(--scene-scale,1)) 0 #b9c4bd,calc(24px * var(--scene-scale,1)) 0 #cbd3ce;
}
.journey-visual .computer-stage :is(.scene-confused,.scene-product,.scene-feature) .scene-top>span:first-child{
 display:flex;align-items:center;gap:calc(8px * var(--scene-scale,1));justify-self:start;align-self:end;
 max-width:100%;height:calc(36px * var(--scene-scale,1));padding:0 calc(20px * var(--scene-scale,1));
 border:1px solid #dce4de;border-bottom:0;border-radius:calc(8px * var(--scene-scale,1)) calc(8px * var(--scene-scale,1)) 0 0;
 background:#fff;transform:translateY(1px);color:#43574b;white-space:nowrap;
}
.journey-visual .computer-stage .scene-brand{font-size:calc(12px * var(--scene-scale,1))}
.journey-visual .computer-stage .scene-brand b{font-size:calc(18px * var(--scene-scale,1))}
.journey-visual .computer-stage .scene-top>span:last-child{font-size:calc(9px * var(--scene-scale,1));white-space:nowrap}
.computer-stage .dashboard-content{height:calc(100% - 48px * var(--scene-scale,1));background:radial-gradient(ellipse at 80% 90%,#93d3ab28,transparent 70%),#fffefd}
.computer-stage .dashboard-item{box-shadow:0 8px 18px -15px #3f865a40,inset 0 1px 1px #fff;border-color:#d1e3d6}
.computer-stage .dashboard-heading strong{color:#2f5c41}.computer-stage .dashboard-item>strong{color:#267048}
.marketing-page .nav-cta{transition:background .65s ease,border-color .65s ease,box-shadow .65s ease}
.marketing-page.product-view .nav-cta{background:#247e52;border-color:#247e52;color:#fff;box-shadow:0 6px 18px #247e5212}
@keyframes window-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-6px * var(--device-hover,var(--device-presence))))}}
.motion-paused .computer-float,.motion-suspended .computer-float{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.computer-float{animation:none!important}.computer-stage,.device-camera{will-change:auto}.marketing-page .nav-cta{transition:none}}

/* Introduce the product in green; the following news chapter carries the risk. */
.journey{background:linear-gradient(180deg,#fff 0%,#f7fcf9 12%,#fffaf6 23%,#fffbf9 30%,#fffdfb 42%,#fcfefc 60%,#fcfefc 79%,#fafffc 95%,#fff 100%)}
.journey-visual:not([data-chapter]):after,.journey-visual[data-chapter="0"]:after{background:radial-gradient(ellipse at 71% 49%,#6cc29926,transparent 62%)}
.marketing-page .site-header .brand-mark,.marketing-page .site-footer .brand-mark{background:#24845a;color:#fff}
.chapter-hero .hero-copy .hero-kicker{color:#38825c}
.chapter-hero .hero-copy .primary{background:#24845a;border-color:#24845a;color:#fff;box-shadow:0 7px 20px #24845a20}
.chapter-hero .hero-copy .primary:hover{background:#196b45;border-color:#196b45}
.journey-visual .orbit-label{border-color:#d0e0d5;box-shadow:0 10px 30px #4b8b6021;color:#465b4c}
.journey-visual .orbit-label svg{color:#509e70}
.computer-stage .scene-logo span{color:color-mix(in srgb,#df6a26 calc((1 - var(--device-green)) * 100%),#24845a)}
.journey-visual[data-chapter="1"]:after{background:radial-gradient(ellipse at 50% 55%,#ea9b5820,transparent 62%)}

/* Keep the product explanation in the text flow, above the device illustration. */
.chapter-product .chapter-copy .computer-explainer{position:relative;inset:auto;transform:none;margin:18px auto 0;width:fit-content;max-width:780px;gap:10px;text-align:left}
.chapter-product .chapter-copy .computer-explainer strong{font-size:12px;line-height:1.6}
.chapter-product .chapter-copy .computer-explainer span{font-size:11px;line-height:1.6;margin-top:2px}
.chapter-product .chapter-copy .computer-explainer svg{width:27px;height:27px}
.defender-source{display:block;width:fit-content;font-size:10px;line-height:1.6;margin-top:4px;color:#7b9484;text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){
 .chapter-product .chapter-copy .computer-explainer{max-width:450px;margin-top:14px;gap:9px}
 .chapter-product .chapter-copy .computer-explainer strong{font-size:10px}
 .chapter-product .chapter-copy .computer-explainer span{font-size:9px}
 .chapter-product .chapter-copy .computer-explainer svg{width:23px;height:23px}
}

.computer-stage .uncertain-desktop{height:calc(100% - 48px * var(--scene-scale));padding:calc(24px * var(--scene-scale)) calc(29px * var(--scene-scale));display:grid;grid-template-rows:auto repeat(3,1fr) auto;gap:calc(10px * var(--scene-scale));background:linear-gradient(140deg,#fbfcfb,#f0f4f1);isolation:isolate}
.computer-stage .desktop-top{padding:0 0 calc(6px * var(--scene-scale));justify-content:space-between;gap:12px;font-size:calc(21px * var(--scene-scale));font-weight:600;color:#283b34;line-height:1.4}
.computer-stage .desktop-top>i{width:calc(24px * var(--scene-scale));height:calc(24px * var(--scene-scale));font:600 calc(13px * var(--scene-scale))/1 Arial;border:1px solid #dbb28c;color:#a96833;background:#fff3e8}
.computer-stage .uncertain-panel{position:relative;inset:auto;width:100%;height:auto;min-height:0;display:grid;grid-template-columns:calc(27px * var(--scene-scale)) minmax(0,1fr) auto;align-items:center;gap:calc(13px * var(--scene-scale));padding:calc(10px * var(--scene-scale)) calc(16px * var(--scene-scale));border:1px solid #d9e2dd;border-radius:calc(7px * var(--scene-scale));background:#fff;box-shadow:0 3px 8px #1d453207;transform:none!important;animation:none!important}
.computer-stage .uncertain-panel svg{float:none;width:calc(23px * var(--scene-scale));height:calc(23px * var(--scene-scale));stroke:#648473;stroke-width:1.5;grid-column:1;grid-row:1}
.computer-stage .uncertain-panel>span{font-size:calc(12px * var(--scene-scale));color:#4d6258;margin:0;grid-column:2;grid-row:1;line-height:1.4}
.computer-stage .uncertain-panel>strong{font-size:calc(13px * var(--scene-scale));font-weight:600;color:#a36535;line-height:1.4;grid-column:3;grid-row:1;padding:calc(7px * var(--scene-scale)) calc(11px * var(--scene-scale));border-radius:calc(5px * var(--scene-scale));background:#fff4e9;white-space:nowrap}
.computer-stage .uncertain-panel>i,.computer-stage .search-cursor{display:none}
.computer-stage .uncertain-caption{position:static;inset:auto;max-width:none;margin:calc(5px * var(--scene-scale)) 0 0;color:#75857c;font-size:calc(10px * var(--scene-scale));line-height:1.6}
.computer-stage .story-playing .uncertain-panel>strong{animation:setting-highlight 4.2s ease-in-out both}
.computer-stage .story-playing .uncertain-b>strong{animation-delay:.8s}
.computer-stage .story-playing .uncertain-c>strong{animation-delay:1.6s}
@keyframes setting-highlight{0%,100%{background:#fff4e9;color:#a36535}35%,55%{background:#f3d1ad;color:#794319}}
html.story-dragging,html.story-dragging *{cursor:grabbing!important;user-select:none!important}
@media(max-width:900px){.computer-stage .uncertain-panel{gap:calc(10px * var(--scene-scale))}.computer-stage .uncertain-panel>strong{font-size:calc(12px * var(--scene-scale))}}
@media(prefers-reduced-motion:reduce){.computer-stage .story-playing .uncertain-panel>strong{animation:none}}
.motion-paused .computer-stage .story-playing .uncertain-panel>strong{animation-play-state:paused}