/* Editorial marketing homepage; loaded after the shared homepage section styles. */

body { font-family: 'DM Sans', sans-serif; }
.editorial-hero { position:relative; isolation:isolate; overflow:hidden; min-height:740px; height:min(62vw,1020px); margin:16px; border:1px solid var(--border-2); border-radius:18px; background:var(--bg); }
.editorial-nav { position:absolute; inset:26px 28px auto; display:flex; justify-content:space-between; align-items:center; background:none; border:0; padding:0; backdrop-filter:none; }
.nav-group { /* token-ok: marketing art direction; not a tenant app control. */ display:flex; align-items:center; gap:28px; padding:12px 18px; border-radius:11px; background:var(--paper); color:var(--ink); min-height:62px; font-size:13px; font-weight:500; }
.editorial-brand { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:700; white-space:nowrap; }
.editorial-brand img { /* token-ok: marketing art direction; not a tenant app control. */ width:30px; height:30px; border-radius:7px; }
.nav-group-right { gap:20px; padding:10px; padding-left:23px; }
.editorial-login,.editorial-join { padding:10px 20px; border:1px solid var(--ink); border-radius:30px; }
.editorial-join { color:var(--paper); background:var(--ink); }
.editorial-scene { position:absolute; width:90%; left:3%; bottom:-9%; z-index:-1; }
.scene-photo { width:100%; height:auto; }
.screen-space { position:absolute; top:0; left:0; width:1536px; height:1024px; transform-origin:0 0; }
.product-screen { position:absolute; left:0; top:0; width:1440px; max-width:none; height:904px; overflow:hidden; transform-origin:0 0; filter:none; }
.editorial-heading { position:absolute; left:3.5%; top:38%; width:32%; }

.editorial-heading h1 { font-family:'Instrument Serif',Georgia,serif; font-size:clamp(64px,6.1vw,108px); line-height:.99; letter-spacing:-.035em; font-weight:400; }
.editorial-intro { position:absolute; right:3.5%; top:47%; width:20%; max-width:290px; font-size:15px; line-height:1.65; }


.editorial-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:27px; }
.editorial-button { /* handroll-ok: public marketing homepage, with its own navigation and CTAs, outside the app component system. */ background:var(--paper); color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--paper); padding:12px 20px; border-radius:30px; font-size:13px; }
.editorial-button-outline { color:var(--paper); background:transparent; border-color:var(--border-2); }
.editorial-button:hover { /* handroll-ok: public marketing homepage, with its own navigation and CTAs, outside the app component system. */ transform:translateY(-2px); }


.editorial-menu { display:none; }
a:focus-visible,button:focus-visible { /* handroll-ok: public marketing homepage, with its own navigation and CTAs, outside the app component system. */ outline:2px solid var(--gold); outline-offset:5px; }
.editorial-mobile-menu[hidden] { display:none; }
.editorial-mobile-menu { /* handroll-ok: public marketing homepage, with its own navigation and CTAs, outside the app component system. */ /* token-ok: marketing art direction; not a tenant app control. */ position:absolute; top:88px; right:16px; left:16px; z-index:101; background:var(--paper); color:var(--ink); border-radius:12px; padding:20px; }
.editorial-mobile-menu a { /* handroll-ok: public marketing homepage, with its own navigation and CTAs, outside the app component system. */ display:block; padding:10px; }
.section-problem { background:var(--paper); color:var(--ink); margin-top:16px; padding:110px 0; }
.sec-title { font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:clamp(40px,4.5vw,66px); letter-spacing:-.025em; }
.section-problem .sec-title .dim { color:var(--text-3); }
.section-problem .sec-sub,.section-problem .problem-body,.section-problem .problem-pivot p { color:var(--ink); opacity:.72; }
.section-problem .eyebrow,.section-problem .problem-tool { color:var(--ink); opacity:.6; }
.problem-grid { gap:0; }
.problem-card { border:0; border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent); border-radius:0; padding:28px 24px 28px 0; background:transparent; }
.problem-card:hover { background:transparent; }
.problem-head { color:var(--ink); }
.problem-pivot { border-color:color-mix(in srgb,var(--ink) 20%,transparent); }
.problem-pivot h3 { font-family:'Instrument Serif',Georgia,serif; font-size:48px; font-weight:400; line-height:1.1; }
.problem-pivot .gold { color:var(--ink); }
.eyebrow,.act-num { letter-spacing:1px; }
.btn-primary,.btn-white,.btn-outline,.nav-cta { /* handroll-ok: public marketing homepage, with its own navigation and CTAs, outside the app component system. */ border-radius:30px; }
@media(min-width:1600px) { .editorial-scene { bottom:-13%; } }
@media(max-width:1100px) and (min-width:701px) { .editorial-hero { min-height:760px; } .nav-group { gap:16px; } .editorial-heading { top:28%; } .editorial-heading h1 { font-size:68px; } .editorial-scene { width:104%; left:-8%; bottom:0; } .editorial-intro { top:37%; right:3%; width:24%; font-size:13px; }  }
@media(max-width:700px) {
.editorial-hero { margin:8px; border-radius:14px; height:auto; min-height:1000px; }
.editorial-nav { inset:16px 16px auto; gap:8px; }
.nav-group { min-height:48px; padding:9px 12px; gap:8px; }
.editorial-brand { font-size:12px; }.editorial-brand img { width:25px;height:25px; }
.nav-desktop,.nav-group-right { display:none; }
.editorial-menu { /* handroll-ok: public marketing homepage, with its own navigation and CTAs, outside the app component system. */ /* token-ok: marketing art direction; not a tenant app control. */ display:flex; gap:16px; align-items:center; border:0; border-radius:9px; background:var(--paper); color:var(--ink); padding:14px; font:500 12px 'DM Sans',sans-serif; }
.editorial-heading { left:25px; top:115px; width:calc(100% - 50px); }


.editorial-heading h1 { font-size:70px; line-height:.96; }
.editorial-scene { width:155%; left:-45%; bottom:auto; top:350px; }
.editorial-intro { top:720px; left:25px; right:25px; width:auto; max-width:none; font-size:14px; }

.editorial-actions { margin-top:20px; }
.section-problem { padding:70px 0; }.problem-pivot h3 { font-size:40px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }
/* Feather the photographic background into the surrounding charcoal. */
.editorial-scene { mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 94%,transparent 100%),linear-gradient(to right,transparent,black 9%,black 92%,transparent); mask-composite:intersect; }
@media(min-width:1101px) { .editorial-intro { top:43%; } }
@media(max-width:700px) { .editorial-scene { width:140%; left:-28%; top:355px; } .editorial-intro { top:710px; } }
@media(min-width:701px) and (max-width:1100px) {
.editorial-hero { height:1000px; }
.nav-desktop { display:none; }
.nav-group { gap:15px; }.editorial-login,.editorial-join { white-space:nowrap; }
.editorial-heading { top:170px; left:4%; width:57%; }
.editorial-heading h1 { font-size:76px; }
.editorial-intro { top:190px; right:4%; width:29%; font-size:13px; }

.editorial-scene { width:106%; left:-6%; top:480px; bottom:auto; }

}
@media(max-width:700px) { .editorial-hero { min-height:1040px; } }

