/* Zelleo design system v7. The palette is lifted straight from the company decks
   (Investor Presentation, Zelleo x Tetra Marketing Social): four colours and nothing else.
   Black #0B0B0C, off-white #F2F1EE, grey, orange #FF6A2B.
   Extends tokens-v2.css. Weights used: 400 and 500. Nothing heavier exists; headlines take the 500 cut. */

:root{
  /* the four colours. Exactly three backgrounds are built from them. */
  --zl-black:#0B0B0C;
  --zl-paper:#F2F1EE;
  --zl-white:#FFFFFF;
  --zl-orange:#FF6A2B;

  --chapter-light:var(--zl-white);
  --chapter-soft:var(--zl-paper);
  --chapter-dark:var(--zl-black);

  --z-ink:var(--zl-black);
  --z-body:#55585E;
  --z-muted:#6E7177;
  --head-primary:var(--zl-black);
  --head-secondary:#5C5F65;
  --head-primary-on-dark:#F2F2F0;
  --head-secondary-on-dark:#8A8D93;
  --rule:#E4E3E0;
  --rule-on-dark:#26262A;
  --index-num:#8A8D93;
  --index-num-active:var(--zl-black);

  /* the brand orange marks the spine of the page: chapter numerals, a rule, one word, one arrow.
     #FF6A2B carries 6.9:1 on the black, so it is safe as text there. On white it is a mark only,
     and --accent-text is the darker cut that is safe to read. */
  --orange-500:var(--zl-orange);
  --orange-700:#BF4610;   /* text on white, 5.1:1 */
  --orange-300:var(--zl-orange);
  --accent-mark:var(--zl-orange);
  --accent-text:#BF4610;
  --accent-mark-dark:var(--zl-orange);
  --accent-focus:#BF4610;

  /* §9.2 type */
  --font-sans:"Switzer",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Roboto Mono",Menlo,Consolas,monospace;

  /* §9.4 scale */
  --t-display:clamp(44px,5.9vw,88px);
  --t-h1:clamp(38px,4.6vw,68px);
  --t-h2:clamp(32px,3.4vw,50px);
  --t-h3:clamp(26px,2.3vw,34px);
  --t-lead:clamp(20px,1.8vw,26px);
  --t-body:18px;
  --t-small:14px;
  --t-label:12px;
  --t-index:16px;
  --t-figure:clamp(44px,5.2vw,80px);

  /* §2.3 grid, §9.5 density */
  --grid-gap:24px;
  --page-max:1312px;                 /* the content measure, centred */
  --gutter:clamp(24px,5vw,72px);      /* 72px of margin at 1440, 24px on a phone */
  --space-chapter:clamp(96px,11vw,176px);
  --space-module:clamp(56px,6vw,96px);
  --space-block:32px;
  --nav-h:64px;

  --ease:cubic-bezier(.16,1,.3,1);
}

/* chapter-local colours: every chapter sets its own ink pair */
.is-light,.is-soft{--fg:var(--head-primary);--fg2:var(--head-secondary);--tx:var(--z-body);--mu:var(--z-muted);--rl:var(--rule);--mark:var(--accent-mark);--mark-text:var(--accent-text)}
.is-light{background:var(--chapter-light)}
.is-soft{background:var(--chapter-soft)}
.is-dark{background:var(--chapter-dark);--fg:var(--head-primary-on-dark);--fg2:var(--head-secondary-on-dark);--tx:#D9DAE0;--mu:var(--head-secondary-on-dark);--rl:var(--rule-on-dark);--mark:var(--accent-mark-dark);--mark-text:var(--accent-mark-dark);color-scheme:dark}

/* ------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--chapter-light);color:var(--z-body);font:400 var(--t-body)/1.5 var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
strong,b{font-weight:500}
:focus-visible{outline:2px solid var(--accent-focus);outline-offset:2px}
.is-dark :focus-visible{outline-color:var(--accent-mark-dark)}
.zl-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zl-skip{position:absolute;left:var(--gutter);top:-80px;z-index:100;background:var(--z-ink);color:#fff;padding:12px 16px;border-radius:2px}
.zl-skip:focus{top:12px}
.tnum{font-variant-numeric:tabular-nums}

.zl-wrap{max-width:calc(var(--page-max) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.zl-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
.zl-ch{position:relative;padding:var(--space-chapter) 0;color:var(--tx)}
.zl-ch + .zl-ch.same{padding-top:0}
.zl-mod + .zl-mod{margin-top:var(--space-module)}

/* ------------------------------------------------------------ type */
.zl-display,.zl-h1,.zl-h2,.zl-h3{font-weight:500;line-height:1.06;letter-spacing:-.028em;color:var(--fg)}   /* the decks set every headline in the medium cut, not the regular */
.zl-display{font-size:var(--t-display);letter-spacing:-.05em}
.zl-h1{font-size:var(--t-h1);letter-spacing:-.04em}
.zl-h2{font-size:var(--t-h2);letter-spacing:-.02em}
.zl-h3{font-size:var(--t-h3);letter-spacing:-.05em;line-height:1.06}
.zl-two .a{display:block;color:var(--fg)}
.zl-two .b{display:block;color:var(--fg2)}
.zl-lead{font-size:var(--t-lead);line-height:1.34;letter-spacing:-.014em;color:var(--mu);max-width:46ch}
.zl-lead.mu{color:var(--mu)}
.zl-body{max-width:66ch;color:var(--tx)}
.zl-body + .zl-body{margin-top:1em}
.zl-small{font-size:var(--t-small);line-height:1.5;color:var(--mu)}
.zl-label{font-size:var(--t-label);line-height:1;letter-spacing:-.022em;text-transform:uppercase;color:var(--mu)}
.zl-idx{font-family:var(--font-mono);font-size:var(--t-index);line-height:1.5;color:var(--index-num);font-variant-numeric:tabular-nums}
.is-dark .zl-idx{color:var(--head-secondary-on-dark)}
.zl-muted{color:var(--mu)}

/* chapter head: index numeral and label above the headline, document split */
.zl-head{row-gap:24px;align-items:start}
.zl-head .zl-head-k{grid-column:1/4;display:flex;flex-direction:column;gap:8px}
.zl-head .zl-head-m{grid-column:5/13;display:flex;flex-direction:column;gap:28px}

/* ------------------------------------------------------------ buttons and tags */
.zl-btn{display:inline-flex;align-items:center;gap:12px;font-size:14px;line-height:1;padding:14px 18px;border-radius:2px;background:var(--z-ink);color:#fff;white-space:nowrap}
.zl-ghost{display:inline-flex;align-items:center;gap:12px;font-size:var(--t-label);letter-spacing:-.022em;text-transform:uppercase;padding:14px 18px;border:1px solid currentColor;border-radius:0;color:var(--fg)}
.zl-arrow{display:inline-block;transition:transform 180ms var(--ease),color 180ms var(--ease)}
a:hover .zl-arrow,a:focus-visible .zl-arrow,button:hover .zl-arrow{transform:translateX(6px);color:var(--mark,var(--accent-mark))}
.zl-btn:hover .zl-arrow,.zl-btn:focus-visible .zl-arrow{color:#fff}
.zl-link{border-bottom:1px solid var(--rl)}
.zl-link:hover{border-bottom-color:currentColor}
.zl-tag{display:inline-block;font-size:11px;line-height:1;letter-spacing:-.01em;text-transform:uppercase;padding:5px 7px 4px;border:1px solid var(--mark-text,var(--accent-text));color:var(--mark-text,var(--accent-text));background:transparent;vertical-align:middle;white-space:nowrap}

/* ------------------------------------------------------------ C-15 nav — SpaceX pattern, per Zelleo's direction (25 Oct 2026):
   transparent over the top of the page, hides as you read down, comes back as a solid bar when you scroll up. */
.zl-nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);color:var(--z-ink);background:transparent;transition:transform 320ms var(--ease),background-color 240ms linear,color 240ms linear}
.zl-nav.on-dark{color:#fff}
.zl-nav.is-solid{background:var(--chapter-dark);color:#fff}
.zl-nav.is-hidden{transform:translateY(-100%)}
.zl-nav .zl-wrap{max-width:none;height:100%;display:flex;align-items:center;gap:36px}   /* the gutter, like the hero it sits over; up to 1456px this is the content frame exactly */
.zl-word{font-family:"Manrope",var(--font-sans);font-weight:800;font-size:26px;letter-spacing:-.05em;line-height:1;color:inherit;flex:none}
.zl-nav .zl-word{display:inline-flex;align-items:center;min-height:44px}  /* a comfortable tap target around the mark itself */
.zl-word .dot{color:var(--accent-mark)}
.zl-tabs-nav{display:flex;align-items:center;gap:clamp(18px,1.9vw,30px);margin-right:auto}
.zl-tabs-nav a{position:relative;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:8px 0;white-space:nowrap;opacity:.9;line-height:1}
.zl-tabs-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent-mark);transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease)}
.zl-tabs-nav a:hover::after,.zl-tabs-nav a[aria-current="page"]::after{transform:scaleX(1)}
.zl-tabs-nav a:hover,.zl-tabs-nav a[aria-current="page"]{opacity:1}
.zl-nav-r{display:flex;align-items:center;gap:12px;margin-left:auto;flex:none}
.zl-nav-cta{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:1px solid currentColor;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background-color 200ms linear,color 200ms linear,border-color 200ms linear}
.zl-nav-cta:hover,.zl-nav-cta:focus-visible{background:var(--accent-mark);border-color:var(--accent-mark);color:#fff}
.zl-menu-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 4px 0 12px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:inherit}
.zl-menu-btn .bars{width:22px;height:10px;position:relative}
.zl-menu-btn .bars::before,.zl-menu-btn .bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor}
.zl-menu-btn .bars::before{top:0}.zl-menu-btn .bars::after{bottom:0}
.zl-pad-top{padding-top:var(--nav-h)}

