/* ================================================================
   JZ CREATES — AI CONTENT CREATION offer page
   Design system matched to the "Limitless Creative" homepage:
   warm charcoal #0c0c0e, Playfair Display + Inter + Crimson Pro logo,
   locked red→magenta gradient, cursor glow, purple card hover glow,
   per-character heading reveals, 9:16 click-to-play reels.
   All rules scoped under .jzc so nothing leaks into the WP theme.
   ================================================================ */


.jzc{
  --bg:#0c0c0e; --bg-2:#16161a; --ink:#f6f3ef; --muted:#c0bbb2;
  --line:rgba(246,243,239,.09);
  --crimson:#ff2438; --gold:#e8c47c;
  --grad:linear-gradient(92deg,#ff0000 0%,#d600ed 100%);
  --font-display:"Playfair Display",Georgia,serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-logo:"Crimson Pro",Georgia,serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --maxw:1600px; --pad:5%;
  position:relative;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* warmth at the true top of the page only */
.jzc::before{content:"";position:absolute;top:0;left:0;right:0;height:1500px;z-index:0;pointer-events:none;background:radial-gradient(ellipse 130% 100% at 50% 0%,var(--bg-2),transparent 72%)}
.jzc *{margin:0;padding:0;box-sizing:border-box}
.jzc ::selection{background:var(--crimson);color:#fff}
.jzc img,.jzc svg,.jzc video{display:block;max-width:100%}
.jzc a{color:inherit;text-decoration:none}
.jzc ul,.jzc ol{list-style:none}
.jzc h1,.jzc h2,.jzc h3{font-family:var(--font-display);font-weight:500;letter-spacing:.005em;line-height:1.2}
/* Elementor's global kit (post-6104.css) colours bare h1-h4 (#444/#D50000/#780000),
   forces Oswald + capitalize and fixed sizes. The mu-plugin dequeues the kit on this
   page, but re-assert here so the page is correct even if it ever loads. */
.jzc h1,.jzc h2,.jzc h3,.jzc h4,.jzc h5,.jzc h6{color:var(--ink);text-transform:none;font-style:normal}
.jzc :focus-visible{outline:2px solid #d600ed;outline-offset:3px;border-radius:4px}

/* content sits above the top glow + cursor glow */
.jzc__main,.jzc .nav,.jzc .footer,.jzc .sticky{position:relative;z-index:1}

.jzc .grad{font-style:italic;font-weight:500;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.08em;padding-left:.1em;margin-left:-.1em;padding-bottom:.14em;margin-bottom:-.14em}
.jzc .eyebrow{font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem}
.jzc .head p.eyebrow{margin-top:0;font-size:1rem}
.jzc .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* film grain */
.jzc .grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:200;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:jzc-grain 9s steps(6) infinite}
@keyframes jzc-grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}}

/* red glow that follows the cursor (desktop only) */
.jzc .bgglow{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(560px circle at var(--gx,50%) var(--gy,20%),rgba(255,0,0,.15),rgba(255,40,60,.05) 34%,transparent 62%)}

/* ---------- buttons ---------- */
.jzc .btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:.9rem;font-weight:500;letter-spacing:.03em;padding:.95rem 1.9rem;border-radius:999px;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .35s,border-color .35s;will-change:transform;border:none;cursor:pointer}
.jzc .btn--primary{background:var(--grad);color:#fff !important;box-shadow:0 0 0 rgba(255,36,56,0)}
.jzc .btn--primary:hover,.jzc .btn--primary:focus{transform:translateY(-2px);color:#fff !important;box-shadow:0 12px 40px rgba(255,36,56,.35)}
.jzc .btn--ghost{border:1px solid var(--line);color:var(--ink) !important;background:rgba(255,255,255,.02);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.jzc .btn--ghost:hover,.jzc .btn--ghost:focus{border-color:rgba(246,243,239,.3);color:var(--ink) !important;transform:translateY(-2px)}
.jzc .btn--big{padding:1.15rem 2.6rem;font-size:1rem}

/* ---------- reveals (no-JS safe: everything visible until JS says otherwise) ---------- */
.jzc .reveal{opacity:1;transform:none}
html.jzc-js .jzc .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
html.jzc-js .jzc .reveal.in{opacity:1;transform:none}

/* per-character heading reveal (matches the homepage split) */
.jzc [data-split] .wd{display:inline-block;white-space:nowrap}
html.jzc-js .jzc [data-split] .ch{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(24px);transition:opacity .8s var(--ease-out),filter .8s var(--ease-out),transform .8s var(--ease-out)}
html.jzc-js .jzc [data-split].in .ch{opacity:1;filter:blur(0);transform:none}

/* small elements that stagger in (chips, dots, reels) — delays set in JS */
html.jzc-js .jzc .stag{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
html.jzc-js .jzc .in .stag,html.jzc-js .jzc .stag.in{opacity:1;transform:none}

/* ---------- glow card (homepage .card behaviour) ---------- */
.jzc .gcard{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .45s var(--ease-out),border-color .45s,opacity .9s var(--ease-out)}
.jzc .gcard::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px circle at var(--mx,50%) var(--my,0%),rgba(140,50,230,.18),transparent 45%);opacity:0;transition:opacity .45s;pointer-events:none}
.jzc .gcard:hover{transform:translateY(-6px);border-color:rgba(214,0,237,.4)}
.jzc .gcard:hover::before{opacity:1}
.jzc .gcard--flat:hover{transform:none}
.jzc .gcard>*{position:relative;z-index:1}

/* ---------- nav (solid blurred bar from first paint) ---------- */
.jzc .nav{position:fixed;top:0;left:0;right:0;z-index:300;padding:1.1rem 0;background:rgba(12,12,14,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);transition:background .4s,padding .4s,border-color .4s}
.jzc .nav.is-scrolled{background:rgba(12,12,14,.72);padding:.8rem 0}
.jzc .nav__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between}
.jzc .nav__logo{display:inline-flex;align-items:baseline;gap:.5rem}
.jzc .nav__logo-jz{font-family:var(--font-logo);font-style:normal;font-weight:500;font-size:1.5rem;line-height:1;color:var(--ink)}
.jzc .nav__logo-creates{font-family:var(--font-logo);font-style:italic;font-weight:600;font-size:1.35rem;letter-spacing:.1em;text-transform:uppercase;padding:0 .1em .06em 0;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.jzc .nav__right{display:flex;align-items:center;gap:1rem}
.jzc .nav__msg{font-size:.98rem;font-weight:450;color:var(--muted);letter-spacing:.04em;transition:color .3s}
.jzc .nav__msg:hover{color:var(--ink)}
.jzc .nav__cta{padding:.6rem 1.35rem;font-size:.84rem}
@media(max-width:560px){.jzc .nav__msg{display:none}}

/* ---------- hero ---------- */
.jzc .hero{position:relative;overflow:hidden;padding:20vh 0 6vh}
.jzc .hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4.5rem;align-items:center}
.jzc .hero__title{font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1.06}
.jzc .hero__sub{margin-top:1.4rem;color:var(--muted);font-size:clamp(1.15rem,1.35vw,1.35rem);line-height:1.55;max-width:52ch}
.jzc .hero__ctas{display:flex;gap:1rem;margin-top:2.4rem;flex-wrap:wrap}
.jzc .hero__proof{display:flex;align-items:center;gap:.8rem;margin-top:1.8rem;color:var(--muted);font-size:.98rem}
.jzc .hero__proof .stars{color:#ffd98a;letter-spacing:.14em;text-shadow:0 0 18px rgba(255,210,130,.5)}
.jzc .hero__media{position:relative;width:100%;max-width:620px;margin-left:auto}

/* 1:1 video slot — blank placeholder until the film is ready */
.jzc .vid1x1{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 34px 90px rgba(0,0,0,.55);background:linear-gradient(150deg,#17171c,#0a0a0c)}
.jzc .vid1x1 iframe,.jzc .vid1x1 video{width:100%;height:100%;border:0;display:block;object-fit:cover}
.jzc .vid1x1 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0a0a0c}
/* The cover is a designed 1:1 still, so it fills the frame exactly. The film itself
   is a 9:16 Short, so once it plays YouTube pillarboxes it inside the square.
   The glow only sits over the poster; once the embed is in it would tint the film. */
.jzc .vid1x1[data-short]:not([data-embedded])::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(214,0,237,.10),transparent 70%)}
.jzc .vid1x1[data-short]{cursor:pointer}
.jzc .vid1x1__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;border:1px solid rgba(246,243,239,.35);background:rgba(6,6,7,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:3;transition:transform .4s var(--ease-out),background .4s,border-color .4s}
.jzc .vid1x1__play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:16px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.jzc .vid1x1:hover .vid1x1__play{transform:translate(-50%,-50%) scale(1.1);background:rgba(255,36,56,.55);border-color:transparent}
.jzc .vid1x1--empty{display:grid;place-items:center}
.jzc .vid1x1--empty span{position:relative;z-index:1;font-family:var(--font-display);font-style:italic;font-size:1.35rem;color:rgba(246,243,239,.28)}
.jzc .vid1x1--empty::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(214,0,237,.12),transparent 70%)}