/* Neutral marketing palette; product screenshots retain the app’s own colors. */
:root { --gold-dim: #b9b9b988; --gold-bg: #b9b9b910; --gold-bd: #b9b9b940; }
.section-problem .problem-pivot { background:transparent; }
.section-problem .problem-tool::before { background:var(--text-3); }

/* One continuous public marketing navigation bar. */
.editorial-nav { background:var(--paper); color:var(--ink); border-radius:var(--marketing-nav-radius,12px); padding:0 8px; }
.nav-group { background:transparent; }
.section-problem { background:var(--bg); color:var(--text); }
.section-problem .sec-sub,.section-problem .problem-body,.section-problem .problem-pivot p { color:var(--text-2); opacity:1; }
.section-problem .eyebrow,.section-problem .problem-tool { color:var(--text-3); opacity:1; }
.section-problem .problem-head,.section-problem .problem-pivot .gold { color:var(--text); }
.section-problem .problem-card,.section-problem .problem-pivot { border-color:var(--border-2); }
@media(max-width:700px) {
 .editorial-nav { padding:0 3px; }
 .editorial-menu { /* handroll-ok: navigation toggle in the public marketing header. */ background:transparent; }
}

/* Integrator workflow headline, paired with a clear product positioning heading. */
.editorial-heading { top:44%; }
.editorial-heading h1 { font-size:clamp(64px,6.1vw,108px); line-height:.99; }
.editorial-heading h1 span { display:block; }
.editorial-intro > p { font-size:15px; line-height:1.65; color:var(--text-2); }
@media(min-width:701px) and (max-width:1100px) {
 .editorial-heading { top:195px; }
 .editorial-heading h1 { font-size:clamp(62px,7vw,76px); }
 .editorial-intro > p { font-size:14px; }
}
@media(max-width:700px) {
 .editorial-hero { min-height:1010px; }
 .editorial-heading { top:125px; }
 .editorial-heading h1 { font-size:clamp(48px,16vw,70px); }
 .editorial-scene { top:340px; }
 .editorial-intro { top:700px; }
 .editorial-intro > p { font-size:14px; }
}

.editorial-intro > h2 { font-size:23px; line-height:1.3; font-weight:500; letter-spacing:-.02em; color:var(--text); margin-bottom:18px; }
@media(max-width:1100px) { .editorial-intro > h2 { font-size:21px; } }

/* Silver highlights and dark chrome detail, preserving the original logo artwork. */
.editorial-home .integ-logo img { filter:grayscale(1) brightness(.95) contrast(1.25); opacity:1; }

/* The source capture includes a 36px demo banner. Project only the design UI. */
.product-screen > img { display:block; width:1440px; max-width:none; height:940px; transform:translateY(-36px); }