/* menu: a drawer from the right, as on spacex.com */
.zl-menu{position:fixed;inset:0;z-index:60;display:none;background:rgba(0,0,0,.5)}
.zl-menu.open,.zl-menu:target{display:block}
.zl-menu-panel{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);background:#000;color:#fff;overflow:auto;padding:0 32px 48px;animation:zl-drawer 320ms var(--ease)}
@keyframes zl-drawer{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.zl-menu-top{height:var(--nav-h);display:flex;align-items:center;justify-content:flex-end}
.zl-menu-top .zl-menu-btn{padding:0}
.zl-menu-close{font-size:28px;line-height:1;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
.zl-menu-panel .grp{margin-top:28px}
.zl-menu-panel .grp > p{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8A8D93;margin-bottom:8px}
.zl-menu-panel ul li a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #26262A;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.zl-menu-panel ul.big li a{font-size:18px;padding:16px 0}
.zl-menu-panel ul li a .ds{font-size:12px;letter-spacing:0;text-transform:none;color:#8A8D93;text-align:right}
.zl-menu-panel ul li a:hover{color:#fff}
.zl-menu-panel ul li a:hover .zl-arrow{transform:translateX(6px);color:var(--accent-mark-dark)}
@media (min-width:1240px){.zl-nav .zl-menu-btn{display:none}}
@media (max-width:1239px){.zl-tabs-nav{display:none}}
@media (max-width:560px){.zl-nav-cta{display:none}}

/* ------------------------------------------------------------ C-01 hero */
.zl-hero{min-height:min(88vh,900px);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--space-module)) 0 var(--space-module)}
.zl-hero .zl-wrap{width:100%}
.zl-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:auto}
.zl-hero-main{margin-top:clamp(48px,8vh,120px);display:flex;flex-direction:column;gap:32px}
.zl-hero .zl-display{max-width:21ch}
.zl-budget{display:grid;grid-template-columns:auto auto;column-gap:40px;row-gap:6px;text-align:left}
.zl-budget span{font-size:var(--t-label);letter-spacing:-.022em;text-transform:uppercase;color:var(--mu);line-height:1.25}
.zl-hero-foot{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.zl-hero.has-media .zl-hero-main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
.zl-hero.has-media .zl-hero-text{grid-column:1/7;display:flex;flex-direction:column;gap:32px;align-self:end}
.zl-hero.has-media .zl-hero-media{grid-column:8/13}
.zl-hero-media img{width:100%;height:auto;aspect-ratio:4/3;max-height:62vh;object-fit:cover}

/* objection module */
.zl-objection{min-height:80vh;display:flex;align-items:center;justify-content:center;text-align:center}
.zl-objection .zl-h1{max-width:22ch;margin:0 auto}
.zl-objection .zl-label{margin-top:48px;display:block}

/* ------------------------------------------------------------ C-02 index list */
.zl-list{border-bottom:1px solid var(--rl)}
.zl-list > li{position:relative}
.zl-list > li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rl);transform-origin:left;transform:scaleX(1)}
.zl-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:baseline;padding:22px 0;color:var(--fg)}
.zl-row .zl-idx{grid-column:1/2}
.zl-row .nm{grid-column:2/6;font-size:var(--t-h3);letter-spacing:-.05em;line-height:1.06}
.zl-row .ds{grid-column:6/12;color:var(--mu);max-width:60ch}
.zl-row .ar{grid-column:12/13;justify-self:end}
.zl-row .nm .zl-tag{margin-left:12px;transform:translateY(-4px)}
.zl-list--tall .zl-row{padding:40px 0;align-items:start}
.zl-list--tall .zl-row .nm{grid-column:2/8;font-size:var(--t-h2);letter-spacing:-.02em;line-height:1}
.zl-list--tall .zl-row .ds{grid-column:8/12}
a.zl-row:hover .nm{color:var(--fg)}
.zl-list-foot{margin-top:32px;color:var(--mu);max-width:68ch}

/* ------------------------------------------------------------ C-09 statistics */
.zl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);border-top:1px solid var(--rl)}
.zl-stat{padding-top:28px;display:flex;flex-direction:column;gap:14px}
.zl-fig{font-size:var(--t-figure);line-height:1;letter-spacing:-.05em;color:var(--fg);font-variant-numeric:tabular-nums}
.zl-stat p{color:var(--tx);max-width:32ch}
.zl-src{font-size:var(--t-small);color:var(--mu)}
.zl-src a{border-bottom:1px solid var(--rl)}
.zl-src .cite{color:var(--mark)}
.zl-note{margin-top:32px;font-size:var(--t-small);color:var(--mu);max-width:80ch}

/* ------------------------------------------------------------ splits */
.zl-doc{row-gap:24px}
.zl-doc > .k{grid-column:1/4;min-width:0}
.zl-doc > .m{grid-column:5/13;min-width:0}
.zl-proof{row-gap:40px;align-items:center}
.zl-proof > .t{grid-column:1/6;display:flex;flex-direction:column;gap:28px}
.zl-proof > .v{grid-column:7/13}
.zl-proof.flip > .t{grid-column:8/13;order:2}
.zl-proof.flip > .v{grid-column:1/7;order:1}
.zl-proof img.still{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.zl-bul{display:flex;flex-direction:column;border-top:1px solid var(--rl)}
.zl-bul li{padding:16px 0;border-bottom:1px solid var(--rl);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--grid-gap)}
.zl-bul li b{font-weight:400;color:var(--fg)}
.zl-bul li span{color:var(--mu)}
.zl-bul.one li{grid-template-columns:1fr}

/* ------------------------------------------------------------ C-03 / C-04 pinned explainer */
.zl-tabs{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px}
.zl-tab{display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;padding:14px 16px;border:1px solid var(--rl);color:var(--fg)}
.zl-tab .zl-label{color:var(--fg)}
.zl-tab .num{font-family:var(--font-mono);font-size:32px;line-height:1;color:var(--fg2);font-variant-numeric:tabular-nums}
.zl-tab[aria-selected="true"]{border-color:var(--fg)}
.zl-tab[aria-selected="true"] .num{color:var(--mark)}
.zl-pin-head{display:flex;flex-direction:column;gap:20px;padding-bottom:28px}
.zl-pin-head .zl-h2{color:var(--fg2)}
.zl-panel{padding-top:40px}
.zl-panel + .zl-panel{margin-top:var(--space-module)}
.zl-panel-h{margin-bottom:20px}
.zl-panel-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:24px;align-items:start}
.zl-panel-in > .zl-frame{grid-column:1/9}
.zl-panel-in > .zl-cos{grid-column:9/13}
/* no-JS and narrow: tab strip is a static index */
.zl-pin .zl-tabs{pointer-events:none}
.zl-enh .zl-pin .zl-tabs{pointer-events:auto}
@media (min-width:768px){
  .zl-enh .zl-pin{height:calc(var(--n) * 100vh)}
  .zl-enh .zl-pin-stick{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:flex;flex-direction:column;padding-top:clamp(24px,4vh,48px);padding-bottom:24px}
  .zl-enh .zl-pin .zl-panel-h{display:none}
  .zl-enh .zl-panels{position:relative;flex:1;min-height:0}
  .zl-enh .zl-panel{position:absolute;inset:0;margin:0;padding-top:24px;opacity:0;visibility:hidden;transition:opacity 180ms linear,visibility 0s linear 180ms}
  .zl-enh .zl-panel.is-active{opacity:1;visibility:visible;transition:opacity 260ms var(--ease)}
  .zl-enh .zl-panel.is-active .zl-panel-in{animation:zl-rise 260ms var(--ease)}
  .zl-enh .zl-panel .zl-frame{max-height:100%;overflow:hidden}
  .zl-enh .zl-panel-in{height:100%}
  .zl-enh .zl-pin-head .zl-h1{font-size:clamp(34px,3.6vw,56px)}
  .zl-enh .zl-pin-head .zl-h2{font-size:clamp(24px,2.2vw,34px)}
}
@keyframes zl-rise{from{transform:translateY(12px)}to{transform:none}}

