/* product.next.css: product.css + every pending SYSTEM fix (Zmerge C1/F6/F7/F10, Marty craft-v2 2/3/5/7/8, Zoffice 1/2/4/5/8).
   Swap in only on Chief's go. Load with _z/zspez-tokens.next.css + _z/lead.next.css (not site.css). Search "NEXT" for each change. */
/* F8: metric-matched fallback so the Inter swap doesn't shift layout (values from Inter vs Arial metrics) */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}
:root{--z-t-42:42px;--z-font:Inter,"Inter Fallback",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
/* Zspez product-site system. Built on /_z/zspez-tokens.css. Shared by every product site mock. */
:root{--pad:var(--z-pad);--gut:var(--z-gutter);--mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace}
body{font-size:var(--z-t-16);line-height:1.5}
img,svg{display:block}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit}
.nw{white-space:nowrap}
.wrap{max-width:var(--z-max);margin:0 auto;padding:0 var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.skip{position:absolute;left:12px;top:-80px;z-index:50;background:#fff;color:#000;padding:12px 16px;border-radius:10px;font-weight:600}.skip:focus{top:12px}

/* part-of-Zspez bar */
.pbar{border-bottom:1px solid var(--z-line)}
.pbar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.pbar .z-part{font-size:var(--z-t-12)}
.pbar .z-part img{width:16px;height:16px}
.pbar .more{font-size:var(--z-t-12);color:var(--z-dim)}

/* header */
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.brand{white-space:nowrap;display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:var(--z-t-19);font-weight:680;letter-spacing:-.03em}
.brand .pm{width:30px;height:30px;border-radius:8px}
.nav{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:var(--z-t-14);font-weight:540;color:var(--z-body);border-radius:10px}
.hcta{display:flex;align-items:center;gap:10px}
.hcta .z-btn{min-height:44px;padding:0 18px;font-size:var(--z-t-14);white-space:nowrap}
.hcta .sm{display:none}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:#fff}}

/* hero */
.hero{position:relative;overflow-x:clip}
.hero::before{content:"";position:absolute;inset:-10% -10% auto;height:120%;background:radial-gradient(640px 420px at 78% 38%,rgba(253,109,1,.10),transparent 70%);pointer-events:none}
.hero .grid{align-items:center;padding:48px 0 120px;row-gap:56px}
.hcopy{grid-column:1/span 5;position:relative}
/* NEXT Zoffice 2: same H1 breaks in both engines; a page may override */
.hcopy h1{max-width:10ch}
.hvis{grid-column:6/span 7;position:relative}
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.eyebrow .t{font-size:var(--z-t-14);font-weight:560;color:var(--z-body)}
h1{margin-top:24px;font-size:var(--z-t-72);line-height:.98;font-weight:690;letter-spacing:-.05em}
h1 em{font-style:normal;color:var(--z-acc)}
.lead{margin-top:24px;font-size:var(--z-t-19);line-height:1.45;color:var(--z-ink-2);max-width:520px}
.host{margin-top:20px;padding-left:16px;border-left:2px solid var(--z-acc);font-size:var(--z-t-16);line-height:1.45;color:var(--z-body);max-width:500px}
.host b{color:#fff;font-weight:620}
.ctas{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}
.ctas-note{margin-top:14px;font-size:var(--z-t-14);color:var(--z-dim)}
.sample{font-size:var(--z-t-11);font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--z-sample)}

/* sections */
.sec{padding:128px 0 120px;border-top:1px solid var(--z-line)}
.kick{display:flex;align-items:center;gap:12px;font-size:var(--z-t-12);font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--z-body)}
.kick::before{content:"";width:18px;height:2px;border-radius:1px;background:var(--z-acc);flex:none}.kick b{color:var(--z-dim);font-weight:650}
h2{margin-top:20px;font-size:var(--z-t-64);line-height:1;font-weight:690;letter-spacing:-.05em;max-width:900px}
h2 span{color:var(--z-head-grey)}h2>span{display:block}
.intro{margin-top:24px;font-size:var(--z-t-19);line-height:1.45;color:var(--z-body);max-width:640px}
.sgrid{margin-top:64px;row-gap:var(--gut)}

/* cards */
.card{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:32px;border-radius:24px;background:linear-gradient(180deg,#151517,#0f0f11);border:1px solid rgba(255,255,255,.08)}
a.card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(255,255,255,.22);opacity:0;transition:opacity .3s var(--z-ease);pointer-events:none}
@media (hover:hover) and (pointer:fine){a.card:hover::after{opacity:1}}
.card .n{font-size:var(--z-t-12);font-weight:650;letter-spacing:.14em;color:var(--z-dim)}
.card h3{margin-top:16px;font-size:var(--z-t-24);line-height:1.2;font-weight:660;letter-spacing:-.025em}
.card p{text-wrap:pretty;margin-top:10px;font-size:var(--z-t-16);line-height:1.5;color:var(--z-body)}
.card .vis{margin-top:auto}
.card>p:has(+.vis),.card>p:has(+.qa){margin-bottom:24px}
.card .foot{margin-top:auto;padding-top:24px}
.pf{grid-column:span 3}.pf .big{font-size:var(--z-t-48)}
.c4{grid-column:span 4}.c6{grid-column:span 6}.c3{grid-column:span 3}.c5{grid-column:span 5}.c7{grid-column:span 7}.c12{grid-column:1/-1}
/* NEXT Marty F2 / Zoffice 8: media rule after the base spans so it wins */
@media (max-width:1279px){.pf{grid-column:span 6}.c3{grid-column:span 6}.card{padding:28px}}
.ico{width:24px;height:24px;fill:none;stroke:var(--z-body);stroke-width:var(--z-stroke);stroke-linecap:round;stroke-linejoin:round}

/* product screen primitives */
.win{position:relative;border-radius:18px;background:#101012;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);overflow:hidden}
.win-bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 16px;border-bottom:1px solid var(--z-line);background:#131315}
.win-bar .dots{display:flex;gap:6px}.win-bar .dots i{width:10px;height:10px;border-radius:50%;background:#2c2c30}
.win-bar .ttl{font-size:var(--z-t-12);font-weight:600;color:var(--z-body)}
.win-bar .sample{margin-left:auto}
.panel{border-radius:16px;background:#0e0e10;border:1px solid var(--z-line)}
.mono{font-family:var(--mono)}
.chipf{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--z-line-2);font:500 var(--z-t-12)/1 var(--mono);color:var(--z-ink-2);white-space:nowrap}
.chipf.on{border-color:rgba(253,109,1,.5);color:#fff;background:rgba(253,109,1,.10)}

/* brand descriptor + verdict pills (same values as the try.* demos) */
.brand .bx{display:flex;flex-direction:column;line-height:1.1}.brand .bx small{margin-top:3px;font-size:var(--z-t-12);font-weight:520;letter-spacing:0;color:var(--z-dim)}
.v{display:inline-block;font:700 var(--z-t-11)/1 var(--z-font);letter-spacing:.08em;padding:5px 8px;border-radius:6px;text-align:center;white-space:nowrap}
.v.a{background:rgba(61,220,132,.12);color:#6ee7a5}.v.r{background:rgba(255,255,255,.08);color:#e4e4e8}.v.d{background:rgba(255,92,92,.13);color:#ff8a8a}.v.o{background:rgba(253,109,1,.14);color:#ffb27a}
.av{width:28px;height:28px;border-radius:8px;background:#232327;border:1px solid var(--z-line-2);display:grid;place-items:center;font-weight:700;font-size:var(--z-t-12);flex:none;color:#fff}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:var(--z-t-12);font-weight:600;color:var(--z-body);padding:5px 10px;border-radius:999px;border:1px solid var(--z-line-2);white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--z-dim)}.pill.work i{background:#3ddc84}.pill.wait{color:#ffb27a;border-color:rgba(253,109,1,.4)}.pill.wait i{background:var(--z-acc)}
.badge-dev{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font-size:var(--z-t-11);font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--z-ink-2);padding:7px 11px;border-radius:999px;border:1px dashed rgba(255,255,255,.3)}

/* proof list */
.proof{display:flex;gap:20px;padding:28px;border-radius:20px;border:1px solid var(--z-line);background:var(--z-surface);position:relative}
.proof .big{color:#fff;font-size:var(--z-t-48);line-height:1;font-weight:680;letter-spacing:-.04em}
.proof h3{margin-top:16px;font-size:var(--z-t-19);font-weight:650;letter-spacing:-.02em}
.proof p{text-wrap:pretty;margin-top:6px;font-size:var(--z-t-16);color:var(--z-body);max-width:520px}
/* NEXT Marty F3: pin proof links to the card bottom */
.proof>div{display:flex;flex-direction:column;flex:1;min-width:0}
.proof .go{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:auto;padding-top:8px;font-size:var(--z-t-14);font-weight:600;color:#fff}
.proof .go svg{width:14px;height:14px;fill:none;stroke:var(--z-acc);stroke-width:var(--z-stroke);stroke-linecap:round;stroke-linejoin:round}
a.proof::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(255,255,255,.22);opacity:0;transition:opacity .3s var(--z-ease);pointer-events:none}
@media (hover:hover) and (pointer:fine){a.proof:hover::after{opacity:1}}

/* CTA band */
.band{padding:136px 0 128px;border-top:1px solid var(--z-line);text-align:center;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;left:50%;bottom:-260px;width:1100px;height:520px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(253,109,1,.16),transparent);pointer-events:none}
.band h2{margin:0 auto;max-width:980px}
/* NEXT Zmerge C1: child selector, so a nested .nw stays inline */
.band h2>span{display:block}
.band .ctas{justify-content:center}
.addr{margin-top:16px;font-size:var(--z-t-14);color:var(--z-dim)}.addr span{color:var(--z-ink-2);user-select:all;-webkit-user-select:all}

/* footer */
.ftr{border-top:1px solid var(--z-line)}
.ftr .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:28px;padding-top:56px;padding-bottom:48px}
.ftr .fb{grid-column:1/span 5}
.ftr .fb p{margin-top:12px;font-size:var(--z-t-14);line-height:1.5;color:var(--z-dim);max-width:360px}
.ftr .fcol{grid-column:span 2}
.ftr .fh{margin:0 0 8px;font-size:var(--z-t-12);font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--z-dim)}
.ftr .fcol a{display:flex;align-items:center;min-height:44px;font-size:var(--z-t-14);color:var(--z-body)}
.ftr .legal{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-top:12px;border-top:1px solid var(--z-line);font-size:var(--z-t-12);color:var(--z-dim)}
.ftr .legal>span{display:inline-flex;align-items:center;gap:8px;min-height:44px}.ftr .legal a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;margin-inline:-4px}
@media (hover:hover) and (pointer:fine){.ftr a:hover{color:#fff}}
.drew{outline:1px dashed rgba(253,109,1,.6);outline-offset:2px}

/* motion: reveal hidden only under .js; transform/opacity only */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .7s var(--z-ease),transform .7s var(--z-ease)}
.js .rv.in{opacity:1;transform:none}.js .rv:focus-within,.js .stg>*:focus-within{opacity:1;transform:none;transition:none}
.js .stg>*{opacity:0;transform:translateY(10px);transition:opacity .7s var(--z-ease),transform .7s var(--z-ease)}
.js .stg.in>*{opacity:1;transform:none}
.js .stg.in>*:nth-child(2){transition-delay:calc(var(--z-stagger))}.js .stg.in>*:nth-child(3){transition-delay:calc(var(--z-stagger)*2)}.js .stg.in>*:nth-child(4){transition-delay:calc(var(--z-stagger)*3)}.js .stg.in>*:nth-child(5){transition-delay:calc(var(--z-stagger)*4)}.js .stg.in>*:nth-child(6){transition-delay:calc(var(--z-stagger)*5)}

/* responsive */
@media (min-width:1024px) and (max-width:1439px){.hcopy{grid-column:1/span 6}.hvis{grid-column:7/span 6}}
/* NEXT Zoffice 1: split sections live in the system now (pages drop their local .split block) */
.split .grid{align-items:center;row-gap:56px}
.split .sc{grid-column:1/span 5}.split .sv{grid-column:7/span 6}
.split.rev .sc{grid-column:8/span 5;grid-row:1}.split.rev .sv{grid-column:1/span 6;grid-row:1}
@media (min-width:1280px){.split h2{font-size:var(--z-t-48)}}
@media (min-width:1100px) and (max-width:1279px){.split .sc{grid-column:1/span 6}.split .sv{grid-column:7/span 6}.split.rev .sc{grid-column:7/span 6}.split.rev .sv{grid-column:1/span 6}}
@media (max-width:1099px){.split .sc,.split .sv,.split.rev .sc,.split.rev .sv{grid-column:1/-1;grid-row:auto}.split .sc{max-width:680px}}
@media (max-width:1023px){.hcopy,.hvis{grid-column:1/-1}.hcopy{max-width:680px}.hero .grid{padding:32px 0 96px}}
@media (max-width:1279px){h1{font-size:var(--z-t-64)}h2{font-size:var(--z-t-48)}}
@media (max-width:1099px){
 :root{--pad:40px}
 .nav{display:none}
 .c4,.c3{grid-column:span 6}.c5,.c7{grid-column:1/-1}
 .ftr .fb{grid-column:1/-1}.ftr .fcol{grid-column:span 4}
}
@media (max-width:767px){
 :root{--pad:var(--z-pad-m)}
 .pbar .more{display:none}
 .hdr .wrap{height:68px}
 .hcta .z-btn-ghost{display:none}.hcta .lg{display:none}.hcta .sm{display:inline}
 h1{font-size:var(--z-t-48);margin-top:20px}
 .lead{font-size:var(--z-t-16)}
 .ctas{flex-direction:column}.ctas .z-btn{width:100%}
 .sec{padding:80px 0 72px}.band{padding:88px 0 80px}
 h2{font-size:clamp(28px,7.8vw,34px);letter-spacing:-.04em}
 .intro{font-size:var(--z-t-16)}
 .sgrid{margin-top:40px}
 .c4,.c3,.c6,.pf{grid-column:1/-1}
 .card{padding:24px;border-radius:20px}
 .proof{flex-direction:column;gap:12px;padding:24px}
 .ftr .fcol{grid-column:span 6}
}
@media (max-width:419px){h1{font-size:var(--z-t-42);letter-spacing:-.05em}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.js .rv,.js .stg>*{opacity:1!important;transform:none!important}}
/* shared lead dialog inside product pages (dialog styles live in /_z/site.css) */
.z-lead h2{margin-top:0;max-width:none;font-size:var(--z-t-24);letter-spacing:-.025em}.z-lead .z-done h2{margin-top:4px}

/* text wrap reach (tokens cover p,li) */
dd{text-wrap:pretty}
/* Family CTA pattern: "Try the demo" is the only filled orange button; the secondary action is a text link */
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font-size:var(--z-t-16);font-weight:560;color:var(--z-ink-2);white-space:nowrap;background:none;border:0;cursor:pointer;font-family:inherit}
.tlink .z-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:var(--z-stroke);stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--z-ease)}
.ctas{align-items:center}.ctas .tlink{padding:0 12px}
@media (max-width:767px){.ctas{align-items:stretch}.ctas .tlink{justify-content:center}}
@media (hover:hover) and (pointer:fine){.tlink:hover{color:#fff}.tlink:hover .z-ic{transform:translateX(3px)}}
/* NEXT Zoffice 4 / Marty F5 / Zmerge F7: 16px text links, 14px in the header, one weight */
.hcta .tlink{font-size:var(--z-t-14);font-weight:560}
/* NEXT Zmerge F6: text links in cards line up with the h3/p edge */
.card .foot .tlink,.proof .tlink{margin-inline:-4px}
@media (max-width:767px){.hdr .tlink{display:none}}
@media (max-width:374px){.hcta .z-btn{padding-inline:14px}.hdr .wrap{gap:12px}.brand{gap:10px}}
/* NEXT Zharness craft-v2 F4: legal-only footer (privacy pages) draws one rule, not two */
.ftr .wrap:has(>.legal:only-child){padding-top:0}.ftr .legal:only-child{border-top:0}
/* NEXT VOICE 8: only the Z-word in the band goes orange */
.band h2 em{font-style:normal;color:var(--z-acc)}