/* ================================================================
   JZ CREATES — SOCIAL MEDIA PRODUCTION offer page (v4)
   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%}
}

/* ================================================================
   V4 — SOCIAL MEDIA PRODUCTION: section components
   Added on top of the shared offer-page foundation. Every new class
   is namespaced so nothing collides with the inherited rules.
   ================================================================ */

/* ---------- nav ----------
   This page no longer carries its own header. It uses the site's shared 2026
   chrome (see swap-chrome.py), which is scoped under .jzp and styled by
   uploads/jz-home/css/pages.css — so every .jzc .nav rule inherited from the
   foundation simply stops matching. Nothing to add here. */

/* ---------- hero: fill the viewport and sit centred in it ----------
   The foundation's fixed top padding left a dead band under the nav on tall
   screens. Centre the grid in a full-height hero instead. */
.jzc .hero{min-height:100svh;display:flex;align-items:center;padding:11vh 0 5vh}
.jzc .hero__grid{width:100%}

/* ---------- 0. THE GAP — competitor vs you ---------- */
.jzc .gapc{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.jzc .gapc__card{padding:2.4rem 2.3rem 2.2rem;border-radius:22px}
.jzc .gapc__card--you{border-color:rgba(255,36,56,.32);background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(255,36,56,.07),transparent 62%),linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.012))}
.jzc .gapc__who{font-size:.82rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.8rem}
.jzc .gapc__card--you .gapc__who{color:var(--crimson)}
/* five weeks of posting, as bars */
.jzc .gapc__weeks{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}
.jzc .gapc__wk{display:flex;flex-direction:column;gap:.7rem}
.jzc .gapc__wk i{position:relative;display:block;height:132px;border-radius:9px;background:rgba(246,243,239,.05);overflow:hidden}
.jzc .gapc__wk i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--h);border-radius:9px;background:var(--grad)}
.jzc .gapc__card--you .gapc__wk i::after{background:linear-gradient(180deg,rgba(246,243,239,.3),rgba(246,243,239,.1))}
.jzc .gapc__wk em{font-style:normal;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,243,239,.42);text-align:center}
/* nine platform slots, lit or not */
.jzc .gapc__plats{display:grid;grid-template-columns:repeat(9,1fr);gap:.45rem;margin-top:1.9rem}
.jzc .gapc__plats i{display:block;height:9px;border-radius:99px;background:rgba(246,243,239,.08)}
.jzc .gapc__plats i.on{background:var(--grad)}
.jzc .gapc__card--you .gapc__plats i.on{background:rgba(246,243,239,.34)}
.jzc .gapc__cap{margin-top:1rem;color:var(--muted);font-size:.98rem;line-height:1.55}
.jzc .gapc__cap b{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:1.35rem;color:var(--ink);margin-right:.25rem}
/* the two pain points, spelled out */
.jzc .pain{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:1.3rem}
.jzc .pain__card{padding:2.2rem 2.3rem}
.jzc .pain__card h3{font-size:1.45rem;margin-bottom:.8rem}
.jzc .pain__card p{color:var(--muted);font-size:1rem;line-height:1.62}

