@font-face{font-family:Inter;src:url('assets/inter-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('assets/inter-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url('assets/inter-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
:root{--sc-font-display:Inter,Arial,sans-serif;--sc-font-text:Inter,Arial,sans-serif}
body,button{font-family:Inter,Arial,sans-serif}
h1{font-weight:400;letter-spacing:-.045em}
h2{font-weight:500;letter-spacing:-.04em}
h3{letter-spacing:-.03em}
.netz-icon{display:block;width:20px;height:20px;flex:0 0 auto;vertical-align:middle}
[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;line-height:1}
.button{gap:14px;padding-inline:24px}
.button .netz-icon{width:17px;height:17px;stroke-width:1.75}
.nav-cta{gap:10px}
.nav-cta .netz-icon{width:15px;height:15px}
.text-link{gap:9px}
.text-link .netz-icon{width:16px;height:16px}
.play-icon .netz-icon{width:16px;height:16px}
.play-icon{height:32px;width:32px;border:1px solid #496b8d55;border-radius:50%;padding-left:2px}
.hero-actions .text-link{gap:9px}
.inline-agent{gap:9px}
.inline-agent .netz-icon{width:16px;height:16px}
.feature-tabs button span{font-size:inherit}
.feature-tabs .netz-icon{width:19px;height:19px}
.expand-shot{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#fffffff0;color:#2957a1!important;border:1px solid #d2e0f1;box-shadow:0 3px 12px #264b7520}
.expand-shot:hover{background:#e9f2ff}
.expand-shot .netz-icon{width:17px;height:17px}
.agent-float>a{display:grid;place-items:center;width:28px;height:28px;margin-left:8px}
.agent-float>a .netz-icon{width:18px;height:18px}
.small-icon{display:inline-flex;width:34px;height:34px;margin-bottom:16px}
.small-icon .netz-icon{width:26px;height:26px}
.micro-flow .netz-icon,.signal-pills .netz-icon{width:12px;height:12px}
.signal-pills span{display:inline-flex;align-items:center;gap:4px}
.signal-pills [data-icon]{padding:0;background:none}
summary>span .netz-icon{width:17px;height:17px}
.close-dialog{display:grid;place-items:center;border-radius:10px}
.close-dialog .netz-icon{width:20px;height:20px}
#full-resolution{display:inline-flex;align-items:center;gap:8px}
#full-resolution .netz-icon{width:14px;height:14px}
.menu-toggle span{width:auto;height:auto;background:none}
.menu-toggle .netz-icon{width:21px;height:21px}
.step-indicator .netz-icon{width:13px;height:13px;stroke-width:2}
.analysis-metrics strong{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.analysis-metrics strong .netz-icon{width:19px;height:19px;color:#59799f;stroke-width:1.5}
.draft-cta{display:inline-flex!important;align-items:center;gap:8px}
.draft-cta .netz-icon{width:11px;height:11px}
.funnel-connect>.flow-connector{background:none;border:0;padding:0}
.funnel-connect .netz-icon{width:12px;height:12px}
.agent-cursor:before{display:none}
.agent-cursor .cursor-pointer{position:absolute;left:-13px;top:-17px;color:#285bdf;filter:drop-shadow(1px 1px 0 #fff)}
.agent-cursor .cursor-pointer svg{width:24px;height:24px;fill:#285bdf;stroke:white;stroke-width:1.3}

/* A true layered scene. Both foreground halves preserve the same source frame. */
.hero{overflow:clip}
.hero-depth{position:absolute;inset:0;z-index:1;overflow:clip;pointer-events:none}
.hero-plane{position:absolute;left:0;width:100%;height:1000px;object-fit:cover;object-position:center;max-width:none;will-change:transform}
.hero-far{top:-250px;height:1220px;transform:translate3d(0,var(--far-y,0px),0)}
.hero-near{top:-100px}
.hero-near-left{clip-path:inset(0 50% 0 0);transform:translate3d(var(--near-left-x,0px),var(--near-y,0px),0)}
.hero-near-right{clip-path:inset(0 0 0 50%);transform:translate3d(var(--near-right-x,0px),var(--near-y,0px),0)}
.hero-depth:after{content:'';position:absolute;inset:740px 0 0;background:linear-gradient(transparent,#edf8ff 52%,#fbfdff 88%)}
.hero-copy{z-index:7}
.product-stage{z-index:6;will-change:transform;transform:translate3d(0,var(--screen-y,0px),0);perspective:1600px}
.product-window{transform:rotateX(var(--screen-tilt,3deg)) rotateY(var(--screen-turn,0deg)) scale(var(--screen-scale,.975));transform-origin:50% 30%;will-change:transform;box-shadow:0 35px 75px #2b587c26,0 2px 7px #ffffff80}
.agent-float{transform:translate3d(0,var(--float-y,0px),0)}
.hero:after{z-index:5;height:350px}
.screen-caption{margin-top:22px}

/* Reference: 640px centered measure, Inter 400, 28/37.8 and -0.03em. */
.intro.wrap{display:block;width:min(640px,calc(100% - 48px));max-width:640px;gap:0;padding:130px 0 145px;margin-inline:auto}
.intro-label{display:inline-flex;padding:5px 13px;border:1px solid #dbe7f4;background:#f1f7ff;border-radius:30px;margin-bottom:34px}
.intro-text{gap:44px}
.intro-text p{font-family:Inter,Arial,sans-serif;font-size:28px;line-height:1.35;font-weight:400;letter-spacing:-.03em;color:#8393a5;transition:none;transform:translate3d(0,var(--intro-rise,0px),0)}
.intro-text p strong{font-weight:400;color:inherit}
.intro-text p.is-reading{color:inherit}
.intro-text p{color:color-mix(in srgb,#193b5e calc(var(--read-focus,0)*100%),#8393a5)}
.intro-text p:focus-within{color:#193b5e}

/* Every card has one frame. No rotations or focus-dependent layer overrides. */
.all-features{padding-top:110px}
.all-features>.center-head{margin-bottom:45px}
.cards-nav{display:none}
.story-card{position:relative;top:auto;z-index:auto;min-height:460px;border-radius:24px;margin-bottom:24px;padding:40px;gap:38px;grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr);box-shadow:0 14px 38px #2d547813}
.story-card:nth-child(2n){background:#f1f7fe}
.story-card:nth-child(3n){background:#ebf4ff}
.story-copy h3{font-family:Inter,Arial,sans-serif;font-size:32px;font-weight:400;line-height:1.3;letter-spacing:-.035em;margin:17px 0 19px}
.story-copy p{font-size:14px;line-height:1.7;max-width:340px}
.card-label{font-size:10px;line-height:1.5;letter-spacing:.06em}
.story-copy .text-link{font-size:12px}
.story-card:nth-child(even) .story-media,.story-card:hover .story-media{transform:none!important}
.story-media{transform:none!important;display:flex;flex-direction:column;height:380px;overflow:hidden;border:1px solid #d9e5f2;box-shadow:0 8px 22px #335b8215;border-radius:14px;background:#f7faff}
.story-shot{flex:1;min-height:0;overflow:hidden;display:block}
.story-shot>img{width:100%;height:100%;object-fit:cover;object-position:center}
.story-shot:after{display:none!important;content:none!important}
.shot-control{position:absolute;right:12px;bottom:12px;width:33px;height:33px;display:grid;place-items:center;border-radius:9px;background:#ffffffed;color:#2a5aa3;border:1px solid #d7e4f3;box-shadow:0 3px 12px #2d517016}
.shot-control .netz-icon{width:16px;height:16px}
.story-shot:hover .shot-control{background:#e7f1ff}
.story-media figcaption{font-size:9px;line-height:1.6;padding:10px 13px;flex:0 0 auto;color:#55738e;border-top:1px solid #dce7f4}
.feature-points span{font-size:10px}
.funnel-story .story-media{background:#eef5ff}
.funnel-story .story-shot>img{object-fit:contain}
.funnel-views{display:flex;gap:4px;align-items:center;padding:8px;background:#f7fbff;border-top:1px solid #dce7f4;flex:0 0 auto}
.funnel-views button{min-height:30px;flex:1;border-radius:6px;padding:6px 8px;background:transparent;color:#547190;font-size:10px;white-space:nowrap}
.funnel-views button[aria-pressed=true]{background:#dfecff;color:#224f9d}
.funnel-views button:hover{background:#e7f1ff}
.funnel-story[data-funnel-view=full] .story-shot>img{object-fit:contain}
.funnel-story .shot-control{bottom:10px}

/* Measured sticky stage: only two surfaces participate in each handoff. */
.feature-stack.is-stacked{position:relative;padding:0;margin:0;height:var(--stack-span)}
.is-stacked .cards-stage{position:sticky;top:0;height:100svh;overflow:clip;isolation:isolate}
.is-stacked .cards-nav{position:absolute;top:calc(var(--card-top) - 67px);left:0;right:0;display:flex;justify-content:center;align-items:center;gap:4px;z-index:30;height:43px}
.cards-nav button{display:flex;align-items:center;gap:8px;background:transparent;color:#57728e;border-radius:9px;padding:10px 14px;font-size:11px;line-height:1.4;white-space:nowrap}
.cards-nav .netz-icon{width:16px;height:16px;stroke-width:1.6}
.cards-nav button[aria-selected=true]{background:#e0edff;color:#2254ae}
.cards-nav button:hover{background:#edf5ff}
.is-stacked .cards-deck{position:absolute;top:var(--card-top);left:0;right:0;height:var(--card-height)}
.is-stacked .story-card{position:absolute;inset:0;min-height:0;height:100%;margin:0;z-index:var(--card-order);transform-origin:center top;will-change:transform;transform:translate3d(0,var(--card-y,0px),0) scale(var(--card-scale,1));opacity:var(--card-alpha,1);visibility:var(--card-visibility,visible)}
.is-stacked .story-card .story-media{height:var(--story-media-height);max-height:none;align-self:center}
.is-stacked .story-card[aria-hidden=true]{pointer-events:none}
.connected-tools{position:relative;z-index:1;background:#fbfdff}
@media(min-width:1500px){.hero-plane{height:1080px}.hero-far{height:1300px;top:-290px}.hero-depth:after{top:820px}}
@media(max-width:1050px){.cards-nav button{padding:10px;font-size:10px;gap:6px}.story-card{padding:30px;gap:28px}.story-copy h3{font-size:28px}.story-copy p{font-size:12px}}
@media(max-width:700px){
 .hero-plane{height:880px;object-position:43% center;width:130%;left:-15%}
 .hero-far{top:-160px;height:970px}
 .hero-near{top:-80px}
 .hero-depth:after{top:570px}
 .hero .product-stage{transform:translate3d(0,var(--screen-y,0px),0)}
 .product-window{transform:rotateX(var(--screen-tilt,2deg)) scale(var(--screen-scale,.985))}
 .button{gap:10px}
 .hero-actions .button{gap:9px}
 .hero-actions .text-link{gap:7px}
 .play-icon{width:26px;height:26px}
 .play-icon .netz-icon{width:12px;height:12px}
 .hero h1{letter-spacing:-.045em}
 .intro.wrap{width:calc(100% - 48px);padding:76px 0 85px}
 .intro-label{margin-bottom:29px;font-size:10px}
 .intro-text{gap:32px}
 .intro-text p{font-size:23px;line-height:1.45;letter-spacing:-.025em}
 .all-features{padding-top:70px}
 .story-card{display:flex;padding:27px 23px 22px;min-height:0;gap:25px;border-radius:19px}
 .story-copy h3{font-size:28px;line-height:1.3}
 .story-copy p{font-size:12px}
 .story-media{height:235px}
 .funnel-story .story-media{height:270px}
 .funnel-views{gap:2px;padding:5px}
 .funnel-views button{font-size:8px;padding:7px 4px;min-height:37px}
 .story-media figcaption{font-size:8px;padding:8px 10px}
 .shot-control{width:34px;height:34px}
 .analysis-metrics strong .netz-icon{width:15px;height:15px}
 .feature-tabs .netz-icon{width:17px;height:17px}
 #full-resolution{display:flex;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
 .hero-plane,.product-stage,.product-window,.agent-float,.intro-text p{transform:none!important}
 .intro-text p{color:#294c6d}
 .story-card{transform:none!important;opacity:1!important;visibility:visible!important}
}
.pricing-detail li:before{content:none}
.pricing-detail li{display:flex;align-items:flex-start;gap:10px}
.list-check{margin-top:2px;color:#3278c8}
.list-check .netz-icon{width:15px;height:15px;stroke-width:1.8}
/* Feather the photograph edges before their independently moving planes end. */
.hero-near{mask-image:linear-gradient(#000 0 68%,transparent 100%)}
.hero-far{mask-image:linear-gradient(#000 0 68%,transparent 100%)}

/* Focus must not change responsive padding or the card geometry. */
.story-card:focus-within{z-index:auto}
.is-stacked .story-card:focus-within{z-index:var(--card-order)}