/* ------------------------------------------------------------ C-07 annotated UI frame */
.zl-frame{position:relative;border:1px solid var(--rl);background:var(--chapter-light);color:var(--z-body);--fg:var(--head-primary);--fg2:var(--head-secondary);--tx:var(--z-body);--mu:var(--z-muted);--rl:var(--rule);--mark:var(--accent-mark);--mark-text:var(--accent-text)}
.is-dark .zl-frame{border-color:var(--rule-on-dark)}
.zl-frame-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.zl-frame-bar .zl-label{color:var(--z-ink)}
.zl-frame-body{position:relative;padding:18px}
.zl-disc{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#fff;border:1px solid var(--z-ink);color:var(--z-ink);font:500 12px/22px var(--font-sans);text-align:center;transition:color 180ms var(--ease),border-color 180ms var(--ease)}
.zl-disc.on{color:var(--accent-mark);border-color:var(--accent-mark)}
.zl-cos{display:flex;flex-direction:column;gap:18px}
.zl-co{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;color:var(--tx)}
.zl-co .l{width:24px;height:24px;border-radius:50%;border:1px solid var(--fg);background:transparent;color:var(--fg);font:500 12px/22px var(--font-sans);text-align:center}
.zl-co.on .l{color:var(--mark);border-color:var(--mark)}
.zl-caption{margin-top:14px;font-size:var(--t-small);color:var(--mu)}

/* mock product UI inside frames — sample data, drawn in HTML so it stays sharp and readable */
.ui{font-size:13px;line-height:1.35;color:#1E2124}
.ui-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.ui-h b{font-weight:500;font-size:15px;color:#0B0B0C}
.ui-h span{color:#5C5F65;font-size:12px}
.ui-t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ui-t th{font-weight:400;text-align:left;color:#5C5F65;font-size:11px;text-transform:uppercase;letter-spacing:-.01em;padding:7px 8px;border-bottom:1px solid #E4E3E0;white-space:nowrap}
.ui-t td{padding:8px;border-bottom:1px solid #F2F1EE;vertical-align:top}
.ui-t td.r,.ui-t th.r{text-align:right}
.ui-chip{display:inline-block;font-size:11px;line-height:1;padding:4px 6px;border:1px solid #C9C9CD;color:#3A3A3C;white-space:nowrap}
.ui-chip.k{background:#0B0B0C;border-color:#0B0B0C;color:#fff}
.ui-chip.g{background:#F2F1EE;border-color:#F2F1EE}
.ui-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#0B0B0C;margin-right:6px;vertical-align:1px}
.ui-dot.s{background:transparent;box-sizing:border-box;border:1px solid #8E8E93}
.ui-cols{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:10px}
.ui-card{border:1px solid #E4E3E0;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ui-card .k{font-size:11px;text-transform:uppercase;color:#5C5F65;letter-spacing:-.01em}
.ui-card .v{font-size:22px;letter-spacing:-.04em;color:#0B0B0C;font-variant-numeric:tabular-nums}
.ui-q{border:1px solid #0B0B0C;padding:14px;display:flex;flex-direction:column;gap:10px}
.ui-q .why{color:#5C5F65;font-size:12px}
.ui-btns{display:flex;gap:8px}
.ui-btns span{font-size:12px;padding:7px 12px;border:1px solid #0B0B0C}
.ui-btns span:first-child{background:#0B0B0C;color:#fff}
.ui-bar{height:6px;background:#F2F1EE;position:relative}
.ui-bar i{position:absolute;left:0;top:0;bottom:0;background:#0B0B0C}
.ui-log li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:7px 0;border-bottom:1px solid #F2F1EE}
.ui-log li span:first-child{color:#5C5F65;font-variant-numeric:tabular-nums}
.ui-msg{display:flex;flex-direction:column;gap:8px}
.ui-msg p{max-width:80%;padding:8px 10px;background:#F2F1EE}
.ui-msg p.me{align-self:flex-end;background:#fff;border:1px solid #E4E3E0}
.ui-gantt{display:grid;grid-template-columns:110px minmax(0,1fr);row-gap:8px;align-items:center;font-size:12px}
.ui-gantt .tr{height:14px;position:relative;border-bottom:1px solid #F2F1EE}
.ui-gantt .tr i{position:absolute;top:2px;bottom:2px;background:#0B0B0C}
.ui-gantt .tr i.s{background:#fff;border:1px dashed #666}
.ui-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px}
.ui-mute{color:#666}
.ui-mono{font-family:var(--font-mono);font-size:12px}

/* ------------------------------------------------------------ C-05 rail, C-06 type-on, step sections */
.zl-rail{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:var(--t-index);color:var(--index-num);font-variant-numeric:tabular-nums}
.is-dark .zl-rail{color:var(--head-secondary-on-dark)}
.zl-rail .st{white-space:nowrap}
.zl-rail .st.on{color:var(--index-num-active)}
.is-dark .zl-rail .st.on{color:#fff}
.zl-rail .st.on::before{content:"[";color:var(--mark)}
.zl-rail .st.on::after{content:"]";color:var(--mark)}
.zl-rail .sg{flex:1;min-width:16px;max-width:96px;height:1px;background:var(--rl);position:relative;overflow:hidden}
.zl-rail .sg i{position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(var(--p,1))}
.zl-rail .sg.ahead i{transform:scaleX(0)}
.zl-step{padding:var(--space-module) 0}
.zl-step + .zl-step{border-top:1px solid var(--rl)}
.zl-step-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:40px;align-items:start}
.zl-step-t{grid-column:1/6;display:flex;flex-direction:column;gap:28px}
.zl-step-v{grid-column:7/13;display:flex;flex-direction:column;gap:16px}
.zl-step-v .zl-pill{align-self:flex-start}
@media (min-width:1120px){
  .zl-step{min-height:92vh}
  .zl-step-t,.zl-step-v{position:sticky;top:calc(var(--nav-h) + 48px)}
}
.zl-typeon .ch{transition:opacity 120ms linear}
.zl-typeon .ch.off{opacity:0}
.zl-how{border:1px solid var(--rl);padding:24px;background:var(--chapter-light);color:var(--z-body)}
.zl-how ol{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.zl-how li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.zl-how li .zl-idx{font-size:13px}
.zl-view[hidden]{display:none}

/* ------------------------------------------------------------ C-08 pill */
.zl-pill{display:inline-flex;border:1px solid var(--rl);border-radius:999px;padding:3px;gap:2px}
.zl-pill label{position:relative;cursor:pointer}
.zl-pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.zl-pill span{display:block;padding:8px 14px;border-radius:999px;font-size:var(--t-label);text-transform:uppercase;letter-spacing:-.022em;color:var(--mu)}
.zl-pill input:checked + span{background:var(--z-ink);color:#fff}
.is-dark .zl-pill input:checked + span{background:#fff;color:var(--z-ink)}
.zl-pill input:focus-visible + span{outline:2px solid var(--accent-focus);outline-offset:2px}
.zl-pill{display:none}
.zl-js .zl-pill{display:inline-flex}

/* ------------------------------------------------------------ C-10 spec table */
.zl-spec{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.zl-spec caption{text-align:left;padding-bottom:20px;color:var(--mu);font-size:var(--t-small)}
.zl-spec th,.zl-spec td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-bottom:1px solid var(--rl);font-weight:400}
.zl-spec tr:first-child > *{border-top:1px solid var(--rl)}
.zl-spec th[scope="row"]{font-size:var(--t-label);letter-spacing:-.022em;text-transform:uppercase;color:var(--fg);padding-top:20px;width:22%}
.zl-spec thead th{font-size:var(--t-label);letter-spacing:-.022em;text-transform:uppercase;color:var(--mu)}
.zl-spec td{color:var(--tx)}
.zl-spec td.z{color:var(--fg)}
.zl-spec .sub{display:block;color:var(--mu);font-size:var(--t-small);margin-top:4px}
.zl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.zl-scroll .zl-spec{min-width:880px}
.zl-scroll .zl-spec--md{min-width:720px}

/* ------------------------------------------------------------ C-12 case card, C-13 dual CTA */
.zl-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.zl-cases.one{grid-template-columns:minmax(0,1fr)}
.zl-case{display:flex;flex-direction:column;gap:20px;padding:32px;min-height:280px;background:var(--chapter-soft);color:var(--z-body)}
.is-soft .zl-case{background:var(--chapter-light)}
.zl-case .zl-h3{color:var(--head-primary);max-width:20ch}
.zl-case p{color:var(--z-muted);max-width:52ch}
.zl-case .go{margin-top:auto;display:flex;justify-content:space-between;align-items:center;color:var(--head-primary)}
.zl-case .zl-label{color:var(--z-muted)}
.zl-dual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.zl-dual a{min-height:140px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;font-size:var(--t-h2);letter-spacing:-.02em;line-height:1}
.zl-dual a.l{background:var(--chapter-soft);color:var(--head-primary)}
.zl-dual a.d{background:var(--chapter-dark);color:#fff;outline:1px solid var(--rule-on-dark);outline-offset:-1px}
.zl-dual a.l:hover .zl-arrow{color:var(--accent-mark)}
.zl-dual a.d:hover .zl-arrow{color:var(--accent-mark-dark)}
.zl-closing .zl-dual a.d{outline:1px solid var(--rule-on-dark)}

/* ------------------------------------------------------------ statement, risk ramp, diagrams */
.zl-statement{padding:var(--space-chapter) 0}
.zl-statement .zl-h2{max-width:28ch}
.zl-statement .zl-label{display:block;margin-bottom:28px}
.zl-statement p.zl-body{margin-top:28px}
.zl-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap)}
.zl-tier{display:flex;flex-direction:column;gap:16px;padding-top:20px;border-top:4px solid var(--c)}
.zl-tier .zl-h3{color:var(--fg)}
.zl-tier p{color:var(--tx)}
.zl-tier .ex{color:var(--mu);font-size:var(--t-small)}
.zl-tier:nth-child(1){--c:#C7C7CC}.zl-tier:nth-child(2){--c:#8E8E93}.zl-tier:nth-child(3){--c:#505054}.zl-tier:nth-child(4){--c:#0B0B0C}
.zl-diagram{width:100%;height:auto;color:var(--fg)}
.zl-diagram text{font-family:var(--font-sans);fill:currentColor}
.zl-diagram .mu{fill:var(--mu)}
.zl-diagram .ln{stroke:currentColor;fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.zl-diagram .lm{stroke:var(--rl);fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.zl-diagram .bx{fill:var(--chapter-light);stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.is-soft .zl-diagram .bx{fill:var(--chapter-soft)}
.is-dark .zl-diagram .bx{fill:var(--chapter-dark)}
.zl-diagram .lyr.on .bx{stroke-width:2}
.zl-diagram .mono{font-family:var(--font-mono)}

.zl-steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap);border-top:1px solid var(--rl)}
.zl-steps4 > li{padding-top:20px;display:flex;flex-direction:column;gap:12px}
.zl-steps4 > li b{font-weight:400;color:var(--fg);font-size:22px;letter-spacing:-.03em;line-height:1.1}
.zl-steps4 > li span{color:var(--mu)}
.zl-steps4.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.zl-steps4.c5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ------------------------------------------------------------ C-14 film */
.zl-film{position:relative;min-height:min(92vh,960px);display:flex;align-items:flex-end;overflow:hidden;background:var(--chapter-dark);color:#fff}
.zl-film-media{position:absolute;inset:0}
.zl-film-media img,.zl-film-media video{width:100%;height:100%;object-fit:cover}
.zl-film-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,0) 72%)}
.zl-film.right .zl-film-scrim{background:linear-gradient(270deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 42%,rgba(0,0,0,0) 72%)}
.zl-film .zl-wrap{position:relative;width:100%;padding-top:var(--space-module);padding-bottom:var(--space-module)}
.zl-film-text{width:min(100%,40%);min-width:min(100%,460px);display:flex;flex-direction:column;gap:24px}
.zl-film.right .zl-film-text{margin-left:auto}
.zl-film .zl-h1{color:#fff}
.zl-film .zl-body{color:#E6E6EA;max-width:46ch}
.zl-film .zl-ghost{color:#fff;align-self:flex-start}
.zl-film .zl-idx,.zl-film .zl-label{color:#C9CAD2}

/* ------------------------------------------------------------ prose (case studies, legal) */
.zl-prose{max-width:68ch;min-width:0}
.zl-prose h2{font-size:var(--t-h2);font-weight:400;letter-spacing:-.02em;line-height:1;color:var(--fg);margin:72px 0 28px}
.zl-prose h3{font-size:var(--t-h3);font-weight:400;letter-spacing:-.05em;line-height:1.06;color:var(--fg);margin:48px 0 20px}
.zl-prose p,.zl-prose ul,.zl-prose ol{margin:0 0 1em}
.zl-prose ul li,.zl-prose ol li{padding:10px 0;border-top:1px solid var(--rl)}
.zl-prose ul,.zl-prose ol{border-bottom:1px solid var(--rl)}
.zl-prose a{border-bottom:1px solid var(--rl)}
.zl-prose strong{font-weight:500;color:var(--fg)}
.zl-prose .zl-scroll{margin:24px 0 32px}
.zl-toc{display:flex;flex-direction:column;gap:2px}
.zl-toc a{padding:8px 0;border-top:1px solid var(--rl);color:var(--mu);font-size:15px}
.zl-toc a:hover{color:var(--fg)}
.zl-back{display:inline-flex;gap:10px;color:var(--mu)}
.zl-back:hover{color:var(--fg)}

/* ------------------------------------------------------------ contact form */
.zl-form{display:flex;flex-direction:column;gap:24px;max-width:720px}
.zl-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.zl-field{display:flex;flex-direction:column;gap:10px}
.zl-field label{font-size:var(--t-label);text-transform:uppercase;letter-spacing:-.022em;color:var(--z-muted)}
.zl-field input,.zl-field textarea{font:inherit;color:var(--z-body);background:#fff;border:1px solid #C9C9CD;border-radius:0;padding:14px 14px}
.zl-field textarea{min-height:180px;resize:vertical}
.zl-field input:focus,.zl-field textarea:focus{outline:2px solid var(--accent-focus);outline-offset:0;border-color:transparent}
.zl-form .hp{position:absolute;left:-9999px}
.zl-form button.zl-btn{align-self:flex-start;font-size:16px;padding:16px 22px}
.zl-form-msg{padding:16px;border:1px solid var(--rule)}

/* ------------------------------------------------------------ footer */
.zl-foot{background:#000;color:#9A9BA6;padding:56px 0 40px;border-top:1px solid #26262C;font-size:15px}
.zl-foot .zl-grid{row-gap:32px}
.zl-foot .c1{grid-column:1/5;display:flex;flex-direction:column;gap:16px}
.zl-foot .c1 .zl-word{color:#fff;font-size:34px}
.zl-foot .c{grid-column:span 2;display:flex;flex-direction:column;gap:10px}
.zl-foot .c .zl-label{color:#fff;margin-bottom:6px}
.zl-foot a:hover{color:#fff}
.zl-foot .base{grid-column:1/13;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid #26262C;font-size:13px}

/* ------------------------------------------------------------ motion: reveal and rule-draw */
.zl-js .zl-rv{opacity:0;transform:translateY(16px);transition:opacity 520ms var(--ease),transform 520ms var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.zl-js .zl-rv.in{opacity:1;transform:none}
.zl-js .zl-list.zl-draw > li::before{transform:scaleX(0);transition:transform 700ms var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.zl-js .zl-list.zl-draw.in > li::before{transform:scaleX(1)}

/* ------------------------------------------------------------ breakpoints */
@media (max-width:1119px){
  .zl-proof > .t,.zl-proof > .v,.zl-proof.flip > .t,.zl-proof.flip > .v{grid-column:1/13;order:0}
  .zl-step-t,.zl-step-v{grid-column:1/13}
  .zl-panel-in > .zl-frame,.zl-panel-in > .zl-cos{grid-column:1/13}
  .zl-enh .zl-panel-in > .zl-cos{display:none}
  .zl-hero.has-media .zl-hero-text,.zl-hero.has-media .zl-hero-media{grid-column:1/13}
  .zl-hero.has-media .zl-hero-media{margin-top:40px}
  .zl-tiers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .zl-steps4.c5{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}
  .zl-foot .c1{grid-column:1/13}
  .zl-foot .c{grid-column:span 3}
}
@media (max-width:767px){
  :root{--nav-h:56px}
  .zl-head .zl-head-k,.zl-head .zl-head-m,.zl-doc > .k,.zl-doc > .m{grid-column:1/13}
  .zl-row{grid-template-columns:40px minmax(0,1fr) 24px;row-gap:6px}
  .zl-row .zl-idx{grid-column:1}
  .zl-row .nm,.zl-list--tall .zl-row .nm{grid-column:2}
  .zl-row .ds,.zl-list--tall .zl-row .ds{grid-column:2}
  .zl-row .ar{grid-column:3;grid-row:1}
  .zl-stats,.zl-cases,.zl-dual,.zl-tiers,.zl-steps4,.zl-steps4.c3,.zl-steps4.c5,.zl-form .row2{grid-template-columns:minmax(0,1fr)}
  .zl-stats{row-gap:32px}
  .zl-tabs{grid-template-columns:minmax(0,1fr)}
  .zl-pin .zl-tabs{display:none}
  .zl-dual a{min-height:112px;padding:0 24px}
  .zl-bul li{grid-template-columns:1fr;gap:6px}
  .zl-disc{display:none}
  .zl-frame-body{padding:14px;overflow-x:auto}
  .ui-split,.ui-cols{grid-template-columns:minmax(0,1fr)}
  .zl-film-text{width:100%;min-width:0}
  .zl-film-scrim,.zl-film.right .zl-film-scrim{background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.1) 100%)}
  .zl-nav .zl-btn{padding:12px 12px;font-size:13px}
  .zl-nav .zl-btn .zl-arrow{display:none}
  .zl-menu-btn .t{display:none}
  .zl-word{font-size:23px}
  .zl-budget{display:none}
  .zl-foot .c{grid-column:span 6}
  .zl-case{padding:24px;min-height:0}
  .zl-spec th[scope="row"]{width:36%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .zl-js .zl-rv{opacity:1;transform:none}
  .zl-js .zl-list.zl-draw > li::before{transform:none}
  .zl-typeon .ch.off{opacity:1}
}
@media print{.zl-nav,.zl-menu,.zl-pill,.zl-film-media{display:none}.zl-ch,.zl-film{background:#fff!important;color:#000}}

/* ------------------------------------------------------------ landing: hands hero
   The founder's hero image (tools/art/hero-hands-supplied.webp, its own lettering removed) covers the first
   screen: a human hand reaching down from the upper right to an AI agent's hand made of pixels on the lower left.
   The words sit in the bottom-right corner, set as the image set them: the name in spaced capitals, the line under it. */
.zl-hands{position:relative;min-height:100svh;background:#000;color:#fff;overflow:hidden}
.zl-hands-art{position:absolute;inset:0}
.zl-hands-art picture{position:absolute;inset:0;display:block}
.zl-hands-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* the words belong to the picture's corner, which runs edge to edge, so they ignore the page's 1440px column and
   share the header's margins instead */
.zl-hands-in{position:relative;z-index:2;max-width:none;min-height:100svh;display:grid;align-items:end;justify-items:end;
  padding-top:calc(var(--nav-h) + 32px);padding-bottom:clamp(40px,10vh,120px)}
/* the line belongs to the picture, which runs edge to edge, so on wide screens it keeps to the screen's gutter
   rather than the centred content frame, which would pull it into the middle of the picture where the hands meet */
/* the line, at Palantir's statement scale: large, tight leading, negative tracking, one grotesque; a step
   heavier than their regular weight, so it carries on the black */
/* three authored lines, right-aligned on the frame's edge; each rises out of its own mask in turn, and the
   audience, "for enterprises.", lands last in the brand orange */
.zl-hands-line{margin:0;text-align:right;font-family:var(--font-sans);font-weight:500;
  font-size:clamp(32px,min(3.6vw,7vh),68px);line-height:1.04;letter-spacing:-.04em;color:#F2F2F0}
/* sized so the block keeps at least 54px clear of the agent's hand at every laptop size, 1280x720 to 2560x1440
   (measured against the artwork's lit pixels, not guessed) */
.zl-hands-line .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.zl-hands-line .ln > span{display:inline-block;text-wrap:balance;animation:zl-line-up 1250ms var(--ease-out) both}   /* a line that must wrap splits evenly, never orphaning a word */
.zl-hands-line .ln:nth-child(2) > span{animation-delay:120ms}
.zl-hands-line .ln:nth-child(3) > span{animation-delay:240ms}
.zl-hands-line .o{color:var(--zl-orange)}
@keyframes zl-line-up{from{transform:translateY(110%)}to{transform:none}}
@keyframes zl-rise-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ landing: the ecosystem, on grain light */
.zl-eco{position:relative;background:#0A0A0B;color:#fff;overflow:hidden;--fg:#fff;--fg2:#8A8D93;--tx:#D9DAE0;--mu:#8A8D93;--rl:#2A2A30;--mark:var(--accent-mark-dark)}
.zl-eco::before{content:"";position:absolute;inset:-10%;pointer-events:none;
  background:radial-gradient(60% 40% at 12% 8%,rgba(255,255,255,.16),transparent 70%),radial-gradient(55% 45% at 88% 92%,rgba(255,255,255,.13),transparent 70%),radial-gradient(40% 30% at 70% 40%,rgba(255,255,255,.04),transparent 70%)}
.zl-eco::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.zl-eco .zl-wrap{position:relative;z-index:1}
.zl-eco-stack{margin-top:var(--space-module);display:flex;flex-direction:column;gap:0;position:relative}
.zl-eco-layer{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:var(--grid-gap);align-items:center;padding:36px 32px;border:1px solid #2A2A30;background:rgba(10,10,11,.55);transition:border-color 240ms linear,background-color 240ms linear}
.zl-eco-layer + .zl-eco-layer{margin-top:56px}
.zl-eco-layer:hover,.zl-eco-layer:focus-within{border-color:#6B6C78;background:rgba(30,31,43,.7)}
.zl-eco-layer .nm{display:flex;flex-direction:column;gap:10px}
.zl-eco-layer .nm b{font-weight:400;font-size:var(--t-h2);letter-spacing:-.03em;line-height:1}
.zl-eco-layer .ds{color:#B9BAC4;max-width:60ch}
.zl-eco-link{display:inline-flex;gap:10px;align-items:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border:1px solid #4A4B55;padding:12px 16px;white-space:nowrap}
.zl-eco-link:hover{border-color:#fff}
/* the flows between layers: data rises, decisions come back down */
.zl-flow{position:absolute;left:50%;height:56px;width:120px;margin-left:-60px;top:100%;pointer-events:none}
.zl-flow i{position:absolute;top:0;bottom:0;width:1px;background:#3A3B45}
.zl-flow i:nth-child(1){left:30%}.zl-flow i:nth-child(2){left:70%}
.zl-flow i::after{content:"";position:absolute;left:-2px;width:5px;height:5px;border-radius:50%;background:#fff;animation:zl-up 2.4s linear infinite}
.zl-flow i:nth-child(2)::after{animation-name:zl-down;animation-delay:-1.2s;background:#A9AAB4}
@keyframes zl-up{from{transform:translateY(56px);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateY(-4px);opacity:0}}
@keyframes zl-down{from{transform:translateY(-4px);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateY(56px);opacity:0}}
.zl-eco-legend{display:flex;gap:28px;margin-top:28px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8A8D93}
.zl-eco-legend span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px;background:#fff;vertical-align:1px}
.zl-eco-legend span+span::before{background:#A9AAB4}

/* ------------------------------------------------------------ landing: the land, one screen */
.zl-land{position:relative;min-height:100vh;background:#000;color:#fff;overflow:hidden;display:flex;align-items:flex-start;--fg:#fff;--fg2:#8A8D93;--tx:#D9DAE0;--mu:#8A8D93;--rl:#2A2A30;--mark:var(--accent-mark-dark)}
.zl-land canvas{position:absolute;left:0;right:0;bottom:0;width:100%;height:50%;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%)}
.zl-land .zl-wrap{position:relative;z-index:1;width:100%;padding-top:calc(var(--nav-h) + 56px);padding-bottom:calc(50vh - 40px)}
.zl-land-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:40px;align-items:start}
.zl-land-t{grid-column:1/6;display:flex;flex-direction:column;gap:24px}
.zl-land-t .zl-h1{color:#fff}
.zl-layers{grid-column:7/13;border-top:1px solid #2A2A30}
.zl-layers li{border-bottom:1px solid #2A2A30}
.zl-layers button{width:100%;display:grid;grid-template-columns:44px 120px minmax(0,1fr);gap:16px;align-items:baseline;text-align:left;padding:18px 0;color:#8A8D93;transition:color 200ms linear}
.zl-layers button .k{font-family:var(--font-mono);font-size:13px}
.zl-layers button .as{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.zl-layers button .nm{font-size:26px;letter-spacing:-.03em;line-height:1;color:#C9CAD2}
.zl-layers li.on button,.zl-layers button:hover{color:#fff}
.zl-layers li.on button .nm{color:#fff}
.zl-layers .ex{padding:0 0 20px 180px;color:#B9BAC4;max-width:60ch}
.zl-js .zl-layers li:not(.on) .ex{display:none}
.zl-land-hint{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6B6C78}

/* demo frame on product pages */
.zl-demo-frame{margin-top:var(--space-module);border:1px solid var(--rule);background:#fff}
.zl-demo-frame iframe{display:block;width:100%;height:860px;border:0}

/* full-bleed autoplay film hero */
.zl-film.is-hero{min-height:100vh}
.zl-film.is-hero .zl-film-text{width:min(100%,52%);min-width:min(100%,600px)}
.zl-film.is-hero .zl-film-scrim{background:linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.05) 80%)}
.zl-film.is-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:160px;z-index:1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0))}
.zl-film.is-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media (max-width:1119px){
  .zl-land-t,.zl-layers{grid-column:1/13}
  .zl-eco-layer{grid-template-columns:1fr;padding:28px 22px}
}
@media (max-width:767px){
  .zl-layers button{grid-template-columns:36px minmax(0,1fr);row-gap:4px}
  .zl-layers button .as{grid-column:2}
  .zl-layers button .nm{grid-column:2}
  .zl-layers .ex{padding-left:52px}
  .zl-demo-frame iframe{height:1100px}
}
@media (prefers-reduced-motion:reduce){.zl-flow i::after{animation:none;opacity:0}}

/* ------------------------------------------------------------ the closing action */
.zl-closing{padding:var(--space-module) 0}
.zl-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;row-gap:12px;padding:44px 0;border-top:1px solid var(--rule-on-dark);border-bottom:1px solid var(--rule-on-dark);color:#fff}
.zl-cta .t{font-size:var(--t-display);letter-spacing:-.05em;line-height:1}
.zl-cta .s{grid-column:1;grid-row:2;color:var(--head-secondary-on-dark)}
.zl-cta .zl-arrow{grid-column:2;grid-row:1/3;font-size:var(--t-h1)}
.zl-cta:hover .zl-arrow,.zl-cta:focus-visible .zl-arrow{color:var(--accent-mark-dark);transform:translateX(10px)}

/* ------------------------------------------------------------ opening screen over a black-and-white photograph */
.zl-ihero{position:relative;min-height:100vh;display:flex;align-items:flex-end;background:#000;color:#fff;overflow:hidden;--fg:#fff;--fg2:#A9AAB4;--tx:#D9DAE0;--mu:#A9AAB4;--rl:#2A2A30}
.zl-ihero-media{position:absolute;inset:0}
.zl-ihero-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.zl-ihero--bg .zl-ihero-media img{opacity:.42}
.zl-ihero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.25) 100%),linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0) 45%)}
.zl-ihero--side .zl-ihero-media{left:auto;width:62%}
.zl-ihero--side .zl-ihero-media img{object-fit:contain;object-position:100% 50%}
.zl-ihero--side .zl-ihero-shade{background:linear-gradient(90deg,#000 0%,#000 36%,rgba(0,0,0,.35) 58%,rgba(0,0,0,0) 80%)}
@media (min-width:900px){
  .zl-ihero--side{align-items:center}
  .zl-ihero--side .zl-ihero-media{width:58%;top:var(--nav-h)}
  .zl-ihero--side .zl-ihero-text{max-width:min(46%,620px)}
  .zl-ihero--side .zl-display{font-size:clamp(40px,4.4vw,66px)}
}
.zl-ihero .zl-wrap{position:relative;width:100%;padding-top:calc(var(--nav-h) + 48px);padding-bottom:clamp(56px,10vh,112px)}
.zl-ihero-text{max-width:min(100%,980px);display:flex;flex-direction:column;gap:28px}
.zl-ihero-k{display:flex;gap:16px;align-items:baseline}
.zl-ihero-k .zl-idx,.zl-ihero-k .zl-label{color:#A9AAB4}
.zl-ihero .zl-display{color:#fff;font-size:clamp(40px,4.9vw,74px)}
.zl-ihero .zl-display .b{color:#A9AAB4}
.zl-ihero .zl-lead{color:#D9DAE0;max-width:44ch}
@media (max-width:899px){
  .zl-ihero--side .zl-ihero-media{width:100%;top:var(--nav-h);bottom:auto;height:46%}
  .zl-ihero--side .zl-ihero-media img{object-position:50% 50%}
  .zl-ihero--side .zl-ihero-shade{background:linear-gradient(0deg,#000 0%,#000 50%,rgba(0,0,0,0) 62%)}
}

/* library list */
.zl-lib li a{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.2fr) 24px;gap:var(--grid-gap);align-items:baseline;padding:32px 0;border-top:1px solid var(--rl);color:var(--fg)}
.zl-lib{border-bottom:1px solid var(--rl)}
.zl-lib .k{font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.zl-lib .nm{font-size:var(--t-h3);letter-spacing:-.04em;line-height:1.06}
.zl-lib .ds{color:var(--mu)}
.zl-lib li a:hover .zl-arrow{color:var(--mark);transform:translateX(6px)}
@media (max-width:899px){.zl-lib li a{grid-template-columns:minmax(0,1fr) 24px}.zl-lib .k,.zl-lib .nm,.zl-lib .ds{grid-column:1}.zl-lib .zl-arrow{grid-column:2;grid-row:1}}

/* three parties (supply chain) */
.zl-parties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.zl-party{border-top:1px solid var(--rl);padding-top:24px;display:flex;flex-direction:column;gap:14px}
.zl-party .zl-h3{color:var(--fg)}
.zl-party p{color:var(--tx)}
.zl-party .fact{font-size:var(--t-small);color:var(--mu)}
.zl-party .fact a{border-bottom:1px solid var(--rl)}
@media (max-width:899px){.zl-parties{grid-template-columns:minmax(0,1fr);row-gap:40px}}
.zl-flow i:nth-child(2)::after{background:var(--accent-mark-dark)}

/* ------------------------------------------------------------ Phase 3 */
/* status badge: small, neutral, secondary */
.zl-badge{display:inline-block;vertical-align:middle;font-size:11px;line-height:1;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px 4px;border:1px solid currentColor;opacity:.72;white-space:nowrap;font-weight:400}
.zl-badge--sm{font-size:10px;padding:3px 6px 2px;margin-left:6px}
.zl-eco-layer .nm .zl-badge{align-self:flex-start;color:#C9CAD2}

.zl-btn-light{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 20px;background:#fff;color:#0B0B0C;font-size:15px;border-radius:2px}
.zl-btn-light:hover .zl-arrow,.zl-btn-light:focus-visible .zl-arrow{color:var(--accent-mark)}

/* agent-ready section */
.zl-ready-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap);row-gap:32px}
.zl-ready-pts li{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--rl);padding-top:20px}
.zl-ready-pts b{font-weight:400;font-size:22px;letter-spacing:-.03em;line-height:1.1;color:var(--fg)}
.zl-ready-pts span:last-child{color:var(--mu)}
.zl-ready-ex{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;border-top:1px solid var(--rl)}
.zl-ready-ex li{display:flex;flex-direction:column;gap:10px;padding-top:16px;color:var(--tx);font-size:15px}
@media (max-width:899px){.zl-ready-pts,.zl-ready-ex{grid-template-columns:minmax(0,1fr)}}

/* footer: five clear columns and a legal row */
.zl-foot{padding:72px 0 40px}
.zl-foot-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(5,minmax(0,1fr));column-gap:var(--grid-gap);row-gap:40px}
.zl-foot .c1{grid-column:auto;max-width:34ch}
.zl-foot .c{grid-column:auto;display:block}
.zl-foot .c ul{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.zl-foot .c .zl-label{margin-bottom:0}
.zl-foot .base{margin-top:56px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:24px;border-top:1px solid #26262C;font-size:13px}
.zl-foot .base nav{display:flex;gap:24px}
.zl-foot a:focus-visible{outline-color:var(--accent-mark-dark)}
@media (max-width:1119px){.zl-foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}.zl-foot .c1{grid-column:1/-1}}
@media (max-width:599px){.zl-foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Library: the cover image fills the whole opening screen */
.zl-ihero.is-cover{min-height:100svh}   /* the photograph is the screen, not a band across three quarters of it */
.zl-ihero.is-cover .zl-ihero-media img{opacity:.55;object-position:var(--cover-pos,50% 45%)}
.zl-ihero.is-cover .zl-ihero-shade{background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.38) 55%,rgba(0,0,0,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 50%)}
.zl-film.is-hero .zl-display{font-size:clamp(38px,4.4vw,68px)}
.zl-film.is-hero .zl-film-text{width:min(100%,58%)}
.zl-film.is-hero .zl-lead{max-width:48ch}
.zl-ihero::before{content:"";position:absolute;left:0;right:0;top:0;height:160px;z-index:1;pointer-events:none;background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,0))}


/* ------------------------------------------------------------ hands hero: phones and tablets
   A 16:9 picture cannot fill a tall screen without cutting the hands off, so below 900px the picture is a band
   under the header, cropped to 4:3 to keep the hands large, and the words follow it on black. */
@media (max-width:899px){
  .zl-hands{min-height:0;display:flex;flex-direction:column}
  .zl-hands-art{position:relative;inset:auto;margin-top:var(--nav-h);aspect-ratio:4/3}
  .zl-hands-in{width:100%;min-height:0;padding-top:28px;padding-bottom:56px}
  .zl-hands-in{justify-items:start}
  .zl-hands-line{text-align:left;font-size:clamp(30px,8.4vw,52px)}
}
@media (max-height:620px) and (min-width:900px){
  .zl-hands,.zl-hands-in{min-height:560px}
}
@media (prefers-reduced-motion:reduce){
  .zl-hands-line .ln > span{animation:none}
}

/* ------------------------------------------------------------ brand orange, used deliberately
   One pair of tokens, already defined at the top of this file. Orange marks the spine of the document —
   the chapter numerals, the steps of the readiness pipeline and the arrow on the primary action — and nothing else.
   It is never a surface and never body copy. */
.zl-head-k .zl-idx,.zl-eco-layer .nm .zl-idx,.zl-pipe .zl-idx{color:var(--accent-text)}
.is-dark .zl-head-k .zl-idx,.zl-eco .zl-head-k .zl-idx,.zl-eco-layer .nm .zl-idx,
.zl-film .zl-head-k .zl-idx,.zl-hands .zl-idx{color:var(--accent-mark-dark)}
.zl-btn-light .zl-arrow{color:var(--accent-mark)}

/* ------------------------------------------------------------ the readiness pipeline (home 01)
   Four steps on one line, joined by a single rule: a progression, not four cards. */
.zl-pipe-wrap{margin-top:var(--space-module)}
.zl-pipe-wrap > .zl-label{display:block;margin-bottom:28px}
.zl-pipe-wrap .zl-small{margin-top:28px;color:var(--mu)}
.zl-pipe-link{margin-top:32px}
.zl-pipe{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:40px;position:relative}
.zl-pipe li{border-top:1px solid var(--rl);padding-top:22px;position:relative;gap:12px}
.zl-pipe li::before{content:"";position:absolute;top:-1px;left:0;width:28px;height:1px;background:var(--accent-mark)}
.zl-pipe .zl-idx{font-size:13px;letter-spacing:.02em}
.zl-pipe b{font-size:21px}
@media (max-width:1119px){.zl-pipe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.zl-pipe{grid-template-columns:minmax(0,1fr);row-gap:28px}}

/* ------------------------------------------------------------ progressive disclosure
   Used for the infrastructure page's technical detail: one rule per question, no boxes, no chevrons
   drawn as images. The whole answer is in the HTML whether or not the panel is open. */
.zl-disclose-set{border-top:1px solid var(--rl)}
.zl-disclose{border-bottom:1px solid var(--rl)}
.zl-disclose > summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:26px 0;font-size:clamp(19px,1.5vw,24px);letter-spacing:-.025em;line-height:1.25;color:var(--fg)}
.zl-disclose > summary::-webkit-details-marker{display:none}
.zl-disclose > summary > span{flex:1;max-width:46ch}
.zl-disclose > summary > i{flex:none;position:relative;width:16px;height:16px;align-self:center}
.zl-disclose > summary > i::before,.zl-disclose > summary > i::after{content:"";position:absolute;background:var(--accent-mark);
  transition:transform 240ms var(--ease),opacity 240ms var(--ease)}
.zl-disclose > summary > i::before{left:0;right:0;top:7px;height:2px}
.zl-disclose > summary > i::after{top:0;bottom:0;left:7px;width:2px}
.zl-disclose[open] > summary > i::after{transform:scaleY(0);opacity:0}
.zl-disclose > summary:hover{color:var(--mark-text,var(--accent-text))}
.zl-disclose .bd{padding:0 0 30px;max-width:72ch;display:flex;flex-direction:column;gap:16px;color:var(--tx)}
@media (prefers-reduced-motion:reduce){.zl-disclose > summary > i::before,.zl-disclose > summary > i::after{transition:none}}


/* ------------------------------------------------------------ narrow-screen fixes found in testing
   A two-column definition table cannot shrink past its own words, so below 600px each row becomes a block.
   The step rail's labels are set not to wrap, so at the narrowest widths they are replaced by the numerals alone. */
@media (max-width:599px){
  :not(.zl-scroll) > table.zl-spec,:not(.zl-scroll) > table.zl-spec tbody,:not(.zl-scroll) > table.zl-spec tr,
  :not(.zl-scroll) > table.zl-spec th,:not(.zl-scroll) > table.zl-spec td{display:block;width:auto}
  :not(.zl-scroll) > table.zl-spec tr{border-top:1px solid var(--rl);padding:16px 0}
  :not(.zl-scroll) > table.zl-spec th,:not(.zl-scroll) > table.zl-spec td{border:0;padding:0}
  :not(.zl-scroll) > table.zl-spec th[scope="row"]{padding-bottom:6px}
  :not(.zl-scroll) > table.zl-spec caption{padding-bottom:16px}
}
@media (max-width:399px){
  .zl-rail{gap:6px;font-size:14px}
  .zl-rail .sg{min-width:8px}
}


/* ------------------------------------------------------------ footer, on pitch black
   More air between the columns, a larger wordmark, and links big enough to read and to tap. */
.zl-foot .c1 .zl-word{font-size:clamp(36px,3.2vw,46px);letter-spacing:-.04em}
.zl-foot .c1 p{max-width:36ch;line-height:1.5;color:#8A8D93}
.zl-foot .c1 a:not(.zl-word){color:#D9DAE0;border-bottom:1px solid #3A3A42;padding-bottom:1px}   /* the wordmark is a link too, and takes no underline */
.zl-foot .c1 a:hover{border-bottom-color:#fff}
.zl-foot-top{row-gap:56px}
.zl-foot .c ul{gap:14px}
.zl-foot .c ul a{display:inline-block;padding:2px 0;color:#9A9BA6}
.zl-foot .c ul a:hover{color:#fff}
.zl-foot .base{color:#6E6F7A}
.zl-foot .base a:hover{color:#fff}
@media (max-width:899px){.zl-foot{padding:64px 0 32px}.zl-foot-top{row-gap:44px}}

/* Reference lists print their URLs in full; a long one must wrap rather than widen the page. */
.zl-prose a,.zl-prose li,.zl-src a,.zl-note a{overflow-wrap:anywhere}


/* A wide table scrolls inside its own container. The caption sits outside it so it wraps to the screen,
   and below 900px a hint and a fade at the right edge say that there is more to the side. */
.zl-table-cap{padding-bottom:20px;color:var(--mu);font-size:var(--t-small);max-width:72ch}
.zl-scroll{position:relative}
@media (max-width:899px){
  .zl-scroll{--fade:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);-webkit-mask-image:var(--fade);mask-image:var(--fade)}
  .zl-scroll::after{content:"Scroll sideways for the full table";display:block;padding-top:12px;
    font-size:var(--t-label);letter-spacing:-.022em;text-transform:uppercase;color:var(--mu);position:sticky;left:0}
}


/* Below 600px a wide comparison table is not scrolled sideways: each row becomes one block,
   with every value labelled by its column. The scroller, its fade and its hint are switched off. */
@media (max-width:599px){
  .zl-scroll{-webkit-mask-image:none;mask-image:none;overflow-x:visible}
  .zl-scroll::after{content:none}
  .zl-scroll > .zl-spec,.zl-scroll > .zl-spec tbody,.zl-scroll > .zl-spec tr,.zl-scroll > .zl-spec td{display:block;width:auto;min-width:0}
  .zl-scroll > .zl-spec{min-width:0}
  .zl-scroll > .zl-spec thead{display:none}
  .zl-scroll > .zl-spec tr{border-top:1px solid var(--rl);padding:22px 0 18px}
  .zl-scroll > .zl-spec th[scope="row"]{display:block;width:auto;border:0;padding:0 0 12px}
  .zl-scroll > .zl-spec td{border:0;padding:0 0 12px}
  .zl-scroll > .zl-spec td:last-child{padding-bottom:0}
  .zl-scroll > .zl-spec td[data-label]::before{content:attr(data-label);display:block;margin-bottom:3px;
    font-size:var(--t-label);letter-spacing:-.022em;text-transform:uppercase;color:var(--mu)}
}

/* ------------------------------------------------------------ the deck's "But": a short orange rule,
   then the sentence that turns the page, with its first word in the brand orange. */
.zl-but{margin-top:clamp(48px,6vw,88px);max-width:30ch;font-size:var(--t-h2);font-weight:500;line-height:1.1;
  letter-spacing:-.03em;color:var(--fg)}
.zl-but::before{content:"";display:block;width:64px;height:2px;background:var(--zl-orange);margin-bottom:clamp(20px,2.4vw,30px)}
.zl-but > span{color:var(--zl-orange)}
@media (max-width:899px){.zl-but{max-width:none}}

/* ------------------------------------------------------------ three-column blocks, set as the decks set them:
   a rule over each column rather than one rule across, the first of them in the brand orange, and the
   column headings in orange wherever they sit on the black. */
.zl-steps4{border-top:0}
.zl-steps4 > li{border-top:1px solid var(--rl);padding-top:18px}
.zl-steps4 > li:first-child{border-top-color:var(--zl-orange)}
.is-dark .zl-steps4 > li b{color:var(--zl-orange)}
.zl-steps4 > li b{font-weight:500}
@media (max-width:899px){
  .zl-steps4 > li:first-child{border-top-color:var(--zl-orange)}
}

/* the second paragraph and the action under an image hero's lead */
.zl-ihero .zl-body{color:#D9DAE0;max-width:46ch}
.zl-ihero-foot{margin-top:4px}

/* ------------------------------------------------------------ the transformation chart (deck p.7) */
.zl-gap{margin:clamp(36px,4.4vw,56px) 0 0;max-width:720px}
.zl-gap svg{width:100%;height:auto;display:block}
.zl-gap figcaption{margin-top:20px;font-size:var(--t-small);line-height:1.5;color:var(--mu);max-width:52ch}
.is-soft .zl-gap .ttl,.is-light .zl-gap .ttl{fill:var(--fg)}
.is-soft .zl-gap .wl,.is-light .zl-gap .wl{fill:#F2F2F0}
.is-soft .zl-gap .base,.is-light .zl-gap .base{stroke:var(--rl)}

.is-soft .zl-gap svg rect[fill="#F2F2F0"],.is-light .zl-gap svg rect[fill="#F2F2F0"]{fill:#D9D8D4}
.is-soft .zl-gap .wl,.is-light .zl-gap .wl{fill:#F2F2F0}


/* ================================================================== homepage scenes
   One frame, one axis per scene. Statements centre on it (.sc--center); three-part content aligns
   to its left edge (.sc--left), with headline, lead and columns sharing that edge.
   Motion is choreographed per scene: the eyebrow, then each headline line rising out of its own
   mask, then the lead, then whatever the scene carries. Nothing is hidden until .zl-js is set, and
   reduced motion shows everything in place. */
:root{
  --sc-pad:clamp(112px,13vw,200px);
  --sc-h:clamp(38px,5vw,76px);        /* sized so each authored line holds on one line inside the frame */
  --sc-lead:clamp(19px,1.55vw,24px);
  --sc-gap:clamp(64px,7vw,112px);
  --accent-large:#DE4E16;                 /* orange for large text on white and paper: 4.0:1 / 3.6:1 */
  --ease-out:cubic-bezier(.16,1,.3,1);
}
.zl-scene{position:relative;padding:var(--sc-pad) 0;background:var(--chapter-light)}
.zl-scene.is-soft{background:var(--chapter-soft)}
.zl-scene.is-dark{background:var(--chapter-dark)}
.zl-scene + .zl-scene.is-dark,.zl-scene.is-dark + .zl-scene.is-dark{border-top:1px solid var(--rule-on-dark)}

/* the head: eyebrow, headline, lead */
.sc-eyebrow{display:flex;align-items:baseline;gap:14px;margin:0 0 clamp(22px,2.2vw,30px);
  font-size:14px;line-height:1;font-weight:500;letter-spacing:.01em;color:var(--mu)}
.sc-eyebrow .n{color:var(--accent-text);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.is-dark .sc-eyebrow .n{color:var(--zl-orange)}
.sc-h{margin:0;font-size:var(--sc-h);font-weight:500;line-height:1.02;letter-spacing:-.042em;color:var(--fg)}
.sc-h .ln{display:block;overflow:hidden;padding-bottom:.11em;margin-bottom:-.11em;text-wrap:balance}
.sc-h .ln > span{display:inline-block}
.sc-h .ln.b{color:var(--fg2)}
.sc-lead{margin:clamp(26px,2.6vw,38px) 0 0;max-width:46ch;font-size:var(--sc-lead);line-height:1.42;
  letter-spacing:-.012em;color:var(--mu);text-wrap:pretty}
.sc--center .sc-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.sc--center .sc-eyebrow{justify-content:center}
.sc--center .sc-lead{max-width:44ch}

/* what a scene carries, spaced on one rhythm */
.sc-body{margin-top:var(--sc-gap)}
.sc-body > :not(:first-child){margin-top:var(--sc-gap)}   /* (0,2,0): outranks a component's own margin:0 */

/* three columns under one edge: a rule over each, the first in orange */
.sc-cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(32px,4.4vw,80px);row-gap:52px}
.sc-cols li{position:relative;padding-top:clamp(24px,2.4vw,34px);display:flex;flex-direction:column;gap:14px}
.sc-cols li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rl)}
.sc-cols li:first-child::before{height:2px;top:-.5px;background:var(--zl-orange)}
.sc-cols b{font-size:clamp(21px,1.8vw,27px);font-weight:500;line-height:1.14;letter-spacing:-.026em;color:var(--fg)}
.sc-cols span{font-size:17px;line-height:1.58;color:var(--mu);max-width:34ch;text-wrap:pretty}
.is-dark .sc-cols b{color:var(--zl-orange)}

/* the decks' turning sentence */
.sc-turn{margin:0;max-width:30ch;font-size:clamp(26px,2.8vw,42px);font-weight:500;line-height:1.16;
  letter-spacing:-.032em;color:var(--fg);text-wrap:balance}
.sc-turn::before{content:"";display:block;width:56px;height:2px;background:var(--zl-orange);margin:0 0 clamp(26px,2.8vw,40px)}
.sc-turn .w{color:var(--accent-large)}
.is-dark .sc-turn .w{color:var(--zl-orange)}
.sc--center .sc-turn{margin-left:auto;margin-right:auto;text-align:center}
.sc--center .sc-turn::before{margin-left:auto;margin-right:auto}
.sc-link{margin:0}

/* ------------------------------------------------------------ the transformation chart, laid out as deck p.7 */
.sc-chart{margin:0}
.sc-chart-panel{background:var(--zl-black);padding:clamp(40px,5.6vw,92px) clamp(24px,5.6vw,92px)}
.sc-chart-h{display:flex;flex-direction:column;gap:14px;margin:0 0 clamp(44px,5.4vw,80px);text-align:left}
.sc-chart-h b{font-size:clamp(28px,3vw,46px);font-weight:500;line-height:1.04;letter-spacing:-.036em;color:#F2F2F0}
.sc-chart-h span{max-width:50ch;font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:#8A8D93}
.sc-chart-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5.4vw,96px);align-items:center}
.sc-chart-fig{min-width:0}
.sc-chart svg{display:block;width:100%;height:auto;overflow:visible}
.sc-chart rect{stroke:var(--zl-black);stroke-width:2}          /* the deck's thin black seams between segments */
.sc-chart .s{fill:#F2F2F0}.sc-chart .p{fill:var(--zl-orange)}.sc-chart .o{fill:#45454D}
.sc-chart .t{font:500 19px var(--font-sans);fill:#F2F2F0;letter-spacing:-.01em}
.sc-chart .ax{font:400 16px var(--font-sans);fill:#8A8D93}
.sc-chart .base{stroke:#2E2E34;stroke-width:1}
.sc-chart .in-l{font:500 16px var(--font-sans);fill:#F2F2F0}
.sc-chart .in-d{font:500 17px var(--font-sans);fill:var(--zl-black)}
.sc-key{list-style:none;margin:clamp(24px,2.6vw,36px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;
  font-size:13px;line-height:1;color:#8A8D93}
.sc-key li{display:flex;align-items:center;gap:10px}
.sc-key i{display:block;width:10px;height:10px}
.sc-key .s{background:#F2F2F0}.sc-key .p{background:var(--zl-orange)}.sc-key .o{background:#45454D}
.sc-gains{list-style:none;margin:0;padding:0;border-bottom:1px solid #26262A}
.sc-gains li{position:relative;padding:22px 0;font-size:clamp(17px,1.45vw,22px);font-weight:500;line-height:1.25;
  letter-spacing:-.016em;color:#F2F2F0}
.sc-gains li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#26262A}
.sc-gains li:first-child::before{height:2px;top:-.5px;background:var(--zl-orange)}

/* ------------------------------------------------------------ 03: the offer as an index */
.sc-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--rl)}
.sc-rows li{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--grid-gap);
  align-items:baseline;padding:clamp(36px,4.2vw,60px) 0}
.sc-rows li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rl)}
.sc-rows li:first-child::before{height:2px;top:-.5px;background:var(--zl-orange)}
.sc-rows b{font-size:var(--sc-h);font-weight:500;line-height:1.02;letter-spacing:-.042em;color:var(--fg);text-wrap:balance}   /* the same size as the scene headlines */
/* the name of the set, above its first rule */
.sc-rows-t{margin:0 0 clamp(28px,3vw,44px);font-size:clamp(26px,2.8vw,42px);font-weight:500;line-height:1.1;letter-spacing:-.03em;color:var(--fg)}
.sc-rows-t .w{color:var(--accent-large)}
.is-dark .sc-rows-t .w{color:var(--zl-orange)}
.sc-rows span{max-width:44ch;font-size:clamp(18px,1.45vw,21px);line-height:1.52;color:var(--mu);text-wrap:pretty}

/* ------------------------------------------------------------ 04: a split, the headline held on the left */
.sc-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--grid-gap);align-items:start}
.sc-split-k{position:sticky;top:calc(var(--nav-h) + 64px)}
.sc--split .sc-body{margin-top:0}
.sc-stack{list-style:none;margin:0;padding:calc(14px + clamp(22px,2.2vw,30px)) 0 0}   /* first rule level with the headline */
.sc-stack li{position:relative;display:flex;flex-direction:column;gap:16px;padding:clamp(28px,2.8vw,40px) 0 clamp(52px,5.6vw,88px)}
.sc-stack li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rl)}
.sc-stack li:first-child::before{height:2px;top:-.5px;background:var(--zl-orange)}
.sc-stack b{font-size:clamp(28px,3vw,46px);font-weight:500;line-height:1.04;letter-spacing:-.036em;color:var(--fg)}
.sc-stack span{max-width:40ch;font-size:clamp(18px,1.45vw,21px);line-height:1.52;color:var(--mu)}
.sc--split .sc-body > :not(:first-child){margin-top:0}
.sc--split .sc-body > .sc-stack + .sc-turn{margin-top:clamp(8px,1vw,16px)}   /* the last item's own padding is the gap */

/* ------------------------------------------------------------ 05: the same Monday, twice */
.sc-contrast{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.sc-contrast > div{display:flex;flex-direction:column;justify-content:space-between;gap:40px;
  min-height:clamp(280px,26vw,380px);padding:clamp(32px,3.8vw,56px)}
.sc-contrast .was{background:var(--zl-paper)}
.sc-contrast .now{background:var(--zl-black)}
.sc-contrast .k{margin:0;font-size:14px;font-weight:500;line-height:1;letter-spacing:.01em;color:var(--z-muted)}
.sc-contrast .now .k{color:var(--zl-orange)}
.sc-contrast .d{margin:0;max-width:24ch;font-size:clamp(22px,2.1vw,32px);font-weight:500;line-height:1.24;letter-spacing:-.024em}
.sc-contrast .was .d{color:#55585E}
.sc-contrast .now .d{color:#F2F2F0}
.sc-body > .sc-note{margin-top:clamp(32px,3.2vw,48px)}
.sc-note{max-width:56ch;font-size:clamp(18px,1.45vw,21px);line-height:1.52;color:var(--mu)}
.sc-note b{font-weight:500;color:var(--fg)}
.sc-body > .sc-link{margin-top:clamp(40px,4vw,56px)}

/* ------------------------------------------------------------ choreography */
.zl-js .sc-head .sc-eyebrow{opacity:0;transform:translateY(12px);transition:opacity 700ms var(--ease-out),transform 1000ms var(--ease-out)}
.zl-js .sc-head .sc-h .ln > span{transform:translateY(110%);transition:transform 1150ms var(--ease-out) 90ms}
.zl-js .sc-head .sc-h .ln.b > span{transition-delay:210ms}
.zl-js .sc-head .sc-lead{opacity:0;transform:translateY(20px);transition:opacity 1000ms var(--ease-out) 380ms,transform 1200ms var(--ease-out) 380ms}
.zl-js .sc-head.in .sc-eyebrow,.zl-js .sc-head.in .sc-lead{opacity:1;transform:none}
.zl-js .sc-head.in .sc-h .ln > span{transform:none}

.zl-js .sc-cols li{opacity:0;transform:translateY(26px);transition:opacity 900ms var(--ease-out),transform 1150ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 120ms)}
.zl-js .sc-cols li::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1300ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 120ms + 140ms)}
.zl-js .sc-cols.in li{opacity:1;transform:none}
.zl-js .sc-cols.in li::before{transform:none}

.zl-js .sc-turn{opacity:0;transform:translateY(24px);transition:opacity 1000ms var(--ease-out) 120ms,transform 1250ms var(--ease-out) 120ms}
.zl-js .sc-turn::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 900ms var(--ease-out)}
.zl-js .sc--center .sc-turn::before{transform-origin:50% 50%}
.zl-js .sc-turn.in{opacity:1;transform:none}
.zl-js .sc-turn.in::before{transform:none}

.zl-js .sc-link{opacity:0;transform:translateY(16px);transition:opacity 800ms var(--ease-out) 200ms,transform 1000ms var(--ease-out) 200ms}
.zl-js .sc-link.in{opacity:1;transform:none}

/* the chart: the panel settles with its heading, the four bars grow from the baseline in the order the
   story reads, then the labels and the key arrive and the gains list in after them, row by row */
.zl-js .sc-chart .sc-chart-panel{opacity:0;transform:translateY(36px) scale(.985);transition:opacity 1000ms var(--ease-out),transform 1400ms var(--ease-out)}
.zl-js .sc-chart.in .sc-chart-panel{opacity:1;transform:none}
.zl-js .sc-chart .bar{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%;
  transition:transform 1250ms var(--ease-out);transition-delay:calc(480ms + var(--i,0) * 170ms)}
.zl-js .sc-chart.in .bar{transform:none}
.zl-js .sc-chart .lbl,.zl-js .sc-chart .sc-key{opacity:0;transition:opacity 700ms linear 1800ms}
.zl-js .sc-chart.in .lbl,.zl-js .sc-chart.in .sc-key{opacity:1}
.zl-js .sc-chart .sc-gains li{opacity:0;transform:translateX(18px);transition:opacity 800ms var(--ease-out),transform 1000ms var(--ease-out);
  transition-delay:calc(1100ms + var(--i,0) * 140ms)}
.zl-js .sc-chart .sc-gains li::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1100ms var(--ease-out);
  transition-delay:calc(1100ms + var(--i,0) * 140ms)}
.zl-js .sc-chart.in .sc-gains li{opacity:1;transform:none}
.zl-js .sc-chart.in .sc-gains li::before{transform:none}

/* the index: each row rises after the one above it, and its rule draws across */
.zl-js .sc-rows li{opacity:0;transform:translateY(28px);transition:opacity 900ms var(--ease-out),transform 1150ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 140ms)}
.zl-js .sc-rows li::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1400ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 140ms)}
.zl-js .sc-rows.in li{opacity:1;transform:none}
.zl-js .sc-rows.in li::before{transform:none}
.zl-js .sc-rows-t{opacity:0;transform:translateY(20px);transition:opacity 900ms var(--ease-out),transform 1150ms var(--ease-out)}
.zl-js .sc-rows-t.in{opacity:1;transform:none}

/* the split: each outcome arrives as it scrolls past the headline held beside it */
.zl-js .sc-stack li{opacity:0;transform:translateY(32px);transition:opacity 900ms var(--ease-out),transform 1200ms var(--ease-out)}
.zl-js .sc-stack li::before{transform:scaleX(0);transform-origin:0 50%;transition:transform 1300ms var(--ease-out) 120ms}
.zl-js .sc-stack li.in{opacity:1;transform:none}
.zl-js .sc-stack li.in::before{transform:none}

/* the contrast: the old way first, then the new way slides in beside it */
.zl-js .sc-contrast > div{opacity:0;transform:translateY(28px);transition:opacity 900ms var(--ease-out),transform 1200ms var(--ease-out)}
.zl-js .sc-contrast > .now{transform:translateX(40px);transition-delay:220ms}
.zl-js .sc-contrast.in > div{opacity:1;transform:none}
.zl-js .sc-note{opacity:0;transform:translateY(16px);transition:opacity 800ms var(--ease-out) 150ms,transform 1000ms var(--ease-out) 150ms}
.zl-js .sc-note.in{opacity:1;transform:none}


/* ------------------------------------------------------------ steps: four numbered columns (agent-to-agent ready) */
.sc-cols.c4{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);text-align:left}
.sc-cols .n{font-size:14px;font-weight:500;line-height:1;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.is-dark .sc-cols .n{color:var(--zl-orange)}
.is-dark .sc-cols.num b{color:var(--fg)}
.sc-cols.c4 span:not(.n){font-size:16px}
.sc--center .sc-body > .sc-turn + .sc-cols{margin-top:clamp(48px,5vw,80px)}

/* ------------------------------------------------------------ the problem: a numbered, ruled list in two columns */
.sc-pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap)}
.sc-pains li{position:relative;display:grid;grid-template-columns:3.2em minmax(0,1fr);align-items:baseline;
  padding:clamp(22px,2.4vw,34px) 0;border-top:1px solid var(--rl)}
.sc-pains li:nth-child(-n+2){border-top:2px solid var(--zl-orange)}
.sc-pains .n{font-size:14px;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.sc-pains b{font-size:clamp(21px,2vw,30px);font-weight:500;line-height:1.15;letter-spacing:-.028em;color:var(--fg)}

/* ------------------------------------------------------------ the transformation: two models as chains */
.sc-models{display:flex;flex-direction:column;text-align:left;border-bottom:1px solid var(--rl)}
.sc-models .m{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--grid-gap);align-items:baseline;
  padding:clamp(26px,2.8vw,40px) 0;border-top:1px solid var(--rl)}
.sc-models .m.now{border-top:2px solid var(--zl-orange)}
.sc-models .k{margin:0;font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--mu)}
.sc-models .now .k{color:var(--accent-text)}
.sc-models ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;
  font-size:clamp(22px,2.3vw,36px);font-weight:500;line-height:1.15;letter-spacing:-.03em;color:var(--fg2)}
.sc-models li + li::before{content:"\2192";margin:0 .45em;color:var(--mu);font-weight:400}
.sc-models .end{color:var(--fg)}
.sc-models .now .end{color:var(--accent-large)}

/* motion for the three */
.zl-js .sc-pains li{opacity:0;transform:translateY(22px);transition:opacity 850ms var(--ease-out),transform 1100ms var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms)}
.zl-js .sc-pains.in li{opacity:1;transform:none}
.zl-js .sc-models .m{opacity:0;transform:translateY(24px);transition:opacity 900ms var(--ease-out),transform 1150ms var(--ease-out)}
.zl-js .sc-models .m.now{transition-delay:260ms}
.zl-js .sc-models.in .m{opacity:1;transform:none}
.zl-js .sc-models li{opacity:0;transition:opacity 700ms var(--ease-out)}
.zl-js .sc-models.in li{opacity:1}
.zl-js .sc-models.in .m li:nth-child(2){transition-delay:220ms}
.zl-js .sc-models.in .m li:nth-child(3){transition-delay:440ms}
.zl-js .sc-models.in .m.now li:nth-child(1){transition-delay:260ms}
.zl-js .sc-models.in .m.now li:nth-child(2){transition-delay:480ms}
.zl-js .sc-models.in .m.now li:nth-child(3){transition-delay:700ms}

@media (max-width:1099px){.sc-cols.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:899px){
  .sc-pains{grid-template-columns:minmax(0,1fr)}
  .sc-pains li:nth-child(2){border-top:1px solid var(--rl)}
  .sc-models .m{grid-template-columns:minmax(0,1fr);row-gap:14px}
}
@media (max-width:599px){.sc-cols.c4{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  .zl-js [data-sc],.zl-js [data-sc] *,.zl-js [data-sc] *::before{opacity:1!important;transform:none!important;transition:none!important}
}

/* ------------------------------------------------------------ narrower screens */
@media (max-width:899px){
  .sc-cols{grid-template-columns:minmax(0,1fr);row-gap:44px}
  .sc-cols span{max-width:none}
  .sc--left .sc-h,.sc--center .sc-h{max-width:none}
  .sc-lead{max-width:none}
}
@media (max-width:899px){
  .sc-chart-g{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .sc-rows li{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .sc-split{grid-template-columns:minmax(0,1fr)}
  .sc-split-k{position:static}
  .sc-stack{padding-top:var(--sc-gap)}
  .sc-contrast{grid-template-columns:minmax(0,1fr)}
  .sc-contrast > div{min-height:0}
  .zl-js .sc-contrast > .now{transform:translateY(28px)}
}
@media (max-width:599px){
  .sc-chart-panel{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}   /* full bleed on a phone */
  .sc-chart .t{font-size:24px}.sc-chart .ax{font-size:21px}.sc-chart .in-l{font-size:21px}.sc-chart .in-d{font-size:22px}
}

/* ------------------------------------------------------------ v12 */
/* Agentic Workforce: the handshake is the screen. The picture keeps full strength; two shades darken only
   the lower left, where the words sit, so the hands stay bright and the text stays readable. */
.zl-ihero--scene .zl-ihero-media img{object-fit:cover;object-position:0% 50%!important;filter:none}
.zl-ihero--scene .zl-ihero-shade{background:
  linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.82) 28%,rgba(0,0,0,.35) 42%,rgba(0,0,0,0) 54%),
  linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.4) 26%,rgba(0,0,0,0) 48%)}
.zl-ihero--scene .zl-ihero-text{max-width:min(100%,600px);gap:24px}
.zl-ihero--scene .zl-display{font-size:clamp(40px,3.9vw,58px)}
.zl-ihero--scene .zl-display .a,.zl-ihero--scene .zl-display .b{display:block}
.zl-ihero--scene .zl-display .b{color:#C3C4CC;max-width:9em}   /* authored break: "working alongside / your people." */
.zl-ihero--scene .zl-lead{color:#E6E6EA;text-wrap:pretty}
@media (max-width:899px){
  .zl-ihero--scene{min-height:100svh}
  .zl-ihero--scene .zl-ihero-media{top:var(--nav-h);bottom:auto;height:54%}
  .zl-ihero--scene .zl-ihero-media img{object-position:62% 50%!important}
  .zl-ihero--scene .zl-ihero-shade{background:linear-gradient(0deg,#000 0%,#000 44%,rgba(0,0,0,0) 60%)}
  .zl-ihero--scene .zl-ihero-text{max-width:100%}
}

/* Platform: prospect management, from first enquiry to signed quote */
.zl-funnel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--grid-gap)}
.zl-funnel li{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:2px solid var(--accent-mark)}
.zl-funnel li.team{border-top-color:var(--fg)}
.zl-funnel .who{font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text,var(--accent-mark))}
.zl-funnel li.team .who{color:var(--fg)}
.zl-funnel b{font-weight:400;font-size:22px;letter-spacing:-.03em;line-height:1.1;color:var(--fg)}
.zl-funnel span:last-child{color:var(--mu)}
.zl-shots{display:grid;grid-template-columns:minmax(0,.836fr) minmax(0,2.11fr);gap:var(--grid-gap);align-items:start}
.zl-shots figure{margin:0;display:flex;flex-direction:column;gap:14px}
.zl-shots img{display:block;width:100%;height:auto;border:1px solid var(--rl);border-radius:6px;background:#fff;box-shadow:0 24px 60px -32px rgba(11,11,12,.28)}
.zl-shots figcaption{font-size:var(--t-small);line-height:1.5;color:var(--mu);max-width:52ch}
.zl-shots-note{margin-top:20px}
@media (max-width:1023px){.zl-funnel{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}.zl-funnel li.team{grid-column:1/-1}}
@media (max-width:899px){.zl-shots{grid-template-columns:minmax(0,1fr);row-gap:40px}.zl-shots figure:first-child{max-width:420px}}
@media (max-width:599px){.zl-funnel{grid-template-columns:minmax(0,1fr)}}
/* a hero whose first sentence must hold on one line (Platform) */
.zl-ihero.is-statement .zl-ihero-text{max-width:none}
.zl-ihero.is-statement .zl-display{font-size:clamp(36px,4.3vw,64px)}
.zl-ihero.is-statement .zl-display .a,.zl-ihero.is-statement .zl-display .b{display:block}
.zl-ihero.is-statement .zl-lead{max-width:52ch}
@media (max-width:899px){.zl-ihero.is-statement .zl-display .a{text-wrap:balance}}
/* home ecosystem rows: each layer links to its own page */
.sc-rows span .sc-rows-go{display:flex;align-items:center;gap:10px;width:max-content;margin-top:18px;font-size:16px;line-height:1.3;color:var(--fg);letter-spacing:-.01em}
.sc-rows span .sc-rows-go:hover .zl-arrow,.sc-rows span .sc-rows-go:focus-visible .zl-arrow{color:var(--accent-mark);transform:translateX(6px)}
/* film heroes: the two halves of the headline are two authored lines */
.zl-film.is-hero .zl-display > span{display:block}
/* film heroes on phones: the words sit over the lower half of the film, so that half goes dark enough to read */
@media (max-width:899px){
  .zl-film.is-hero .zl-film-scrim{background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.82) 38%,rgba(0,0,0,.35) 62%,rgba(0,0,0,.1) 80%,rgba(0,0,0,.45) 100%)}
}
/* Pulse: prospect management on black */
.is-dark .zl-funnel li{border-top-color:var(--accent-mark-dark)}
.is-dark .zl-funnel li.team{border-top-color:#fff}
.is-dark .zl-funnel .who{color:var(--accent-mark-dark)}
.is-dark .zl-funnel li.team .who{color:#fff}
.is-dark .zl-shots img{border-color:#2A2A30;box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}

/* sector pages: the way through to the Platform */
.zl-toplat{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px}
.zl-btn-dark{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 22px;background:#0B0B0C;color:#fff;font-size:15px;border-radius:2px}
.zl-btn-dark:hover .zl-arrow,.zl-btn-dark:focus-visible .zl-arrow{color:var(--zl-orange)}
.zl-toplat nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.zl-toplat nav a{font-size:16px;color:var(--mu);border-bottom:1px solid transparent;padding-bottom:2px}
.zl-toplat nav a:hover,.zl-toplat nav a:focus-visible{color:var(--fg);border-bottom-color:var(--accent-mark)}
.zl-mod:has(> .zl-toplat-g){margin-top:40px!important}