/* Dyenzo marketing site, motion layer (docs/marketing.md): the floating header and mega menus, the footer, and the home page's
   stage. Loaded after site.css; every class here starts with dz- so the other pages keep their own look under the new header.
   Motion lives in motion.js (GSAP, ScrollTrigger, Lenis, all served from /site/vendor). Without the script, every part is visible. */
@font-face { font-family: "Archivo Black"; src: url("/site/fonts/ArchivoBlack-Regular.ttf") format("truetype"); font-display: swap; }
:root {
  --c-hi: #2BB3E0; --m-hi: #E63D9A;
  --stage: #0E0F14; --stage-2: #171920; --stage-line: #272A35;
  --dz-ease: cubic-bezier(.22, 1, .36, 1);
  --dz-wrap: 1280px;
}
body.dz { font-family: "Avenir Next", Avenir, "Segoe UI", ui-sans-serif, system-ui, sans-serif; overflow-x: hidden; }
body.dz main { padding-top: 104px; }
body.dz.has-stage main { padding-top: 0; }
.dz-wrap { max-width: var(--dz-wrap); margin: 0 auto; padding: 0 28px; }

/* Header: transparent over the home stage, then a floating dark glass bar. On other pages it starts as the glass bar. */
.dz-top { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: #fff; transition: background-color .45s var(--dz-ease), box-shadow .45s var(--dz-ease), margin .45s var(--dz-ease), border-radius .45s var(--dz-ease); }
.dz-top .bar { display: flex; align-items: center; gap: 26px; height: 74px; }
body:not(.has-stage) .dz-top, .dz-top.scrolled { margin: 10px 14px 0; border-radius: 20px; background: linear-gradient(135deg, rgb(30 33 44 / .78), rgb(14 15 20 / .7)); border: 1px solid rgb(255 255 255 / .12); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 18px 50px rgb(14 15 20 / .28); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
.dz-top .brand img { height: 28px; width: auto; display: block; }
.dz-nav { display: flex; align-items: stretch; height: 100%; margin: 0 0 0 10px; padding: 0; list-style: none; }
.dz-nav > li { display: flex; align-items: center; }
.dz-nav > li > a, .dz-nav > li > button { font: inherit; font-size: 15px; font-weight: 500; color: inherit; background: none; border: 0; padding: 0 15px; height: 100%; display: flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; position: relative; }
.dz-nav > li > a::after, .dz-nav > li > button::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 20px; height: 2px; background: var(--y); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--dz-ease); }
.dz-nav > li:hover > button::after, .dz-nav > li:has(:focus-visible) > button::after, .dz-nav > li > a:hover::after, .dz-nav > li > a[aria-current]::after { transform: scaleX(1); }
.dz-nav i.ph-caret-down { font-size: 12px; transition: transform .3s var(--dz-ease); }
.dz-nav > li:hover i.ph-caret-down, .dz-nav > li:has(:focus-visible) i.ph-caret-down { transform: rotate(180deg); }
.dz-actions { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.dz-actions .btn.cta { min-height: 44px; padding: 0 20px; }

/* The call to action keeps its markup (MarketingSiteTest pins it); here it takes the yellow ink and a sheen. */
.dz .cta { background: var(--y); color: #15161C; border-radius: 14px; position: relative; overflow: hidden; }
.dz .cta:hover { transform: none; box-shadow: 0 10px 30px rgb(245 197 24 / .3); }
.dz .cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--dz-ease); }
.dz .cta:hover::after { transform: translateX(120%); }
.dz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 1.5px solid currentColor; transition: background-color .3s, color .3s, border-color .3s; }
.dz-btn i { transition: transform .3s var(--dz-ease); }
.dz-btn:hover i { transform: translateX(3px); }
.dz-btn.on-dark { color: #fff; border-color: rgb(255 255 255 / .35); }
.dz-btn.on-dark:hover { border-color: #fff; }

/* Mega menus: one panel under the bar, its parts rising in turn. */
.dz-mega { position: absolute; left: 0; right: 0; top: 100%; color: var(--text); background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 20px 20px; box-shadow: 0 40px 80px rgb(14 15 20 / .22); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .5s var(--dz-ease), visibility .5s; }
body.has-stage .dz-top:not(.scrolled) .dz-mega { border-radius: 0; }
.dz-nav > li:hover .dz-mega, .dz-nav > li:has(:focus-visible) .dz-mega { clip-path: inset(0 0 0 0); visibility: visible; }
.dz-mega .inner { max-width: var(--dz-wrap); margin: 0 auto; padding: 26px 28px 28px; }
.dz-mega .rise { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--dz-ease), transform .5s var(--dz-ease); }
.dz-nav > li:hover .rise, .dz-nav > li:has(:focus-visible) .rise { opacity: 1; transform: none; }
.dz-nav > li:hover .rise:nth-child(2), .dz-nav > li:has(:focus-visible) .rise:nth-child(2) { transition-delay: .06s; }
.dz-nav > li:hover .rise:nth-child(3), .dz-nav > li:has(:focus-visible) .rise:nth-child(3) { transition-delay: .12s; }
.dz-aud { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.dz-aud-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 170px; padding: 20px 22px; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; background: var(--stage); }
.dz-aud-card .dz-dots { position: absolute; inset: 0; transition: transform .8s var(--dz-ease); }
.dz-aud-card:hover .dz-dots { transform: scale(1.05); }
.dz-aud-card > *:not(.dz-dots) { position: relative; }
.dz-aud-card strong { font-size: 19px; }
.dz-aud-card span { font-size: 14px; opacity: .8; }
.dz-aud-card .go { position: absolute; right: 16px; bottom: 18px; width: 40px; height: 40px; border-radius: 999px; border: 1.5px solid rgb(255 255 255 / .7); display: grid; place-items: center; transition: background-color .3s, color .3s; }
.dz-aud-card:hover .go { background: #fff; color: #15161C; }
.dz-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin-top: 10px; }
.dz-links a { display: flex; justify-content: space-between; align-items: center; padding: 11px 2px; text-decoration: none; font-weight: 500; font-size: 15px; color: var(--text); border-bottom: 1px solid var(--line); transition: color .2s, padding .3s var(--dz-ease); }
.dz-links a:hover { color: var(--c); padding-left: 8px; }
.dz-mega-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; gap: 24px; flex-wrap: wrap; font-size: 15px; }
.dz-mega-foot a { text-decoration: none; font-weight: 600; color: var(--c); display: inline-flex; gap: 6px; align-items: center; }
.dz-plans-menu { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 18px; align-items: stretch; }
.dz-plans-menu a { display: block; padding: 20px; border-radius: 14px; background: var(--surface-2); text-decoration: none; color: var(--text); transition: transform .35s var(--dz-ease), box-shadow .35s var(--dz-ease); }
.dz-plans-menu a:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgb(14 15 20 / .1); }
.dz-plans-menu strong { display: block; font-size: 16px; }
.dz-plans-menu span { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
.dz-plans-menu em { display: block; font-style: normal; font-weight: 600; margin-top: 14px; }
.dz-plans-menu a.all { background: var(--stage); color: #fff; }
.dz-plans-menu a.all span { color: rgb(255 255 255 / .7); }
.dz-res { display: grid; grid-template-columns: 1fr 1fr 340px; gap: 32px; }
.dz-res h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.dz-res a.item { display: block; text-decoration: none; padding: 10px 0; color: var(--text); }
.dz-res a.item strong { font-size: 15px; }
.dz-res a.item span { display: block; color: var(--muted); font-size: 14px; }
.dz-res a.item:hover strong { color: var(--c); }
.dz-res .feat { display: block; text-decoration: none; color: var(--text); background: var(--surface-2); border-radius: 18px; padding: 16px; }
.dz-res .feat .dz-dots { position: relative; display: block; height: 118px; border-radius: 10px; }
.dz-res .feat strong { display: block; margin-top: 12px; }
.dz-res .feat span.muted { font-size: 14px; }

/* The halftone of the four inks, used where a picture would sit. */
.dz-dots { background-color: #1d2029; background-image:
    radial-gradient(circle at 25% 30%, rgb(10 126 164 / .65) 0 2px, transparent 2.5px),
    radial-gradient(circle at 75% 70%, rgb(200 21 122 / .55) 0 2px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, rgb(245 197 24 / .4) 0 1.5px, transparent 2px),
    linear-gradient(135deg, #2a2e3a, #15161C);
  background-size: 14px 14px, 18px 18px, 11px 11px, cover; }

/* Hero stage. */
.dz-hero { position: relative; min-height: 100dvh; background: var(--stage); color: #fff; overflow: hidden; display: flex; align-items: center; padding: 0; }
.dz-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dz-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 45%, transparent, rgb(14 15 20 / .72)); pointer-events: none; }
.dz-hero .dz-wrap { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; padding-top: 120px; padding-bottom: 80px; }
.dz-hero h1 { font-size: clamp(2.8rem, 1.2rem + 5.2vw, 6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; margin: 0; color: #fff; text-wrap: balance; }
.dz-hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; }
.dz-hero h1 .w > span { display: inline-block; }
.dz-hero h1 .ink { color: var(--y); }
.dz-hero .sub { margin: 26px 0 0; max-width: 44ch; font-size: 1.22rem; color: rgb(255 255 255 / .74); }
.dz-hero .ctas { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
.dz-hero .btn.cta { min-height: 54px; padding: 0 28px; }
.dz-plates { position: relative; aspect-ratio: 1; width: min(100%, 460px); justify-self: center; }
.dz-plate { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 22%; mix-blend-mode: screen; will-change: transform; }
.dz-plate.c { background: var(--c-hi); left: 0; top: 0; }
.dz-plate.m { background: var(--m-hi); left: 21%; top: 7%; }
.dz-plate.y { background: var(--y); left: 42%; top: 14%; }
.dz-plate.k { background: #F4F4F1; left: 21%; top: 34%; mix-blend-mode: normal; display: grid; place-items: center; box-shadow: 0 30px 60px rgb(0 0 0 / .45); }
.dz-plate.k span { font: 400 clamp(5rem, 9vw, 9rem) "Archivo Black", system-ui, sans-serif; color: #15161C; line-height: 1; }
.dz-glass { background: linear-gradient(135deg, rgb(34 37 48 / .62), rgb(20 22 30 / .42)); border: 1px solid rgb(255 255 255 / .18); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 20px 50px rgb(0 0 0 / .35); }
.dz-toast { position: absolute; z-index: 3; display: flex; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 16px; color: #fff; font-size: 14px; white-space: nowrap; }
.dz-toast i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; }
.dz-toast strong { display: block; font-size: 14px; font-weight: 600; }
.dz-toast span { color: rgb(255 255 255 / .72); font-size: 13px; }
.dz-toast.t1 { left: -14%; top: 6%; } .dz-toast.t1 i { background: rgb(43 179 224 / .28); color: var(--c-hi); }
.dz-toast.t2 { right: -10%; top: 46%; } .dz-toast.t2 i { background: rgb(245 197 24 / .25); color: var(--y); }
.dz-toast.t3 { left: -4%; bottom: 0; } .dz-toast.t3 i { background: rgb(230 61 154 / .28); color: var(--m-hi); }
.dz-cue { position: absolute; z-index: 2; left: 50%; bottom: 26px; width: 1.5px; height: 46px; background: linear-gradient(var(--y), transparent); }

/* Connects with: one lane. */
.dz-works { background: var(--stage); color: rgb(255 255 255 / .6); border-top: 1px solid var(--stage-line); overflow: hidden; }
.dz-works .lane { display: flex; gap: 72px; padding: 26px 0; width: max-content; align-items: center; }
.dz-works img { height: 26px; width: auto; opacity: .62; }
.dz-works .k { font-size: 14px; white-space: nowrap; }

/* Shared section rhythm. */
.dz-sec { position: relative; padding: 130px 0; }
.dz-sec h2, .dz-pin h2 { font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.04; margin: 0; }
.dz-sec h3, .dz-pin h3 { letter-spacing: -0.015em; margin: 0; }
.dz-lede { color: var(--muted); font-size: 1.12rem; max-width: 52ch; margin: 18px 0 0; }

/* Problem: the scraps that line up. */
.dz-problem .dz-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.dz-problem .tag { margin: 18px 0 0; color: var(--m-text, var(--m)); font-weight: 600; font-size: 1.15rem; }
.dz-chaos { position: relative; height: 460px; }
.dz-scrap { position: absolute; width: 62%; padding: 20px 22px; border-radius: 18px; background: var(--surface); box-shadow: 0 24px 50px rgb(14 15 20 / .1); border: 1px solid var(--line); will-change: transform; }
.dz-scrap i { font-size: 26px; color: var(--m); }
.dz-scrap strong { display: block; margin-top: 8px; font-size: 1.05rem; }
.dz-scrap span { color: var(--muted); font-size: 15px; }
.dz-scrap:nth-child(1) { left: 0; top: 0; }
.dz-scrap:nth-child(2) { left: 19%; top: 150px; }
.dz-scrap:nth-child(3) { left: 38%; top: 300px; }

/* The wheel of modules. */
.dz-eco { background: var(--stage); color: #fff; }
.dz-eco .dz-pin { min-height: 100dvh; padding-top: 84px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.dz-eco .dz-lede { color: rgb(255 255 255 / .7); }
.dz-readout { margin-top: 34px; min-height: 84px; padding: 18px 20px; border-radius: 14px; }
.dz-readout strong { display: block; font-size: 1.1rem; }
.dz-readout span { color: rgb(255 255 255 / .68); font-size: 15px; }
.dz-wheel { width: 100%; max-width: min(640px, 70vh); justify-self: center; overflow: visible; }
.dz-wheel .ring { fill: none; stroke: var(--stage-line); stroke-width: 1.5; stroke-dasharray: 3 7; }
.dz-wheel .spoke { stroke: rgb(255 255 255 / .22); stroke-width: 1.5; fill: none; }
.dz-wheel a { text-decoration: none; }
.dz-wheel .bub { fill: var(--stage-2); stroke-width: 3; transition: fill .3s; }
.dz-wheel .lbl { font: 600 15px "Avenir Next", Avenir, system-ui, sans-serif; fill: #fff; pointer-events: none; }
.dz-wheel .ink-c .bub { stroke: var(--c-hi); } .dz-wheel .ink-m .bub { stroke: var(--m-hi); } .dz-wheel .ink-y .bub { stroke: var(--y); } .dz-wheel .ink-k .bub { stroke: #fff; }
.dz-wheel .node { transform-box: fill-box; transform-origin: center; }
.dz-wheel .node.on .bub, .dz-wheel .node:hover .bub, .dz-wheel .node:focus-visible .bub { fill: #2a2d38; }
.dz-wheel .hub { fill: var(--y); }
.dz-wheel .hub-t { font: 400 28px "Archivo Black", system-ui, sans-serif; fill: #15161C; }
.dz-wheel .hub-s { font: 600 13px "Avenir Next", Avenir, system-ui, sans-serif; fill: #15161C; }
.dz-wheel .halo { fill: none; stroke: var(--y); stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; }

/* Story: from design to roll. */
.dz-story .dz-pin { min-height: 100dvh; padding-top: 84px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.dz-steps { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 6px; }
.dz-steps li { padding: 16px 18px; border-radius: 12px; border-left: 3px solid var(--line); transition: background-color .4s var(--dz-ease), border-color .4s var(--dz-ease); }
.dz-steps li strong { display: block; font-size: 1.08rem; color: var(--muted); transition: color .4s; }
.dz-steps li span { display: block; color: var(--muted); font-size: 15px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--dz-ease), opacity .5s var(--dz-ease); }
.dz-steps li.on { background: var(--surface); border-left-color: var(--c); box-shadow: 0 14px 30px rgb(14 15 20 / .06); }
.dz-steps li.on strong { color: var(--text); }
.dz-steps li.on span { max-height: 80px; opacity: 1; margin-top: 4px; }
.dz-bar { margin-top: 26px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.dz-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c), var(--m), var(--y)); transform-origin: left; transform: scaleX(0); }
.dz-stage { position: relative; aspect-ratio: 4 / 3; border-radius: 26px; background: var(--stage); overflow: hidden; box-shadow: 0 40px 80px rgb(14 15 20 / .22); }
.dz-scene { position: absolute; inset: 0; display: grid; place-items: center; padding: 34px; opacity: 0; color: #fff; }
.dz-scene.first { opacity: 1; }
.dz-scene svg { width: 100%; height: 100%; overflow: visible; }
.dz-scene .cap { position: absolute; left: 22px; top: 18px; font-size: 13px; color: rgb(255 255 255 / .6); }
.dz-scene .s-ink { stroke: var(--c-hi); } .dz-scene .s-mag { stroke: var(--m-hi); } .dz-scene .s-yel { stroke: var(--y); } .dz-scene .s-wht { stroke: rgb(255 255 255 / .85); }
.dz-scene .f-soft { fill: rgb(43 179 224 / .14); } .dz-scene .f-mag { fill: rgb(230 61 154 / .18); } .dz-scene .f-yel { fill: rgb(245 197 24 / .2); }
.dz-scene .t { fill: #fff; font: 600 15px "Avenir Next", Avenir, system-ui, sans-serif; } .dz-scene .t-m { fill: rgb(255 255 255 / .62); font: 500 13px "Avenir Next", Avenir, system-ui, sans-serif; } .dz-scene .t-big { fill: #fff; font: 400 54px "Archivo Black", system-ui, sans-serif; }
.dz-scene .draw { fill: none; stroke-width: 2; stroke-linejoin: round; }

/* Who it is for: a track of cards, each with one of our drawings. */
.dz-who { background: var(--surface); overflow: hidden; }
.dz-who .head { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.dz-who .head p { max-width: 40ch; color: var(--muted); margin: 0; }
.dz-track { display: flex; gap: 22px; margin-top: 44px; width: max-content; padding-right: 28px; }
.dz-card { width: 400px; flex: none; min-height: 470px; border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 18px; background: var(--bg); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform .45s var(--dz-ease), box-shadow .45s var(--dz-ease); }
.dz-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgb(14 15 20 / .12); }
.dz-card .frame { box-shadow: none; border-width: 1px; }
.dz-card .who { font-size: 13px; font-weight: 600; color: var(--c); }
.dz-card h3 { font-size: 1.4rem; margin-top: 4px; }
.dz-card p { color: var(--muted); font-size: 15px; margin: 6px 0 0; }
.dz-card.intro { background: var(--stage); color: #fff; border-color: transparent; justify-content: flex-end; }
.dz-card.intro.mag { background: var(--m); }
.dz-card.intro .who { color: var(--y); }
.dz-card.intro.mag .who { color: #fff; }
.dz-card.intro h3 { font-size: 2rem; letter-spacing: -0.03em; }
.dz-card.intro p { color: rgb(255 255 255 / .78); }

/* What sets us apart. */
.dz-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.dz-tile { grid-column: span 2; border-radius: 22px; padding: 30px; background: var(--surface); border: 1px solid var(--line); transition: box-shadow .4s var(--dz-ease); }
.dz-tile:hover { box-shadow: 0 30px 60px rgb(14 15 20 / .1); }
.dz-tile.w3 { grid-column: span 3; }
.dz-tile i { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; background: var(--c-soft, #E3F2F7); color: var(--c); }
.dz-tile h3 { margin-top: 20px; font-size: 1.2rem; }
.dz-tile p { margin: 8px 0 0; color: var(--muted); }
.dz-tile.dark { background: var(--stage); color: #fff; border-color: transparent; }
.dz-tile.dark i { background: rgb(245 197 24 / .16); color: var(--y); }
.dz-tile.dark p { color: rgb(255 255 255 / .72); }

/* Plans: notched tiles, the arrow sitting in the notch. */
.dz-plans { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dz-plan-wrap { position: relative; display: grid; }
.dz-plan { --n: 70px; position: relative; display: flex; flex-direction: column; min-height: 340px; padding: 30px; border-radius: 26px; background: var(--stage); color: #fff; text-decoration: none; overflow: hidden;
  -webkit-mask: radial-gradient(circle var(--n) at 100% 100%, transparent 98%, #000 100%); mask: radial-gradient(circle var(--n) at 100% 100%, transparent 98%, #000 100%); }
.dz-plan .dz-dots { position: absolute; inset: 0; opacity: .5; }
.dz-plan > *:not(.dz-dots) { position: relative; }
.dz-plan .name { font-size: 1.5rem; font-weight: 600; }
.dz-plan .price { margin-top: 18px; font-size: 2.6rem; font-weight: 600; letter-spacing: -0.03em; }
.dz-plan .price small { font-size: 1rem; font-weight: 500; opacity: .7; }
.dz-plan ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 6px; color: rgb(255 255 255 / .8); font-size: 15px; }
.dz-plan ul li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--y); margin-right: 10px; vertical-align: 2px; }
.dz-plan-wrap.mid .dz-plan { background: var(--c); }
.dz-plan-wrap .notch { position: absolute; right: 6px; bottom: 6px; width: 56px; height: 56px; border-radius: 999px; background: var(--y); color: #15161C; display: grid; place-items: center; font-size: 22px; text-decoration: none; transition: transform .45s var(--dz-ease); }
.dz-plan-wrap:hover .notch { transform: rotate(-45deg); }
.dz-plans-note { margin-top: 18px; color: var(--muted); font-size: 15px; }

/* Questions. */
.dz-faq .dz-wrap { max-width: 880px; }
.dz-faq h2 { text-align: center; margin-bottom: 36px; }
.dz-faq details { border-bottom: 1px solid var(--line); }
.dz-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 1.15rem; font-weight: 600; }
.dz-faq summary::-webkit-details-marker { display: none; }
.dz-faq summary i { transition: transform .35s var(--dz-ease); }
.dz-faq details[open] summary i { transform: rotate(45deg); }
.dz-faq details p { margin: 0; padding: 0 0 22px; color: var(--muted); max-width: 60ch; }

/* Close. */
.dz-close { background: var(--stage); color: #fff; text-align: center; overflow: hidden; }
.dz-close h2 { font-size: clamp(2.6rem, 1.2rem + 5vw, 6rem); }
.dz-close .dz-lede { margin: 20px auto 0; color: rgb(255 255 255 / .7); }
.dz-close .ctas { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.dz-mini { display: flex; justify-content: center; margin-bottom: 36px; }
.dz-mini i { width: 34px; height: 34px; border-radius: 9px; margin: 0 -6px; mix-blend-mode: screen; }

/* Footer. */
.dz-foot { background: var(--stage); color: rgb(255 255 255 / .62); border-top: 1px solid var(--stage-line); padding: 64px 0 40px; }
.dz-foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; }
.dz-foot h3 { color: #fff; font-size: 14px; margin: 0 0 12px; letter-spacing: 0; }
.dz-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dz-foot a { color: inherit; text-decoration: none; }
.dz-foot a:hover { color: #fff; }
.dz-foot .small { margin-top: 40px; font-size: 14px; }

/* Before motion.js starts, everything shows. It hides only what it animates. */
html.dz-motion .dz-reveal { opacity: 0; transform: translateY(40px); }

/* Dark mode: the light sections follow the reader's setting; the stage is dark either way. */
@media (prefers-color-scheme: dark) {
  .dz-mega { background: var(--surface); }
  .dz-card.intro.mag { background: #A3135F; }
}

/* Glass falls back to solid where transparency is reduced. */
@media (prefers-reduced-transparency: reduce) {
  .dz-glass, body:not(.has-stage) .dz-top, .dz-top.scrolled { background: #1b1d25; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.dz-menu { display: none; }
@media (max-width: 1020px) {
  .dz-nav, .dz-actions .btn.cta { display: none; }
  .dz-menu { display: block; margin-left: auto; }
  .dz-menu summary { list-style: none; cursor: pointer; border: 1.5px solid currentColor; border-radius: 999px; padding: 7px 16px; font-weight: 600; font-size: 15px; }
  .dz-menu summary::-webkit-details-marker { display: none; }
  .dz-menu[open] nav { position: absolute; left: 0; right: 0; top: 78px; background: var(--surface); color: var(--text); padding: 12px 24px 24px; border-radius: 20px; box-shadow: 0 30px 60px rgb(0 0 0 / .25); }
  .dz-menu nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; color: var(--text); }
  .dz-menu nav a.cta { margin-top: 16px; text-align: center; border: 0; }
  .dz-hero .dz-wrap, .dz-problem .dz-wrap, .dz-eco .dz-pin, .dz-story .dz-pin { grid-template-columns: 1fr; }
  .dz-plates { width: min(78%, 360px); }
  .dz-toast { display: none; }
  .dz-chaos { height: auto; display: grid; gap: 14px; }
  .dz-scrap { position: static; width: 100%; }
  .dz-eco .dz-pin { padding-top: 110px; padding-bottom: 110px; }
  .dz-story .dz-pin { padding-top: 40px; padding-bottom: 40px; gap: 36px; }
  .dz-who .head { flex-direction: column; align-items: start; }
  .dz-track { width: auto; flex-direction: column; padding: 0 28px; margin-left: 0 !important; }
  .dz-card { width: 100%; min-height: 0; }
  .dz-card.intro { margin-left: 0 !important; min-height: 220px; }
  .dz-grid { grid-template-columns: 1fr; }
  .dz-tile, .dz-tile.w3 { grid-column: auto; }
  .dz-plans { grid-template-columns: 1fr; }
  .dz-foot .cols { grid-template-columns: 1fr 1fr; }
  .dz-sec { padding: 90px 0; }
}
@media (max-width: 560px) { .dz-wrap { padding: 0 18px; } .dz-track { padding: 0 18px; } .dz-hero .dz-wrap { padding-top: 110px; } .dz-foot .cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dz *, .dz *::before, .dz *::after { animation: none !important; transition: none !important; } }

/* Keyword pages (marketing/page.blade.php): hero, breadcrumbs, prose, card lists, calculators. */
.dz-page-hero { padding: 40px 0 24px; }
.dz-page-hero h1 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.8rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; margin: 8px 0 0; max-width: 20ch; }
.dz-page-hero .ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.dz-page-hero .dz-btn { color: var(--text); border-color: var(--line); }
.dz-crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.dz-crumbs a { color: var(--muted); text-decoration: none; } .dz-crumbs a:hover { color: var(--text); }
.dz-eyebrow { margin: 18px 0 0; font-weight: 600; font-size: 14px; color: var(--c); }
.dz-meta { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.dz-prose { max-width: 820px; }
.dz-prose h2 { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; margin: 36px 0 10px; }
.dz-prose p, .dz-prose li { color: var(--muted); font-size: 1.05rem; }
.dz-prose ul { padding-left: 20px; display: grid; gap: 6px; }
.dz-note { margin-top: 32px; padding: 14px 16px; border-radius: 12px; background: var(--surface); font-size: 14px !important; }
.dz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.dz-card-link { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform .3s var(--dz-ease), box-shadow .3s var(--dz-ease); }
.dz-card-link:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgb(14 15 20 / .08); }
.dz-card-link strong { font-size: 1.05rem; } .dz-card-link span { color: var(--muted); font-size: 14px; }
.dz-related-h { font-size: 1.4rem; font-weight: 600; margin: 0 0 16px; }
.dz-calc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); max-width: 900px; }
.dz-calc label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.dz-calc input { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.dz-calc-out { grid-column: 1 / -1; display: grid; gap: 4px; padding: 16px; border-radius: 14px; background: var(--stage); color: #fff; }
.dz-calc-out strong { font-size: 1.8rem; } .dz-calc-out span { color: rgb(255 255 255 / .7); }

/* Long copy on keyword pages: comparison tables and product screenshots. */
.dz-table-wrap { overflow-x: auto; margin: 1.2rem 0 1.6rem; }
.dz-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.dz-table th, .dz-table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid rgb(0 0 0 / .1); vertical-align: top; }
.dz-table thead th { font-weight: 700; border-bottom-width: 2px; }
.dz-shot { margin: 1.4rem 0 2rem; }
.dz-shot img { width: 100%; height: auto; border-radius: 12px; border: 1px solid rgb(0 0 0 / .1); box-shadow: 0 12px 40px rgb(0 0 0 / .08); }
.dz-shot figcaption { font-size: .85rem; opacity: .7; margin-top: .5rem; }