/* ACR-687: product stories, September 10. */
.hp-overview-section{background:#eef5f9;overflow:hidden}
.hp-overview-grid{display:grid;gap:82px;margin:62px auto 0;max-width:1180px}
.hp-overview-card{min-width:0}
.hp-overview-head{position:relative;max-width:820px;margin:0 auto 30px;text-align:center}
.hp-overview-head h3{display:inline-block;margin:0 0 13px;color:#087fac;font:600 22px/1.2 var(--display);letter-spacing:-.025em}
.hp-overview-head .hp-product-promise{max-width:none;margin:0 0 15px;color:#0b2443;font:600 37px/1.15 var(--display);letter-spacing:-.04em;text-wrap:balance}
.hp-overview-head p:not(.hp-product-promise){max-width:680px;margin:0 auto;color:#526a80;font:400 16px/1.65 var(--body);text-wrap:pretty}
.hp-overview-link{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-top:14px;color:#087fac;font:600 14px/1.5 var(--body);text-decoration:none;border-bottom:1px solid #97c8db}
.hp-overview-link:hover{color:#063e5e;border-color:currentColor}.hp-overview-link:focus-visible{outline:3px solid #009cce;outline-offset:5px;border-radius:3px}
.hp-nx-scene{overflow:hidden;border:1px solid #cedde9;border-radius:24px;background:#fff;box-shadow:0 35px 70px -30px #183d6366,0 6px 15px #173b5710,0 0 0 6px #ffffff80}
.hp-nx-scene-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 30px;background:#f8fbfd;border-bottom:1px solid #d9e6ef}
.hp-scene-label{display:block;color:#526a80;font:500 13px/1.4 var(--body);margin-bottom:7px}
.hp-nx-scene-head h4{margin:0;color:#0b2443;font:600 29px/1.15 var(--display);letter-spacing:-.035em}
.hp-sample{flex:none;color:#61798d;font:400 12px/1.5 var(--body)}
.hp-nx-workspace{display:grid;grid-template-columns:340px 1fr}
.hp-nx-evidence{padding:27px 22px;background:#f0f6fa;border-right:1px solid #d9e6ef;display:flex;flex-direction:column;gap:14px}
.hp-pane-label{display:block;color:#536f84;font:500 12px/1.4 var(--body);margin-bottom:3px}
.hp-nx-source{padding:16px;background:#fff;border:1px solid #dae5ed;border-radius:12px;box-shadow:0 4px 12px #15324b06}
.hp-nx-source>div{display:flex;align-items:center;gap:8px;color:#24435d;font:500 12px/1.4 var(--body)}
.hp-nx-source>div>span:not(.hp-highlevel-mark){margin-left:auto;color:#597288;font-size:12px}.hp-nx-source img{object-fit:contain}
.hp-nx-source p{margin:13px 0 6px;color:#12314f;font:600 16px/1.35 var(--display);letter-spacing:-.01em}
.hp-nx-source small{display:block;color:#5c7389;font:400 12px/1.5 var(--body)}
.hp-nx-response{padding:0 25px 24px;min-width:0}
.hp-nx-channel{display:flex;align-items:center;gap:9px;border-bottom:1px solid #e2ebf2;min-height:53px;color:#24435d;font:600 14px/1.4 var(--body)}
.hp-nx-channel span{margin-left:auto;color:#5e778b;font:400 12px/1.4 var(--body)}
.hp-nx-human,.hp-nx-agent{display:flex;align-items:flex-start;gap:11px;margin-top:18px;color:#173955}
.hp-nx-human b,.hp-nx-agent b{font:600 13px/1.4 var(--body)}
.hp-nx-human p,.hp-nx-agent p{margin:3px 0 0;font:400 14px/1.5 var(--body);color:#405f77}
.hp-role-avatar{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#e6f2f7;color:#0c749a;font:600 11px/1 var(--body)}
.hp-nx-plan{margin:17px 0 0 41px;border:1px solid #cce1ec;border-left:4px solid #079bcc;border-radius:12px;overflow:hidden;box-shadow:0 10px 20px -12px #163b4e30}
.hp-nx-plan-title{padding:16px 18px 12px}.hp-nx-plan-title span{display:block;color:#057da6;font:600 12px/1.4 var(--body);margin-bottom:5px}.hp-nx-plan-title strong{display:block;color:#14314c;font:600 21px/1.2 var(--display);letter-spacing:-.03em}
.hp-nx-plan-row{display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid #e5edf3}
.hp-plan-date{color:#087fa9;font:600 17px/1.3 var(--display);letter-spacing:-.025em}.hp-plan-term{font-size:13px}
.hp-nx-plan-row b{display:block;color:#24445e;font:600 13px/1.4 var(--body)}.hp-nx-plan-row small{display:block;margin-top:3px;color:#60798c;font:400 12px/1.5 var(--body)}
.hp-plan-owner{font:500 12px/1.4 var(--body);color:#60798c}
.hp-nx-decision{display:grid;gap:4px;padding:14px 18px;background:#edf8fc;border-top:1px solid #cde7f1;color:#365a73;font:400 12px/1.5 var(--body)}.hp-nx-decision strong{color:#087b9f;font-weight:600}
.hp-nx-foundation{display:flex;align-items:center;gap:14px;padding:23px 30px;background:#0d2b43;color:#fff;border-top:1px solid #173e59}
.hp-nx-foundation>img{padding:4px;background:white;border-radius:9px;box-sizing:content-box}
.hp-nx-foundation b{display:block;font:600 17px/1.35 var(--display);letter-spacing:-.02em}
.hp-nx-foundation div span{display:block;margin-top:5px;color:#b7cfdf;font:400 12px/1.5 var(--body)}
.hp-nx-managed{margin-left:auto;max-width:120px;color:#9bc5db;font:500 12px/1.5 var(--body)}
@media(max-width:1050px){.hp-nx-workspace{grid-template-columns:290px 1fr}.hp-nx-response{padding:0 18px 20px}.hp-nx-plan{margin-left:0}.hp-nx-channel span{display:none}.hp-plan-owner{display:none}.hp-nx-plan-row{grid-template-columns:65px 1fr}.hp-nx-evidence{padding:24px 16px}.hp-nx-source>div{flex-wrap:wrap}.hp-nx-source>div>span:not(.hp-highlevel-mark){margin-left:0}}
@media(max-width:760px){.hp-overview-grid{gap:65px;margin-top:45px}.hp-overview-head .hp-product-promise{font-size:30px}.hp-overview-head p:not(.hp-product-promise){font-size:15px}.hp-nx-scene{border-radius:18px}.hp-nx-scene-head{padding:22px 20px;display:block}.hp-nx-scene-head h4{font-size:25px}.hp-sample{display:block;margin-top:10px}.hp-nx-workspace{grid-template-columns:1fr}.hp-nx-evidence{padding:18px;border-right:0;border-bottom:1px solid #d9e6ef;gap:10px}.hp-nx-source{padding:13px 15px}.hp-nx-source>div>span:not(.hp-highlevel-mark){margin-left:auto}.hp-nx-source p{margin-top:8px;font-size:15px}.hp-nx-source small{font-size:12px}.hp-nx-plan-title strong{font-size:20px}.hp-nx-plan-row{padding:12px 14px;grid-template-columns:58px 1fr}.hp-nx-plan-title{padding:16px 14px 12px}.hp-nx-foundation{padding:20px;gap:12px;align-items:flex-start}.hp-nx-foundation b{font-size:16px}.hp-nx-managed{display:none}}

.hp-highlevel-mark{display:block;position:relative;overflow:hidden;width:24px;height:24px;flex:none}.hp-highlevel-mark img{position:absolute;left:0;top:0;width:109px;height:24px;max-width:none}

/* 11 Sep 2026: OnCue retired from the site; the single Nexus story returns to the full-width layout above. The two-column override is preserved in versions/oncue-removal-before-20260911/. */

/* 12 Sep: the overview carries the Nexus introduction only; the launch-sooner scene is gone. */
.hp-overview-grid{margin-top:48px;gap:0}.hp-overview-nexus .hp-overview-head{max-width:760px;margin:0 auto;text-align:center}.hp-overview-nexus .hp-overview-head .nb-product-logo{margin-left:auto;margin-right:auto}

/* 12 Sep (late evening): the Nexus introduction and the story share one section (#practice.hp-intro); the separate overview section (#system) is gone. */
.hp-intro .nb-product-logo{position:relative;width:176px;height:31px;margin:0 auto 22px}
.hp-intro .nb-product-logo>img{width:168px}
.hp-intro .hv-sub{text-wrap:balance}
.hp-intro-links{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 40px;margin-top:56px}
@media(max-width:620px){.hp-intro .nb-product-logo{width:152px;height:27px;margin-bottom:16px}.hp-intro .nb-product-logo>img{width:144px}.hp-intro-links{margin-top:44px}}

/* 14 Sep: #how, "From the first job to part of the team": the four stages from How we work in one row between the Nexus window and the founders. A light field, so the page no longer ends on three dark blocks. */
.hp-how .hv-sub{text-wrap:balance}
.hp-steps{list-style:none;margin:72px auto 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.hp-steps li{position:relative;min-width:0;border-top:1px solid var(--hv-line);padding-top:22px}
.hp-steps li:before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--hv-cyan-ink)}
.hp-steps .hv-lab{margin:0 0 14px}
.hp-steps h4{font:600 24px/1.18 var(--display);letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.hp-steps p:not(.hv-lab){font:400 16px/1.55 var(--body);color:var(--hv-muted);margin:0}
.hp-how-links{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 40px;margin-top:64px}
@media(max-width:1000px){.hp-steps{grid-template-columns:repeat(2,1fr);gap:32px 40px}}
@media(max-width:620px){.hp-steps{grid-template-columns:1fr;gap:26px;margin-top:48px}.hp-steps h4{font-size:22px}.hp-how-links{margin-top:44px}}
/* 14 Sep (James: "reduce the space before 'From the first job to part of the team', it's really big"): the story section and the how section share one light field, so their two paddings stacked into a 248px band. The story section ends at its links; the how section opens 96px below them (64px on phones). */
.hp-intro{padding-bottom:0}.hp-how{padding-top:96px}
@media(max-width:620px){.hp-how{padding-top:64px}}