/* ---------- 1. WHAT WE CREATE — format grid ---------- */
.jzc .fmt{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.jzc .fmt__card{padding:2.3rem 1.9rem 2.1rem;display:flex;flex-direction:column}
.jzc .fmt__ic{display:block;width:38px;height:38px}
.jzc .fmt__ic svg{width:100%;height:100%;fill:none;stroke:url(#jzcGrad);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jzc .fmt__card h3{font-size:1.32rem;margin:1.6rem 0 .8rem}
.jzc .fmt__card p{color:var(--muted);font-size:.98rem;line-height:1.6}

/* ---------- 2. WHAT WE HANDLE — drag carousel ----------
   The scroller carries generous vertical padding so the whole strip is a grab
   target, not just the gaps between cards. */
.jzc .cases{padding:2.4rem 0;user-select:none;-webkit-user-select:none;touch-action:pan-x}
.jzc .cases img,.jzc .cases a{-webkit-user-drag:none}
.jzc .capc{position:relative;display:flex;flex-direction:column;width:min(80vw,340px);min-height:252px;flex:none;padding:2.2rem 2.1rem;border-radius:20px}
.jzc .capc__n{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:2.5rem;line-height:1;color:rgba(255,36,56,.7);text-shadow:0 0 26px rgba(255,36,56,.3);margin-bottom:1.2rem}
.jzc .capc h3{font-size:1.3rem;margin-bottom:.9rem}
.jzc .capc p{color:var(--muted);font-size:.99rem;line-height:1.6}
/* the scope strip above the carousel */
.jzc .scope{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-bottom:2.4rem;padding:1.2rem 1.6rem;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.jzc .scope b{font-family:var(--font-display);font-weight:500;font-size:1.15rem;flex:none}
.jzc .scope span{color:var(--muted);font-size:.98rem}

/* ---------- 2b. BUILT ON YOUR BRAND ---------- */
.jzc .brand{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:3.4rem;align-items:center}
.jzc .brandk{padding:2.2rem 2.2rem 2.4rem;border-radius:22px}
.jzc .brandk__k{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.6rem}
.jzc .brandk__row{display:grid;grid-template-columns:80px 1fr;gap:1.2rem;align-items:center;padding:1.15rem 0;border-top:1px solid var(--line)}
.jzc .brandk__row>span{font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,243,239,.45)}
.jzc .brandk__sw{display:flex;gap:.6rem}
.jzc .brandk__sw i{display:block;width:30px;height:30px;border-radius:50%;border:1px solid rgba(246,243,239,.14)}
.jzc .brandk__type{display:flex;align-items:baseline;gap:1.4rem}
.jzc .brandk__type b{font-family:var(--font-display);font-weight:500;font-size:2rem;line-height:1}
.jzc .brandk__type em{font-family:var(--font-body);font-style:normal;font-weight:400;font-size:1.15rem;color:var(--muted);letter-spacing:.02em}
.jzc .brandk__logo{height:44px;border-radius:10px;border:1px dashed rgba(246,243,239,.22);display:grid;place-items:center;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,243,239,.4)}
.jzc .brand__list{display:flex;flex-direction:column}
.jzc .brand__row{padding:1.15rem 0;border-bottom:1px solid var(--line)}
.jzc .brand__row:last-child{border-bottom:none}
.jzc .brand__row strong{display:block;font-family:var(--font-display);font-weight:500;font-size:1.4rem;margin-bottom:.4rem}
.jzc .brand__row span{color:var(--muted);font-size:1rem;line-height:1.6}
/* the approval guarantee */
.jzc .approve{max-width:1300px;margin:3rem auto 0;padding:2.1rem 2.4rem;border-radius:22px;border:1px solid rgba(232,196,124,.34);background:rgba(232,196,124,.055);display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center}
.jzc .approve__ic{display:block;width:46px;height:46px;flex:none}
.jzc .approve__ic svg{width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.jzc .approve h3{font-size:1.55rem;color:var(--gold)}
.jzc .approve p{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:78ch;margin-top:.45rem}

/* ---------- 3. THE CONTENT ENGINE — loop diagram ---------- */
.jzc .loopd{display:grid;grid-template-columns:1.05fr .95fr;gap:3.6rem;align-items:center}
/* auto side margins on a grid item make it shrink-to-fit, which leaves the svg
   without a definite width and it falls back to 300px — keep it stretched */
.jzc .loopd__fig{width:100%}
.jzc .loopd__side{display:flex;flex-direction:column}
.jzc .loopd__fig svg{width:100%;height:auto;overflow:visible}
.jzc .loopd__ring{fill:none;stroke:url(#jzcGrad);stroke-width:1.4;stroke-dasharray:3 12;stroke-linecap:round;opacity:.75;transform-origin:380px 320px;animation:jzcRing 44s linear infinite}
@keyframes jzcRing{to{transform:rotate(360deg)}}
.jzc .loopd__node{cursor:pointer}
.jzc .loopd__node circle.hit{fill:transparent;stroke:none}
.jzc .loopd__node circle.dot{fill:rgba(20,20,24,.95);stroke:rgba(246,243,239,.18);stroke-width:1;transition:stroke .35s,fill .35s}
.jzc .loopd__node text.n{font-family:var(--font-display);font-style:italic;font-size:22px;fill:var(--crimson)}
.jzc .loopd__node text.l{font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.13em;fill:rgba(246,243,239,.7);transition:fill .35s}
.jzc .loopd__node.is-on circle.dot{stroke:rgba(214,0,237,.85);fill:rgba(214,0,237,.16)}
.jzc .loopd__node.is-on text.l{fill:var(--ink)}
.jzc .loopd__node--gold circle.dot{stroke:rgba(232,196,124,.55)}
.jzc .loopd__node--gold text.n{fill:var(--gold)}
.jzc .loopd__node--gold text.l{fill:rgba(232,196,124,.8)}
.jzc .loopd__node--gold.is-on circle.dot{stroke:var(--gold);fill:rgba(232,196,124,.16)}
.jzc .loopd__node--gold.is-on text.l{fill:var(--gold)}
.jzc .loopd__hub text.a{font-family:var(--font-display);font-style:italic;font-size:32px;fill:#ffffff}
.jzc .loopd__hub text.b{font-family:"Inter",system-ui,sans-serif;font-size:13px;font-weight:600;letter-spacing:.2em;fill:rgba(246,243,239,.5)}
/* the panel that changes as you move around the ring (desktop) */
.jzc .loopd__detail{display:grid;grid-template-columns:70px 1fr;gap:1.4rem;align-items:start;min-height:172px;padding:2rem 2.3rem;border-radius:22px;border:1px solid rgba(214,0,237,.3);background:radial-gradient(ellipse 80% 110% at 8% 0%,rgba(214,0,237,.11),transparent 62%),rgba(255,255,255,.02);transition:border-color .35s}
.jzc .loopd__detail.is-gold{border-color:rgba(232,196,124,.4);background:radial-gradient(ellipse 80% 110% at 8% 0%,rgba(232,196,124,.1),transparent 62%),rgba(255,255,255,.02)}
.jzc .loopd__detail-n{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:2.8rem;line-height:1;color:var(--crimson);text-shadow:0 0 26px rgba(255,36,56,.45)}
.jzc .loopd__detail.is-gold .loopd__detail-n{color:var(--gold);text-shadow:0 0 26px rgba(232,196,124,.45)}
.jzc .loopd__detail-t{display:block;font-family:var(--font-display);font-weight:500;font-size:1.75rem;margin-bottom:.55rem}
.jzc .loopd__detail.is-gold .loopd__detail-t{color:var(--gold)}
.jzc .loopd__detail-p{color:var(--muted);font-size:1.05rem;line-height:1.6}
.jzc .loopd__hint{margin-bottom:1.3rem;font-size:.92rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,243,239,.42)}
/* the same seven descriptions as a plain list — the mobile layout, and the
   single source the detail panel reads from */
.jzc .loopd__list{display:none;flex-direction:column;max-width:820px;margin:2.4rem auto 0;grid-column:1/-1}
.jzc .loopd__row{display:grid;grid-template-columns:44px 1fr;gap:1.1rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.jzc .loopd__row:last-child{border-bottom:none}
.jzc .loopd__row b{font-family:var(--font-display);font-style:italic;font-size:1.5rem;font-weight:500;color:var(--crimson);line-height:1;text-shadow:0 0 22px rgba(255,36,56,.45)}
.jzc .loopd__row--gold b{color:var(--gold);text-shadow:0 0 22px rgba(232,196,124,.45)}
.jzc .loopd__row strong{display:block;font-size:1rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.3rem}
.jzc .loopd__row--gold strong{color:var(--gold)}
.jzc .loopd__row span{color:var(--muted);font-size:.98rem;line-height:1.55}
.jzc .loopd__foot{margin-top:1.9rem;color:var(--muted);font-size:.96rem}
.jzc .loopd__foot em{font-family:var(--font-display);font-style:italic;color:var(--ink);font-size:1.05rem}

/* ---------- 4. SELECTED WORK — 9:16 reels ---------- */
.jzc .reel{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem}
.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}
.jzc .reel__cap{display:flex;justify-content:center;gap:2.2rem;flex-wrap:wrap;margin-top:2.6rem;color:var(--muted);font-size:1.05rem}
.jzc .reel__cap em{font-family:var(--font-display);font-style:italic;color:var(--ink)}

/* ---------- 5a. RESEARCH ORBIT ---------- */
.jzc .orb{display:grid;grid-template-columns:.95fr 1.05fr;gap:3.4rem;align-items:center}
.jzc .orb__fig svg{width:100%;height:auto;overflow:visible}
.jzc .orb__path{fill:none;stroke:rgba(246,243,239,.14);stroke-width:1}
.jzc .orb__link{stroke:url(#jzcGrad);stroke-width:1.2;opacity:.5;stroke-dasharray:2 7}
.jzc .orb__hub circle{fill:rgba(214,0,237,.09);stroke:rgba(214,0,237,.45);stroke-width:1.2}
.jzc .orb__hub text{font-family:var(--font-display);font-style:italic;font-size:24px;fill:#ffffff}
.jzc .orb__sat rect{fill:rgba(20,20,24,.96);stroke:rgba(246,243,239,.18);stroke-width:1}
.jzc .orb__sat text{font-family:"Inter",system-ui,sans-serif;font-size:15px;font-weight:600;letter-spacing:.08em;fill:rgba(246,243,239,.82);text-anchor:middle}
.jzc .orb__list{display:flex;flex-direction:column;gap:.1rem}
.jzc .orb__row{display:grid;grid-template-columns:170px 1fr;gap:1.4rem;padding:1.05rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.jzc .orb__row:last-child{border-bottom:none}
.jzc .orb__row strong{font-size:1rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.jzc .orb__row span{color:var(--muted);font-size:.98rem;line-height:1.55}
.jzc .orb__note{margin-top:2.2rem;font-family:var(--font-display);font-size:1.3rem;font-weight:500;line-height:1.45}
.jzc .orb__note em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- 5b. PLATFORM ADAPT ---------- */
.jzc .plat{display:grid;grid-template-columns:minmax(220px,300px) 130px 1fr;gap:0;align-items:center}
.jzc .plat__src{padding:2rem 1.9rem;border-radius:20px;border:1px solid rgba(214,0,237,.4);background:radial-gradient(ellipse 90% 70% at 50% 0%,rgba(214,0,237,.13),transparent 65%),rgba(255,255,255,.025);position:relative;z-index:2}
.jzc .plat__src p:first-child{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.jzc .plat__src h3{font-size:1.5rem;margin-top:.7rem}
.jzc .plat__src span{display:block;margin-top:.9rem;color:var(--muted);font-size:.95rem;line-height:1.55}
/* the fan's root sits exactly on the concept card's right edge (no negative
   left margin, or the strands start inside the card); its far end tucks under
   the platform tiles so the strands visibly reach them */
.jzc .plat__fan{align-self:stretch;margin:0 -14px 0 0;position:relative;z-index:0}
.jzc .plat__fan svg{width:100%;height:100%;overflow:visible}
.jzc .plat__fan path{fill:none;stroke:url(#jzcGrad);stroke-width:1.2;opacity:.55}
.jzc .plat__out{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;position:relative;z-index:1}
.jzc .plat__p{padding:1.15rem 1rem 1.1rem;border-radius:14px;border:1px solid var(--line);background:rgba(18,18,22,.92);text-align:center;transition:border-color .4s var(--ease-out),transform .4s var(--ease-out)}
.jzc .plat__p:hover{border-color:rgba(214,0,237,.45);transform:translateY(-3px)}
.jzc .plat__p i{display:block;margin:0 auto .7rem;border:1px solid rgba(246,243,239,.42);border-radius:3px}
.jzc .plat__p b{display:block;font-size:.95rem;font-weight:600}
.jzc .plat__p small{display:block;margin-top:.28rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(246,243,239,.45)}
.jzc .plat__foot{margin-top:2.6rem;font-family:var(--font-display);font-size:1.3rem;font-weight:500;line-height:1.45;text-align:center}
.jzc .plat__foot em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- 6. WHY JZ CREATES ---------- */
.jzc .whyc{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.jzc .whyc__card{padding:2.4rem 2.1rem}
/* the icon must be a block or the svg inside resolves 100% against the card */
.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}
/* who it suits — chip strip */
.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)}

/* ---------- 7. ENGAGEMENTS ---------- */
.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)}

/* ---------- full-bleed guard ----------
   A band that sets its own `padding` wipes the horizontal padding it inherits
   from .wrap, so it runs edge to edge. These live inside a plain .wrap div and
   cap their own width instead. Same reason .cta-mid needs its own side padding
   — it is not inside a .wrap at all. */
.jzc .approve,.jzc .engc__note{width:100%}
.jzc .cta-mid{padding:0 var(--pad)}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .jzc .fmt{grid-template-columns:repeat(3,1fr)}
  .jzc .plat{grid-template-columns:1fr;gap:2rem}
  .jzc .plat__fan{display:none}
  .jzc .brand{grid-template-columns:1fr;gap:2.6rem}
  .jzc .loopd{gap:2.4rem}
}
@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 .fmt,.jzc .whyc{grid-template-columns:repeat(2,1fr)}
  .jzc .orb{grid-template-columns:1fr;gap:2.6rem}
  .jzc .reel{grid-template-columns:repeat(3,1fr)}
  .jzc .reel__f:nth-child(n+4){display:none}
  .jzc .engc__note,.jzc .approve{grid-template-columns:1fr}
}
/* below this the ring nodes are too small to aim at — swap the hover panel
   for the plain list, which carries the same seven descriptions */
@media (max-width:900px){
  .jzc .loopd{grid-template-columns:1fr}
  .jzc .loopd__side{display:none}
  .jzc .loopd__list{display:flex}
}
@media (max-width:760px){
  .jzc .orb__row{grid-template-columns:1fr;gap:.35rem}
  .jzc .plat__out{grid-template-columns:repeat(2,1fr)}
  .jzc .brandk__row{grid-template-columns:1fr;gap:.7rem;align-items:start}
  .jzc .gapc,.jzc .pain{grid-template-columns:1fr}
  .jzc .gapc__wk i{height:104px}
}
@media (max-width:640px){
  .jzc .fmt,.jzc .whyc{grid-template-columns:1fr}
  .jzc .reel{grid-template-columns:repeat(2,1fr)}
  .jzc .reel__f:nth-child(n+3){display:none}
  .jzc .loopd__row{grid-template-columns:36px 1fr;gap:.9rem}
  .jzc .capc__n{font-size:2.1rem}
  .jzc .cases{padding:1.8rem 0}
}

/* SVG label text is sized in viewBox units, so it shrinks with the figure.
   Below ~760px the diagrams are narrower than their viewBox and the labels
   fall under 12px — scale them back up in two steps. */
@media (max-width:760px){
  .jzc .loopd__node text.l{font-size:19px}
  .jzc .loopd__node text.n{font-size:26px}
  .jzc .loopd__hub text.a{font-size:37px}
  .jzc .loopd__hub text.b{font-size:15px}
  .jzc .orb__sat text{font-size:19px}
  .jzc .orb__hub text{font-size:29px}
}
@media (max-width:500px){
  .jzc .loopd__node text.l{font-size:26px}
  .jzc .loopd__node text.n{font-size:32px}
  .jzc .loopd__hub text.a{font-size:44px}
  .jzc .loopd__hub text.b{font-size:18px}
  .jzc .orb__sat text{font-size:26px}
  .jzc .orb__hub text{font-size:31px}
}

@media (prefers-reduced-motion:reduce){
  .jzc .loopd__ring{animation:none}
}