/* ---------- section shell (headings run the full container width) ---------- */
.jzc section.blk{padding:9vh 0}
.jzc .head{margin:0 auto 4rem}
.jzc .head h2{font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:1.06;max-width:none}
.jzc .head p{margin-top:1.4rem;color:var(--muted);max-width:62ch;font-size:clamp(1.15rem,1.35vw,1.35rem);line-height:1.55}
.jzc .head--mid{text-align:center}
.jzc .head--mid p{margin-left:auto;margin-right:auto}

/* ---------- 1. the four growth automations ---------- */
.jzc .autos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.jzc .auto{display:flex;flex-direction:column;padding:2.6rem 2.4rem 2.2rem}
.jzc .auto__ico{width:44px;height:44px;margin-bottom:1.6rem;stroke:url(#jzcGrad);fill:none;stroke-width:1.25}
.jzc .auto__kick{font-family:var(--font-display);font-style:italic;font-size:1.35rem;color:var(--crimson);margin-bottom:.9rem}
.jzc .auto h3{font-size:1.7rem;font-weight:500;margin-bottom:.4rem}
.jzc .auto__sub{font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.jzc .auto ul li{font-size:.98rem;color:rgba(246,243,239,.8);line-height:1.5;padding:.7rem 0;border-bottom:1px solid var(--line)}
.jzc .auto ul li:last-child{border-bottom:none}
.jzc .auto--tbd{border-style:dashed}
.jzc .auto__note{color:var(--gold) !important;font-style:italic;opacity:.9}

/* ---------- 2. system diagram ---------- */
.jzc .sys{display:grid;grid-template-columns:280px 1fr;gap:1.4rem;align-items:stretch}
.jzc .sys__src{display:flex;flex-direction:column;justify-content:center;gap:.9rem;padding:2.4rem 2.1rem;border-radius:20px;border:1px solid rgba(232,196,124,.4);background:radial-gradient(ellipse 90% 70% at 20% 20%,rgba(232,196,124,.09),transparent 65%),linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.jzc .sys__src span{font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,196,124,.85)}
.jzc .sys__src h3{font-size:1.55rem;font-weight:500;color:var(--gold)}
.jzc .sys__src p{color:var(--muted);font-size:1rem;line-height:1.55}
.jzc .lanes{display:flex;flex-direction:column;gap:1rem}
.jzc .lane{padding:1.6rem 1.8rem;display:grid;grid-template-columns:180px 1fr;gap:1.4rem;align-items:center}
.jzc .lane__name{font-family:var(--font-display);font-size:1.35rem;font-weight:500;line-height:1.2}
.jzc .lane__name small{display:block;font-family:var(--font-body);font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.35rem}
.jzc .flow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.jzc .flow .st{display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(246,243,239,.16);background:rgba(255,255,255,.02);font-size:.94rem;line-height:1.2;white-space:nowrap;transition:border-color .45s var(--ease-out),opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.jzc .lane:hover .st{border-color:rgba(214,0,237,.45)}
.jzc .flow .st--you{border-color:rgba(232,196,124,.75) !important;color:var(--gold);box-shadow:0 0 22px rgba(232,196,124,.16)}
.jzc .flow .ar{color:rgba(246,243,239,.3);font-size:1rem;flex:none}
.jzc .sys__legend{display:flex;gap:2rem;flex-wrap:wrap;margin-top:2.2rem;color:var(--muted);font-size:.98rem}
.jzc .sys__legend span{display:inline-flex;align-items:center;gap:.6rem}
.jzc .sys__legend i{width:14px;height:14px;border-radius:999px;border:1px solid rgba(214,0,237,.6);display:inline-block;flex:none}
.jzc .sys__legend i.you{border-color:rgba(232,196,124,.9)}

/* ---------- 3. examples of automations ---------- */
.jzc .ex{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.jzc .ex__card{display:flex;flex-direction:column;gap:.8rem;padding:2.1rem 2rem}
.jzc .tag{align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;padding:.32rem .85rem;border-radius:999px;font-size:.76rem;font-weight:600;letter-spacing:.06em}
.jzc .tag--n8n{border:1px solid rgba(214,0,237,.5);color:#e79bf5;background:rgba(214,0,237,.08)}
.jzc .tag--ghl{border:1px solid rgba(232,196,124,.5);color:var(--gold);background:rgba(232,196,124,.07)}
.jzc .ex__card h3{font-size:1.32rem;font-weight:500;line-height:1.25}
.jzc .ex__card p{color:var(--muted);font-size:1rem;line-height:1.55}
.jzc .ex__card--cta{border-style:dashed;align-items:flex-start;justify-content:center;gap:1.1rem}
.jzc .ex__card--cta h3{font-size:1.5rem}

/* ---------- 4. stack (with logo marks) ---------- */
.jzc .stack{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.jzc .tool{padding:2.2rem 2rem}
.jzc .tool__logo{width:52px;height:52px;margin-bottom:1.4rem;fill:none;stroke:url(#jzcGrad);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.jzc .tool b{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:500;margin-bottom:.7rem}
.jzc .tool span{color:var(--muted);font-size:1.02rem;line-height:1.55;display:block}

/* ---------- 5. before / after ---------- */
.jzc .cmp{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.jzc .cmp__card{padding:2.8rem 2.6rem}
.jzc .cmp__card--after{border-color:rgba(214,0,237,.35);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(214,0,237,.10),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.jzc .cmp__label{font-size:.86rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem}
.jzc .cmp__card--after .cmp__label{color:var(--ink)}
.jzc .dots{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:1.9rem}
.jzc .dots i{width:26px;height:26px;border-radius:7px;border:1px solid rgba(246,243,239,.16);background:rgba(255,255,255,.02);display:block;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.jzc .dots--one i{width:100%;height:26px;border-radius:7px;border-color:rgba(214,0,237,.6);background:var(--grad);opacity:.85}
html.jzc-js .jzc .dots--one .stag.in{opacity:.85}
.jzc .cmp__big{font-family:var(--font-display);font-size:clamp(1.9rem,3vw,2.7rem);font-weight:500;line-height:1.1;margin-bottom:.6rem}
.jzc .cmp__card--after .cmp__big{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.jzc .cmp__card p{color:var(--muted);font-size:1.05rem;line-height:1.55}
.jzc .cmp__meter{display:flex;align-items:baseline;gap:1rem;margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.jzc .cmp__meter b{font-family:var(--font-display);font-size:1.7rem;font-weight:500}
.jzc .cmp__meter span{font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- 6. stat band (animated counters) ---------- */
.jzc .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:3.6rem 0}
.jzc .stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.jzc .stat b{display:block;font-family:var(--font-display);font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:500;line-height:1;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.6rem}
.jzc .stat span{color:var(--muted);font-size:1.02rem;line-height:1.5;display:block;max-width:24ch}

/* ---------- 7. who it's for ---------- */
.jzc .who{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.jzc .who__card{padding:2.2rem 2rem}
.jzc .who__card svg{width:28px;height:28px;margin-bottom:1.3rem;stroke:url(#jzcGrad);fill:none;stroke-width:1.3}
.jzc .who__card h3{font-size:1.35rem;font-weight:500;margin-bottom:.5rem}
.jzc .who__card p{color:var(--muted);font-size:1rem;line-height:1.55}

/* ---------- 8. process (glowing step numbers, no box) ---------- */
.jzc .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2.8rem}
.jzc .step{position:relative;padding-top:2.4rem;border-top:1px solid var(--line)}
.jzc .step__num{position:absolute;top:-1.15rem;left:0;padding-right:1rem;font-family:var(--font-display);font-style:italic;font-size:2.1rem;color:var(--crimson);text-shadow:0 0 26px rgba(255,36,56,.55),0 0 6px rgba(12,12,14,.9)}
.jzc .step h3{font-size:1.6rem;font-weight:500;margin-bottom:.7rem}
.jzc .step p{color:var(--muted);font-size:1.02rem;line-height:1.6}

/* ---------- 9. engagements ---------- */
.jzc .pricing{background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(214,0,237,.08),transparent 60%)}
.jzc .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;align-items:stretch}
.jzc .tier{display:flex;flex-direction:column;padding:3rem 2.7rem;border-radius:22px}
.jzc .tier--feat{border-color:rgba(255,36,56,.4);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,36,56,.1),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.jzc .tier__badge{position:absolute;top:1.4rem;right:1.6rem;z-index:2;background:var(--grad);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:.38rem 1rem;border-radius:999px}
.jzc .tier__name{font-size:.86rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.jzc .tier__line{font-family:var(--font-display);font-size:2.1rem;font-weight:500;line-height:1.15;margin:.7rem 0 .9rem}
.jzc .tier__for{color:var(--muted);font-size:1.02rem;line-height:1.55;margin-bottom:1.7rem;min-height:3.4em}
.jzc .tier ul{margin-bottom:2rem;flex:1}
.jzc .tier ul li{font-size:.98rem;color:rgba(246,243,239,.8);padding:.72rem 0;border-bottom:1px solid var(--line);display:flex;gap:.8rem;align-items:flex-start;line-height:1.5}
.jzc .tier ul li:last-child{border-bottom:none}
.jzc .tier ul li::before{content:"\2726";color:var(--crimson);font-size:.78rem;margin-top:.42rem;flex:none}
.jzc .tier .btn{width:100%}

/* discovery-call note strip */
.jzc .note{max-width:1300px;margin:2.6rem auto 0;padding:2rem 2.4rem;border-radius:20px;border:1px solid rgba(232,196,124,.32);background:rgba(232,196,124,.055);display:flex;gap:1.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.jzc .note h3{font-size:1.55rem;font-weight:500}
.jzc .note p{color:var(--muted);font-size:1.02rem;line-height:1.55;max-width:64ch;margin-top:.4rem}

/* ---------- 10. reviews ---------- */
.jzc .rev__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.jzc .rev{display:flex;flex-direction:column;padding:2.6rem 2.4rem}
.jzc .rev__stars{color:#ffd98a;letter-spacing:.3em;font-size:1.15rem;margin-bottom:1.3rem;text-shadow:0 0 18px rgba(255,210,130,.5)}
.jzc .rev p{font-family:var(--font-display);font-size:1.3rem;font-weight:500;line-height:1.4;margin-bottom:1.6rem;flex:1}
.jzc .rev footer strong{display:block;font-size:.98rem;font-weight:600}
.jzc .rev footer span{font-size:.88rem;color:var(--muted)}
.jzc .rev__badges{margin:2.6rem auto 0;display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap;font-size:.98rem;color:var(--muted)}
.jzc .rev__badges a{font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:var(--ink);border-bottom:1px solid rgba(246,243,239,.25);padding-bottom:.1rem;transition:color .3s,border-color .3s}
.jzc .rev__badges a:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- 11. FAQ ---------- */
.jzc .faq{max-width:1180px;margin:0 auto}
.jzc .faq details{border-bottom:1px solid var(--line)}
.jzc .faq details:first-of-type{border-top:1px solid var(--line)}
.jzc .faq summary{position:relative;list-style:none;cursor:pointer;padding:1.7rem 3.4rem 1.7rem 0;font-family:var(--font-display);font-size:clamp(1.2rem,1.7vw,1.6rem);font-weight:500;transition:color .3s}
.jzc .faq summary::-webkit-details-marker{display:none}
.jzc .faq summary:hover{color:#f0a9ff}
.jzc .faq summary::after{content:"";position:absolute;right:.6rem;top:50%;width:14px;height:14px;margin-top:-7px;background:linear-gradient(92deg,#ff0000,#d600ed);-webkit-mask:linear-gradient(#000 0 0) center/14px 2px no-repeat,linear-gradient(#000 0 0) center/2px 14px no-repeat;mask:linear-gradient(#000 0 0) center/14px 2px no-repeat,linear-gradient(#000 0 0) center/2px 14px no-repeat;transition:transform .4s var(--ease-out)}
.jzc .faq details[open] summary::after{transform:rotate(135deg)}
.jzc .faq details p{color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:88ch;padding:0 3.4rem 1.8rem 0}

/* ---------- 12. final ---------- */
.jzc .final{position:relative;text-align:center;padding:15vh var(--pad) 10vh;overflow:hidden;background:radial-gradient(ellipse 60% 50% at 50% 115%,rgba(255,36,56,.16),transparent 70%)}
.jzc .final h2{font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:1.06;margin:0 auto;max-width:24ch}
.jzc .final__sub{margin-top:1.3rem;color:var(--muted);font-size:clamp(1.15rem,1.35vw,1.35rem);line-height:1.55;max-width:52ch;margin-left:auto;margin-right:auto}
.jzc .final__actions{margin-top:2.4rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.jzc .contact{max-width:820px;margin:3.6rem auto 0;border-radius:16px;overflow:hidden;background:#f6f4f0;box-shadow:0 30px 90px rgba(0,0,0,.5);text-align:left}
.jzc .contact iframe{min-height:660px;width:100%;display:block;border:0}
.jzc .final__direct{margin-top:2.4rem;font-size:1rem;color:var(--muted)}
.jzc .final__direct a{color:var(--ink);border-bottom:1px solid var(--line);transition:color .3s}
.jzc .final__direct a:hover{color:var(--gold)}

/* ---------- footer ---------- */
.jzc .footer{border-top:1px solid var(--line);padding:3.4rem var(--pad) 2.4rem}
.jzc .footer__top,.jzc .footer__bottom{max-width:var(--maxw);margin-inline:auto}
.jzc .footer__top{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2.6rem}
.jzc .footer__nav{display:flex;gap:2rem;flex-wrap:wrap}
.jzc .footer__nav a{font-size:.98rem;color:var(--muted);transition:color .3s}
.jzc .footer__nav a:hover{color:var(--ink)}
.jzc .footer__social{display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center}
.jzc .footer__social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--muted);transition:color .3s,border-color .3s,background .3s,transform .3s}
.jzc .footer__social a:hover{color:var(--ink);border-color:rgba(214,0,237,.5);transform:translateY(-3px)}
.jzc .footer__social svg{width:18px;height:18px;fill:currentColor;display:block}
.jzc .footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.88rem;color:rgba(192,187,178,.7)}
.jzc .footer__bottom a{text-decoration:underline;text-underline-offset:3px}
.jzc .footer__made{font-family:var(--font-display);font-style:italic}

/* sticky mobile CTA */
.jzc .sticky{display:none}
@media(max-width:760px){
  .jzc .sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:250;padding:.8rem var(--pad) calc(.8rem + env(safe-area-inset-bottom));background:rgba(12,12,14,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
  .jzc .sticky .btn{width:100%}
}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .jzc .sys{grid-template-columns:1fr}
  .jzc .lane{grid-template-columns:160px 1fr}
}
@media (max-width:1024px){
  .jzc .bgglow{display:none}
  .jzc .hero{padding:16vh 0 4vh}
  .jzc .hero__grid{grid-template-columns:1fr;gap:2.6rem}
  /* stacked layout leads with the film — it sells the offer faster than the headline */
  .jzc .hero__media{order:-1;margin-inline:auto}
  .jzc .autos,.jzc .stack,.jzc .who,.jzc .ex{grid-template-columns:1fr 1fr}
  .jzc .steps{grid-template-columns:repeat(2,1fr);gap:3rem 2rem}
  .jzc .rev__grid{grid-template-columns:repeat(2,1fr)}
  .jzc .tiers{grid-template-columns:1fr;max-width:640px;margin:0 auto}
  .jzc .tier--feat{order:-1}
  .jzc .stats__grid{grid-template-columns:1fr 1fr;gap:2.4rem}
  .jzc .lane{grid-template-columns:1fr;gap:1rem}
}
@media (max-width:640px){
  .jzc .autos,.jzc .stack,.jzc .who,.jzc .ex,.jzc .cmp,.jzc .steps,.jzc .rev__grid{grid-template-columns:1fr}
  .jzc .flow .st{font-size:.88rem;padding:.45rem .85rem}
  .jzc .hero__ctas .btn,.jzc .final__actions .btn{width:100%}
  .jzc .final{padding-bottom:16vh}
  .jzc .footer{padding-bottom:5.5rem}
}
@media (prefers-reduced-motion:reduce){
  .jzc .grain{animation:none}
  .jzc .bgglow{display:none}
  .jzc .reveal,html.jzc-js .jzc .reveal,
  html.jzc-js .jzc [data-split] .ch,
  html.jzc-js .jzc [data-split] .grad,
  html.jzc-js .jzc .stag{opacity:1 !important;filter:none !important;transform:none !important;transition:none !important}
  .jzc .gcard:hover{transform:none}
}

/* ================================================================
   MARKETING AUTOMATION — page-specific visual components
   ================================================================ */

/* ---------- the gradient phrase in a split heading ----------
   It is never split per-letter (per-letter transforms break background-clip:text),
   so the walker tags the whole <em> with .ch. But .ch also applies filter:blur(),
   and a filter on a background-clip:text element makes Chrome flatten the clip —
   the phrase then just sits there while the plain letters animate around it.
   So: give it its own reveal, opacity + travel only, no filter, timed to land
   just after the last character of the line. */
html.jzc-js .jzc [data-split] .grad{opacity:0;filter:none;transform:translateY(22px);transition:opacity .95s var(--ease-out) .26s,transform .95s var(--ease-out) .26s}
html.jzc-js .jzc [data-split].in .grad{opacity:1;filter:none;transform:none}

/* ---------- shared small parts ---------- */
.jzc .chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(246,243,239,.16);background:rgba(255,255,255,.025);font-size:.93rem;line-height:1.2;color:rgba(246,243,239,.85);transition:border-color .4s var(--ease-out),color .4s,opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.jzc .chip--gold{border-color:rgba(232,196,124,.6);color:var(--gold)}
.jzc .chip--grad{border-color:rgba(214,0,237,.45);color:#f0a9ff;background:rgba(214,0,237,.07)}
.jzc .chips{display:flex;flex-wrap:wrap;gap:.6rem}
.jzc .cta-mid{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:3.4rem}

/* ---------- 1. the problem ---------- */
.jzc .prob{display:grid;grid-template-columns:1.25fr .75fr;gap:1.4rem;align-items:stretch}
.jzc .tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;align-content:stretch}
.jzc .tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.4rem 1rem;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.02);font-size:.92rem;line-height:1.35;color:rgba(246,243,239,.76);text-align:center;transition:border-color .4s var(--ease-out),color .4s,opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.jzc .tiles:hover .tile{border-color:rgba(255,36,56,.22)}
.jzc .tile small{display:block;margin-top:.55rem;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,36,56,.75)}
.jzc .cost{display:flex;flex-direction:column;justify-content:center;padding:2.6rem 2.4rem;gap:1.1rem}
.jzc .cost__k{font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.jzc .cost__n{font-family:var(--font-display);font-size:clamp(2.6rem,4.4vw,3.8rem);font-weight:500;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.jzc .cost__p{color:var(--muted);font-size:1.02rem;line-height:1.55}
.jzc .bars{display:flex;flex-direction:column;gap:.7rem;margin-top:.4rem}
.jzc .bar{display:grid;grid-template-columns:96px 1fr;gap:.9rem;align-items:center;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.jzc .bar i{display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.jzc .bar i::after{content:"";position:absolute;top:0;bottom:0;left:0;width:var(--w,50%);border-radius:999px;background:var(--grad)}

/* ---------- 2. team vs system ---------- */
.jzc .duo{display:grid;grid-template-columns:1fr 74px 1fr;gap:1rem;align-items:stretch}
.jzc .duo__card{padding:2.7rem 2.5rem;display:flex;flex-direction:column;gap:1.3rem}
.jzc .duo__card h3{font-size:1.9rem;font-weight:500}
.jzc .duo__k{font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.jzc .duo__card--sys{border-color:rgba(214,0,237,.35);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(214,0,237,.1),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.jzc .duo__mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;color:rgba(246,243,239,.35)}
.jzc .duo__mid b{font-family:var(--font-display);font-size:2rem;font-weight:500;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.jzc .duo__mid i{display:block;width:1px;flex:1;min-height:40px;background:linear-gradient(180deg,transparent,rgba(246,243,239,.22),transparent)}

/* ---------- 3. the content engine (fan diagram) ---------- */
.jzc .engine{display:block}
.jzc .eng__src{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem 3rem;align-items:center;padding:2.4rem 2.8rem;border-radius:20px;border:1px solid rgba(232,196,124,.45);background:radial-gradient(ellipse 90% 70% at 20% 20%,rgba(232,196,124,.1),transparent 65%),linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.jzc .eng__src span{font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,196,124,.85)}
.jzc .eng__src h3{font-family:var(--font-display);font-size:clamp(1.5rem,2.2vw,2.05rem);line-height:1.2;font-weight:500;color:var(--gold);margin:.7rem 0 .5rem}
.jzc .eng__src p{color:var(--muted);font-size:.98rem;line-height:1.55}
.jzc .eng__fan{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.jzc .eng__link{position:relative;height:54px}
.jzc .eng__link::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(232,196,124,.55),rgba(214,0,237,.65))}
.jzc .eng__link::after{content:"";position:absolute;left:50%;bottom:0;width:9px;height:9px;margin-left:-4px;border-right:1px solid rgba(214,0,237,.8);border-bottom:1px solid rgba(214,0,237,.8);transform:rotate(45deg)}
.jzc .eng__link--out::before{background:linear-gradient(180deg,rgba(214,0,237,.65),rgba(232,196,124,.55))}
.jzc .oc{position:relative;text-align:center;padding:1.05rem 1rem;border-radius:12px;border:1px solid rgba(246,243,239,.14);background:rgba(255,255,255,.025);font-size:.93rem;line-height:1.25;color:rgba(246,243,239,.85);transition:border-color .4s var(--ease-out),transform .5s var(--ease-out),opacity .6s var(--ease-out)}
.jzc .eng__fan:hover .oc{border-color:rgba(214,0,237,.4)}
.jzc .eng__end{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.jzc .node{flex:1 1 220px;max-width:340px;padding:1.3rem 1.4rem;border-radius:14px;border:1px solid rgba(246,243,239,.16);background:rgba(255,255,255,.03);text-align:center}
.jzc .node b{display:block;font-family:var(--font-display);font-size:1.25rem;font-weight:500}
.jzc .node small{display:block;margin-top:.25rem;font-size:.82rem;color:var(--muted)}
.jzc .node--you{border-color:rgba(232,196,124,.75);color:var(--gold);box-shadow:0 0 26px rgba(232,196,124,.14)}
.jzc .node--out{border-color:rgba(214,0,237,.5);background:radial-gradient(ellipse 80% 80% at 50% 0%,rgba(214,0,237,.14),transparent 70%)}
.jzc .node__ar{flex:none;color:rgba(246,243,239,.35);font-size:1.2rem;line-height:1}

/* ---------- 4. the rail (idea to execution) ---------- */
.jzc .rail{display:grid;grid-template-columns:repeat(7,1fr);gap:.7rem;position:relative}
.jzc .rail::before{content:"";position:absolute;left:3%;right:3%;top:26px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,36,56,.5),rgba(214,0,237,.5),transparent)}
.jzc .rs{position:relative;text-align:center;padding-top:3.9rem}
.jzc .rs__dot{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:41px;height:41px;border-radius:50%;border:1px solid rgba(214,0,237,.55);background:#0c0c0e;display:grid;place-items:center;font-family:var(--font-display);font-size:1.05rem;font-weight:500;color:var(--ink)}
.jzc .rs--you .rs__dot{border-color:rgba(232,196,124,.9);color:var(--gold);box-shadow:0 0 26px rgba(232,196,124,.4)}
.jzc .rs b{display:block;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.jzc .rs--you b{color:var(--gold)}
.jzc .rs p{font-family:var(--font-display);font-size:1.25rem;font-weight:500;line-height:1.25}
.jzc .rs small{display:block;margin-top:.45rem;font-size:.9rem;color:var(--muted);line-height:1.45}

/* ---------- 5. use case cards ---------- */
.jzc .cases{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.jzc .cases::-webkit-scrollbar{display:none}
.jzc .cases.is-drag{cursor:grabbing}
.jzc .cases__hint{max-width:var(--maxw);margin:1.2rem auto 0;padding:0 var(--pad);text-align:center;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(192,187,178,.6)}
.jzc .cases__track{display:flex;gap:1.3rem;width:max-content;padding:.5rem 0 1rem}
.jzc .case{display:flex;flex-direction:column;width:340px;min-height:262px;flex:none;padding:2.2rem 2.1rem}
.jzc .case svg{width:26px;height:26px;margin-bottom:1.1rem;stroke:url(#jzcGrad);fill:none;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.jzc .case h3{font-size:1.22rem;font-weight:500;margin-bottom:.45rem}
.jzc .case p{color:var(--muted);font-size:.97rem;line-height:1.5}

/* ---------- 6. repurposing ---------- */
.jzc .repur{display:grid;grid-template-columns:300px 1fr;gap:2.4rem;align-items:center}
.jzc .repur__src{padding:2.2rem 2rem;text-align:center;border-radius:20px;border:1px solid rgba(255,36,56,.4);background:radial-gradient(ellipse 80% 70% at 50% 20%,rgba(255,36,56,.12),transparent 70%)}
.jzc .repur__src svg{width:40px;height:40px;margin:0 auto 1.1rem;stroke:url(#jzcGrad);fill:none;stroke-width:1.3}
.jzc .repur__src b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:500}
.jzc .repur__src span{display:block;margin-top:.4rem;font-size:.9rem;color:var(--muted)}
.jzc .repur__out{position:relative;padding-left:2.4rem}
.jzc .repur__out::before{content:"";position:absolute;left:0;top:4%;bottom:4%;width:1px;background:linear-gradient(180deg,transparent,rgba(255,36,56,.5),rgba(214,0,237,.5),transparent)}

/* ---------- 7. three layers ---------- */
.jzc .layers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.jzc .layer{padding:2.4rem 2.2rem;display:flex;flex-direction:column}
.jzc .layer__k{font-family:var(--font-display);font-style:italic;font-size:1.3rem;color:var(--crimson);margin-bottom:.8rem}
.jzc .layer h3{font-size:1.7rem;font-weight:500;margin-bottom:.4rem}
.jzc .layer__sub{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.3rem}
.jzc .layer ul li{font-size:.97rem;color:rgba(246,243,239,.8);line-height:1.5;padding:.62rem 0;border-bottom:1px solid var(--line)}
.jzc .layer ul li:last-child{border-bottom:none}

/* ---------- 8. monday morning dashboard mock ---------- */
.jzc .mon{max-width:1320px;margin:0 auto;border-radius:22px;border:1px solid var(--line);background:linear-gradient(160deg,#141418,#0b0b0d);overflow:hidden;box-shadow:0 40px 110px rgba(0,0,0,.6)}
.jzc .mon__bar{display:flex;align-items:center;gap:.9rem;padding:1rem 1.4rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);flex-wrap:wrap}
.jzc .mon__dots{display:flex;gap:.4rem}
.jzc .mon__dots i{width:10px;height:10px;border-radius:50%;background:rgba(246,243,239,.18)}
.jzc .mon__dots i:first-child{background:rgba(255,36,56,.7)}
.jzc .mon__title{font-size:.92rem;color:var(--muted);letter-spacing:.04em}
.jzc .mon__title b{color:var(--ink);font-weight:600}
.jzc .mon__stamp{margin-left:auto;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,196,124,.85)}
.jzc .mon__body{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.6rem}
.jzc .mblk{border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.022);padding:1.4rem 1.4rem 1rem}
.jzc .mblk h4{font-size:.76rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.jzc .mblk h4::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(214,0,237,.8);flex:none}
.jzc .mblk--warn{border-color:rgba(232,196,124,.35)}
.jzc .mblk--warn h4{color:var(--gold)}
.jzc .mblk--warn h4::before{background:var(--gold)}
.jzc .mrow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.55rem 0;border-bottom:1px dashed rgba(246,243,239,.09);font-size:.95rem;color:rgba(246,243,239,.82);line-height:1.35}
.jzc .mrow:last-child{border-bottom:none}
.jzc .mrow b{font-family:var(--font-display);font-size:1.15rem;font-weight:500;color:var(--ink);flex:none}
.jzc .mrow--gold{color:var(--gold)}
.jzc .mrow--gold b{color:var(--gold)}
.jzc .mon__foot{padding:1.1rem 1.6rem 1.5rem;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem;text-align:center}

/* ---------- 9. human + AI ---------- */
.jzc .hai{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.jzc .hai__card{padding:2.6rem 2.4rem}
.jzc .hai__card h3{font-size:1.7rem;font-weight:500;margin-bottom:.4rem}
.jzc .hai__k{font-size:.8rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem}
.jzc .hai__card--h{border-color:rgba(232,196,124,.4);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(232,196,124,.08),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.jzc .hai__card--h h3,.jzc .hai__card--h .hai__k{color:var(--gold)}
.jzc .hai__k--red{color:var(--crimson)}

/* ---------- 10. tools ---------- */
.jzc .tools{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.jzc .tgrp{padding:2rem 1.9rem}
.jzc .tgrp h4{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}

/* ---------- 11. automation audit ---------- */
.jzc .audit{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.jzc .audit__card{padding:2.8rem 2.6rem;display:flex;flex-direction:column}
.jzc .audit__card h3{font-size:1.8rem;font-weight:500;margin-bottom:1.3rem}
.jzc .audit__card--out{border-color:rgba(214,0,237,.4);background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(214,0,237,.11),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.jzc .checks{flex:1}
.jzc .checks li{display:flex;gap:.85rem;align-items:flex-start;font-size:1rem;color:rgba(246,243,239,.82);line-height:1.5;padding:.6rem 0;border-bottom:1px solid var(--line)}
.jzc .checks li:last-child{border-bottom:none}
.jzc .checks li::before{content:"\2726";color:var(--crimson);font-size:.76rem;margin-top:.4rem;flex:none}
.jzc .audit__card .btn{margin-top:1.9rem;width:100%}

/* ---------- 12. pricing tweaks (no dollar figures) ---------- */
.jzc .tier{position:relative}
.jzc .note{width:min(1300px,90%)}
.jzc .steps--six{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.jzc .steps--six{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.jzc .steps--six{grid-template-columns:1fr}}
.jzc .tier__quote{font-size:.84rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.4rem}

/* ---------- responsive for the new parts ---------- */
@media (max-width:1280px){
  .jzc .eng__fan{grid-template-columns:repeat(3,1fr)}
  .jzc .rail{grid-template-columns:repeat(4,1fr);gap:1.8rem .7rem}
  .jzc .rail::before{display:none}
  .jzc .mon__body{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  .jzc .prob,.jzc .repur,.jzc .hai,.jzc .audit,.jzc .layers{grid-template-columns:1fr}
  .jzc .tiles{align-content:start}
  .jzc .repur__out{padding-left:0;padding-top:1.6rem}
  .jzc .repur__out::before{left:6%;right:6%;top:0;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,36,56,.5),rgba(214,0,237,.5),transparent)}
  .jzc .tiles{grid-template-columns:repeat(4,1fr)}
  .jzc .tools{grid-template-columns:repeat(2,1fr)}
  .jzc .duo{grid-template-columns:1fr}
  .jzc .duo__mid{flex-direction:row;padding:.4rem 0}
  .jzc .duo__mid i{width:auto;height:1px;min-height:0;flex:1;background:linear-gradient(90deg,transparent,rgba(246,243,239,.22),transparent)}
}
@media (max-width:640px){
  .jzc .tiles{grid-template-columns:repeat(2,1fr)}
  .jzc .eng__fan{grid-template-columns:1fr 1fr}
  .jzc .eng__src{grid-template-columns:1fr}
  .jzc .node__ar{display:none}
  .jzc .eng__end{flex-direction:column;align-items:stretch}
  .jzc .node{flex:none;width:100%;max-width:none;padding:1.1rem 1.2rem}
  .jzc .rail{grid-template-columns:1fr 1fr}
  .jzc .tools,.jzc .mon__body{grid-template-columns:1fr}
  .jzc .case{width:min(78vw,320px);min-height:240px}
  .jzc .cta-mid .btn{width:100%}
}

/* ==================================================================
   AI CONTENT CREATION — this page's own sections.
   Everything else (tokens, buttons, gcard, hero, tiers, reviews, faq,
   final CTA, sticky) comes from the shared foundation.
   ================================================================== */

/* backstop: the Elementor global kit reddens bare headings if it ever loads */
.jzc h1,.jzc h2,.jzc h3,.jzc h4,.jzc h5,.jzc h6{color:var(--ink);text-transform:none}

/* ---------- 1. WHAT WE CREATE — capability cards ---------- */
.jzc .cap{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.jzc .cap__card{padding:2.4rem 2.1rem 2.2rem;display:flex;flex-direction:column}
.jzc .cap__ic{display:block;width:38px;height:38px}
.jzc .cap__ic svg{width:100%;height:100%;fill:none;stroke:url(#jzcGrad);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jzc .cap__card h3{font-size:1.35rem;margin:1.6rem 0 .8rem}
.jzc .cap__card p{color:var(--muted);font-size:.99rem;line-height:1.62}
.jzc .cap__for{margin-top:auto;padding-top:1.4rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(192,187,178,.72)}

/* ---------- 2. THE CONTENT CAPACITY GAP ---------- */
.jzc .cmpx{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;align-items:stretch}
.jzc .cmpx__card{padding:2.4rem 2.4rem 2.2rem;display:flex;flex-direction:column}
.jzc .cmpx__card--ai{border-color:rgba(214,0,237,.34);background:radial-gradient(ellipse 80% 70% at 20% 0%,rgba(214,0,237,.10),transparent 62%),rgba(255,255,255,.02)}
.jzc .cmpx__who{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* the asset squares — 10 vs 50, the whole argument in one look */
.jzc .cmpx__grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:1.8rem 0 1.4rem;align-content:start}
/* both cards render the same 50-cell canvas — only the fill differs, so the
   two counts line up and the gap is the only thing the eye reads */
.jzc .cmpx__grid i{display:block;aspect-ratio:1/1;border-radius:4px;border:1px solid rgba(246,243,239,.06);background:rgba(246,243,239,.025)}
.jzc .cmpx__grid i.on{border-color:rgba(246,243,239,.16);background:rgba(246,243,239,.14)}
.jzc .cmpx__grid--full i.on{border-color:rgba(214,0,237,.3);background:var(--grad);opacity:.9}
.jzc .cmpx__n{font-family:var(--font-display);font-size:1.35rem;font-weight:500}
.jzc .cmpx__n b{font-size:2.4rem;font-style:italic;line-height:1;margin-right:.35rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .cmpx__card:not(.cmpx__card--ai) .cmpx__n b{background:none;color:rgba(246,243,239,.62)}
.jzc .cmpx__facts{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:.55rem}
.jzc .cmpx__facts li{position:relative;padding-left:1.4rem;color:var(--muted);font-size:.97rem;line-height:1.55}
.jzc .cmpx__facts li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:rgba(246,243,239,.32)}
.jzc .cmpx__card--ai .cmpx__facts li::before{background:var(--grad)}
.jzc .cmpx__foot{margin-top:1.4rem;color:rgba(192,187,178,.72);font-size:.94rem}
.jzc .cmpx__foot em{font-family:var(--font-display);font-style:italic;color:rgba(246,243,239,.9);font-size:1.05rem}

/* the three pressures */
.jzc .press{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:3.2rem}
.jzc .press__card{position:relative;padding:2.3rem 2.1rem}
.jzc .press__n{position:absolute;top:1.5rem;right:1.8rem;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:2.5rem;line-height:1;color:rgba(255,36,56,.55);text-shadow:0 0 26px rgba(255,36,56,.28)}
.jzc .press__card h3{font-size:1.4rem;margin-bottom:.8rem;padding-right:3rem}
.jzc .press__card p{color:var(--muted);font-size:.99rem;line-height:1.62}
.jzc .press__note{margin-top:2.6rem;padding:2rem 2.4rem;border-radius:22px;border:1px solid rgba(214,0,237,.35);background:radial-gradient(ellipse 70% 100% at 10% 0%,rgba(214,0,237,.12),transparent 62%),rgba(255,255,255,.02);display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
.jzc .press__ic{display:block;width:42px;height:42px;flex:none}
.jzc .press__ic svg{width:100%;height:100%;fill:none;stroke:url(#jzcGrad);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jzc .press__note h3{font-size:1.6rem;margin-bottom:.6rem}
.jzc .press__note p{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:74ch}

/* ---------- 3. CREATIVE LEVERAGE — the fan ---------- */
.jzc .lev{display:grid;grid-template-columns:1.25fr .75fr;gap:3.2rem;align-items:center}
.jzc .lev__fig{width:100%;margin:0}
.jzc .lev__fig svg{display:block;width:100%;height:auto;overflow:visible}

.jzc .lev__lines path{fill:none;stroke:rgba(246,243,239,.16);stroke-width:1.4;transition:stroke .35s var(--ease-out),stroke-width .35s var(--ease-out)}
.jzc .lev__lines path.is-on{stroke:url(#jzcGrad);stroke-width:2.6}

.jzc .lev__hub circle{fill:rgba(214,0,237,.07);stroke:rgba(214,0,237,.4);stroke-width:1.4}
.jzc .lev__hub text.a{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:34px;fill:var(--ink)}

.jzc .lev__out rect{fill:rgba(255,255,255,.03);stroke:rgba(246,243,239,.14);stroke-width:1.2;transition:fill .35s var(--ease-out),stroke .35s var(--ease-out)}
.jzc .lev__out text{font-family:var(--font-body);font-size:17px;letter-spacing:.02em;fill:rgba(192,187,178,.9);dominant-baseline:middle;transition:fill .35s var(--ease-out)}
.jzc .lev__out.is-on rect{fill:rgba(214,0,237,.14);stroke:rgba(214,0,237,.6)}
.jzc .lev__out.is-on text{fill:var(--ink)}
.jzc .lev__out{cursor:pointer}

.jzc .lev__side{display:flex;flex-direction:column;gap:1.4rem}
.jzc .lev__hint{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(192,187,178,.6)}
.jzc .lev__detail{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:start;padding:2rem 2.1rem;border-radius:20px;border:1px solid rgba(214,0,237,.3);background:radial-gradient(ellipse 80% 100% at 10% 0%,rgba(214,0,237,.11),transparent 65%),rgba(255,255,255,.02);min-height:210px}
.jzc .lev__detail-n{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:2.6rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .lev__detail-t{display:block;font-family:var(--font-display);font-weight:500;font-size:1.5rem;margin-bottom:.7rem}
.jzc .lev__detail-p{color:var(--muted);font-size:1rem;line-height:1.62}
.jzc .lev__foot{font-family:var(--font-display);font-size:1.3rem}
.jzc .lev__foot em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* mobile layout, and the single source the detail panel reads from */
.jzc .lev__list{display:none;flex-direction:column;gap:.9rem}
.jzc .lev__row{display:grid;grid-template-columns:52px 1fr;gap:1.1rem;align-items:start;padding:1.1rem 1.2rem;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.jzc .lev__row b{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.7rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .lev__row strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.15rem;margin-bottom:.3rem}
.jzc .lev__row span{color:var(--muted);font-size:.95rem;line-height:1.55}

/* ---------- shared media components ---------- */

/* 16:9 click-to-play film */
.jzc .vid169{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(150deg,#17171c,#0a0a0c);cursor:pointer;transition:border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.jzc .vid169:hover{border-color:rgba(214,0,237,.55);box-shadow:0 0 46px rgba(214,0,237,.35)}
.jzc .vid169 img,.jzc .vid169 iframe{width:100%;height:100%;border:0;object-fit:cover;display:block;background:#0a0a0c}
.jzc .vid169 button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;border:1px solid rgba(246,243,239,.35);background:rgba(6,6,7,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:3;transition:transform .4s var(--ease-out),background .4s}
.jzc .vid169 button::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.jzc .vid169:hover button{transform:translate(-50%,-50%) scale(1.1);background:rgba(214,0,237,.4)}
.jzc .vid169[data-embedded] button{display:none}

/* 9:16 click-to-play reels */
.jzc .reel{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem}
.jzc .reel--3{grid-template-columns:repeat(3,1fr)}
.jzc .reel--4{grid-template-columns:repeat(4,1fr)}
.jzc .reel__f{position:relative;aspect-ratio:9/16;border-radius:34px;padding:10px;border:1px solid rgba(246,243,239,.16);background:linear-gradient(150deg,#17171c,#0a0a0c);cursor:pointer;transition:border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.jzc .reel__f:hover{border-color:rgba(214,0,237,.55);box-shadow:0 0 42px rgba(214,0,237,.45)}
.jzc .reel__f img,.jzc .reel__f iframe{width:100%;height:100%;border:0;border-radius:26px;object-fit:cover;display:block;background:#0a0a0c}
.jzc .reel__f button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;border:1px solid rgba(246,243,239,.35);background:rgba(6,6,7,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;z-index:3;transition:transform .4s var(--ease-out),background .4s}
.jzc .reel__f button::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.jzc .reel__f:hover button{transform:translate(-50%,-50%) scale(1.1);background:rgba(214,0,237,.35)}
.jzc .reel__f[data-embedded] button{display:none}

/* rotating image carousel - data-per slides visible, data-auto ms per step */
/* CSS owns the slide width, so the first layout is already correct and a flex
   track can never inflate the grid column it sits in (min-width:0 does the rest) */
.jzc .gal{position:relative;--per:2;--gal-gap:1.1rem;min-width:0}
.jzc .gal--tall{--per:3}
.jzc .gal__vp{overflow:hidden;border-radius:20px;min-width:0}
.jzc .gal__track{display:flex;gap:var(--gal-gap);transition:transform .8s var(--ease-out);will-change:transform}
.jzc .gal__s{flex:none;width:calc((100% - (var(--per) - 1) * var(--gal-gap)) / var(--per));margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#0a0a0c}
.jzc .gal__s img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.jzc .gal--tall .gal__s img{aspect-ratio:9/16}
.jzc .gal__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;border:1px solid rgba(246,243,239,.22);background:rgba(6,6,7,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:background .35s,border-color .35s}
.jzc .gal__nav:hover{background:rgba(214,0,237,.42);border-color:transparent}
.jzc .gal__nav::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;border-top:2px solid var(--ink);border-right:2px solid var(--ink)}
.jzc .gal__nav--prev{left:-14px}
.jzc .gal__nav--prev::after{transform:translate(-30%,-50%) rotate(-135deg)}
.jzc .gal__nav--next{right:-14px}
.jzc .gal__nav--next::after{transform:translate(-70%,-50%) rotate(45deg)}

/* ---------- 4. FROM PRODUCT TO POSSIBILITY - real work ---------- */
.jzc .wcases{display:flex;flex-direction:column;gap:5.5rem}
.jzc .wcase__hd{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.jzc .wcase__k{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.jzc .wcase__hd h3{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.jzc .wcase__link{color:var(--ink);font-size:.95rem;text-decoration:none;border-bottom:1px solid rgba(214,0,237,.5);padding-bottom:2px;white-space:nowrap;transition:border-color .35s,color .35s}
.jzc .wcase__link:hover{color:#fff;border-bottom-color:#ff2438}
.jzc .wcase__d{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:74ch;margin-bottom:1.8rem}
/* the media reads better narrower than the full container */
.jzc .wcase__media{max-width:1180px;margin-inline:auto}
.jzc .wcase .vid169{margin-bottom:1.1rem}

/* ---------- 5. PROOF - reels row ---------- */
.jzc .pull .wcase__link{display:inline-block;margin-top:1.2rem}
.jzc .reel--4.wrap{margin-top:2.8rem}

/* ---------- 6. SKETCH TO FILM ---------- */
.jzc .s2f__k{margin-top:3.4rem;margin-bottom:1.2rem;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* no column gap: the arrow column runs edge to edge so the line touches both frames */
.jzc .s2f{display:grid;grid-template-columns:1fr 132px 1fr;gap:0;align-items:center}
.jzc .s2f figure{margin:0}
/* height:auto is required — a definite width AND height attribute beats aspect-ratio */
.jzc .s2f__from img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:20px;border:1px dashed rgba(246,243,239,.24);background:#0a0a0c}
.jzc .s2f figcaption{margin-top:.9rem;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(192,187,178,.72)}
.jzc .s2f__to figcaption{color:rgba(246,243,239,.92)}
/* The line and the head are ONE path on purpose: an objectBoundingBox
   gradient cannot paint a shape with a zero-height bounding box, so a bare
   horizontal line stroked with url(#jzcGrad) rendered nothing and only the
   arrowhead showed, which read as an arrow stuck against the right frame. */
.jzc .s2f__arrow svg{display:block;width:100%;height:26px;fill:none;stroke:url(#jzcGrad);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 7b. ICONIC - boards beside the finished film ---------- */
.jzc .icon__hd{margin-top:3.4rem;margin-bottom:2rem;display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.jzc .icon__hd h3{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-top:.5rem}
.jzc .icon__hd p{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:74ch;margin-top:.8rem}
/* one 4-column grid shared by the carousel and the film, with the carousel's
   own gap matched to the grid gap - so a board slide is exactly one column
   wide, the film is exactly one column wide, and both stand the same height */
.jzc .icon{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;align-items:start}
.jzc .icon__left{grid-column:span 3}
.jzc .icon__right{grid-column:span 1}
.jzc .icon__left,.jzc .icon__right{min-width:0}
.jzc .icon__lbl{margin-bottom:.9rem;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- 8b. TWO FILMS SIDE BY SIDE ---------- */
.jzc .duo169{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:2.6rem}

/* ---------- 12. ABOUT JZ CREATES ---------- */
.jzc .about{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
.jzc .about__copy h2{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.08;margin-top:1rem}
.jzc .about__copy p{color:var(--muted);font-size:1.08rem;line-height:1.62;max-width:56ch;margin-top:1.4rem}
.jzc .about__ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.2rem}

/* ---------- 5. PROOF — pull quote under the stats ---------- */
.jzc .pull{margin-top:2.8rem;padding:2.2rem 2.6rem;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.02);max-width:1000px}
.jzc .pull p{font-family:var(--font-display);font-style:italic;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.4}
.jzc .pull footer{margin-top:1.2rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline}
.jzc .pull footer strong{font-weight:600;font-size:1rem}
.jzc .pull footer span{color:var(--muted);font-size:.95rem}

/* ---------- 6. HOW IT WORKS ---------- */
.jzc .proc{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.jzc .proc__step{position:relative;padding:2.4rem 2rem 2.2rem}
.jzc .proc__n{display:block;font-family:var(--font-display);font-style:italic;font-weight:500;font-size:2.6rem;line-height:1;margin-bottom:1.3rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .proc__step h3{font-size:1.28rem;margin-bottom:.8rem}
.jzc .proc__step p{color:var(--muted);font-size:.98rem;line-height:1.62}
.jzc .proc__note{margin-top:2.6rem;padding:2rem 2.4rem;border-radius:22px;border:1px solid rgba(232,196,124,.34);background:radial-gradient(ellipse 70% 100% at 10% 0%,rgba(232,196,124,.09),transparent 62%),rgba(255,255,255,.02);display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
.jzc .proc__note .press__ic svg{stroke:var(--gold)}
.jzc .proc__note h3{font-size:1.55rem;margin-bottom:.6rem}
.jzc .proc__note p{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:74ch}

/* ---------- 7. AI-AMPLIFIED — the two pipelines ---------- */
.jzc .pipe{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;align-items:stretch}
.jzc .pipe__col{padding:2.2rem 2.3rem;border-radius:22px;border:1px solid rgba(214,0,237,.32);background:radial-gradient(ellipse 80% 70% at 15% 0%,rgba(214,0,237,.10),transparent 62%),rgba(255,255,255,.02);display:flex;flex-direction:column}
.jzc .pipe__col--thin{border-color:var(--line);background:rgba(255,255,255,.015)}
.jzc .pipe__k{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.8rem}
/* vertical flow: a wrapped horizontal row leaves arrows dangling at the end of
   a line, so the steps stack and every connector visibly touches both pills */
.jzc .pipe__flow{display:flex;flex-direction:column;align-items:stretch;gap:0}
.jzc .pipe__node{padding:.72rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:rgba(246,243,239,.04);font-size:.95rem;line-height:1.25;text-align:center}
.jzc .pipe__node--ai{border-color:rgba(214,0,237,.55);background:rgba(214,0,237,.14);color:var(--ink)}
.jzc .pipe__node--good{border-color:transparent;background:var(--grad);color:#fff;font-weight:600}
.jzc .pipe__node--bad{border-color:rgba(246,243,239,.14);background:rgba(246,243,239,.03);color:rgba(192,187,178,.75)}
/* the connector starts on one pill's edge and tucks under the next */
.jzc .pipe__arrow{display:block;width:1px;height:20px;margin:0 auto;background:rgba(246,243,239,.28);flex:none;position:relative}
.jzc .pipe__arrow::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);border-top:5px solid rgba(246,243,239,.4);border-left:3.5px solid transparent;border-right:3.5px solid transparent}
.jzc .pipe__col:not(.pipe__col--thin) .pipe__arrow{background:rgba(214,0,237,.45)}
.jzc .pipe__col:not(.pipe__col--thin) .pipe__arrow::after{border-top-color:rgba(214,0,237,.7)}
.jzc .pipe__out{margin-top:auto;padding-top:1.8rem;font-family:var(--font-display);font-style:italic;font-size:1.3rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.jzc .pipe__out--bad{background:none;color:rgba(192,187,178,.68)}

.jzc .taste{margin-top:2.6rem;padding:2.4rem 2.6rem;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.jzc .taste h3{font-size:1.7rem;margin-bottom:.7rem}
.jzc .taste>p{color:var(--muted);font-size:1.04rem;line-height:1.6;max-width:76ch;margin-bottom:1.6rem}
.jzc .taste__foot{margin-top:1.6rem;font-family:var(--font-display);font-style:italic;font-size:1.28rem;color:rgba(246,243,239,.92)}

/* ---------- 8. WHY JZ CREATES (shared pattern, copied from the social page) ---------- */
.jzc .whyc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.jzc .whyc__card{padding:2.4rem 2.1rem}
.jzc .whyc__ic{display:block;width:38px;height:38px;margin-bottom:1.5rem}
.jzc .whyc__ic svg{width:100%;height:100%;fill:none;stroke:url(#jzcGrad);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jzc .whyc__card h3{font-size:1.35rem;margin-bottom:.8rem}
.jzc .whyc__card p{color:var(--muted);font-size:.99rem;line-height:1.62}
.jzc .suit{margin-top:3rem;padding:2.2rem 2.4rem;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.jzc .suit h3{font-size:1.5rem;margin-bottom:.6rem}
.jzc .suit>p{color:var(--muted);font-size:1.02rem;line-height:1.55;max-width:70ch;margin-bottom:1.6rem}
.jzc .suit__foot{margin-top:1.6rem;font-family:var(--font-display);font-style:italic;font-size:1.2rem;color:rgba(246,243,239,.9)}

/* ---------- 9. ENGAGEMENTS — the pilot band ---------- */
.jzc .engc__note{max-width:1300px;margin:2.6rem auto 0;padding:2.4rem 2.6rem;border-radius:22px;border:1px solid rgba(214,0,237,.35);background:radial-gradient(ellipse 70% 100% at 12% 0%,rgba(214,0,237,.12),transparent 62%),rgba(255,255,255,.02);display:grid;grid-template-columns:1fr auto;gap:1.8rem;align-items:center}
.jzc .engc__note p.k{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.jzc .engc__note h3{font-size:1.75rem;margin-top:.7rem}
.jzc .engc__note p.d{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:72ch;margin-top:.8rem}
.jzc .engc__note p.q{margin-top:1rem;font-family:var(--font-display);font-style:italic;font-size:1.28rem;color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .jzc .lev{gap:2.2rem}
  .jzc .proc{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  /* stacked hero leads with the film, so it only needs to clear the fixed nav */
  .jzc .hero{min-height:0;padding:92px 0 4vh}
  .jzc .cap,.jzc .whyc{grid-template-columns:repeat(2,1fr)}
  .jzc .about{grid-template-columns:1fr;gap:2.6rem}
  .jzc .icon{grid-template-columns:1fr;gap:2.4rem}
  .jzc .icon__left,.jzc .icon__right{grid-column:auto}
  .jzc .icon__right{max-width:340px}
  .jzc .press{grid-template-columns:1fr}
  .jzc .pipe{grid-template-columns:1fr}
  .jzc .engc__note,.jzc .press__note,.jzc .proc__note{grid-template-columns:1fr}
}
/* below this the fan pills are too small to aim at — swap the panel for the
   plain list, which carries the same twelve descriptions */
@media (max-width:900px){
  .jzc .lev{grid-template-columns:1fr}
  .jzc .lev__side{display:none}
  .jzc .lev__list{display:flex}
}
@media (max-width:760px){
  .jzc .cmpx{grid-template-columns:1fr}
}
@media (max-width:820px){
  /* the arrow only reads horizontally - stack and drop it */
  .jzc .s2f{grid-template-columns:1fr;gap:1.8rem}
  .jzc .s2f__arrow{display:none}
  .jzc .duo169{grid-template-columns:1fr}
  .jzc .reel--4{grid-template-columns:repeat(2,1fr)}
  .jzc .gal{--per:1}
  .jzc .gal--tall{--per:2}
  .jzc .gal__nav--prev{left:6px}
  .jzc .gal__nav--next{right:6px}
}
@media (max-width:640px){
  .jzc .cap,.jzc .whyc,.jzc .proc{grid-template-columns:1fr}
  .jzc .reel--3{grid-template-columns:repeat(2,1fr)}
  .jzc .reel--3 .reel__f:nth-child(3){display:none}
  .jzc .lev__row{grid-template-columns:38px 1fr;gap:.9rem}
  .jzc .press__n{font-size:2.1rem}
}

/* SVG label text is sized in viewBox units, so it shrinks with the figure.
   Below ~900px the fan is the mobile list, but the hub still shows above that —
   scale the labels back up so nothing falls under 12px. */
@media (max-width:1100px){
  .jzc .lev__out text{font-size:20px}
  .jzc .lev__hub text.a{font-size:38px}
}

/* ---------- hero sits centred in the viewport ----------
   Matches the social production page, which was the only one of the four that
   centred its hero. The others pushed the content down with top padding alone,
   so it sat low on the screen. Desktop only: the phone layout keeps its own
   compact padding. */
@media (min-width: 1025px) {
  .jzc .hero{min-height:100svh;display:flex;align-items:center;padding:11vh 0 5vh}
  .jzc .hero__grid{width:100%}
}