/* The bold layer: alternating bands, angled edges, moving shapes, marquee, icons.
   Loaded last so it can override earlier styles. Motion is switched off for reduced-motion users. */

/* Scroll progress */
.jz-progress { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: var(--grad); z-index: 80; }

/* Cursor glow (desktop only, added by JS) */
.jz-glow {
  position: fixed; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(124, 58, 237, .18), rgba(34, 211, 238, .08) 45%, transparent 70%);
  transform: translate(-50%, -50%); transition: opacity .3s ease; opacity: 0;
}

/* Alternating bands with angled edges */
main > section { position: relative; overflow: hidden; }
main > section > .wrap { position: relative; z-index: 1; }
main > section.tone-dark {
  background: #0f0b2e; color: #f5f3ff;
  clip-path: polygon(0 48px, 100% 0, 100% calc(100% - 48px), 0 100%);
  margin: 36px 0; padding-top: 110px; padding-bottom: 110px;
}
main > section.tone-pink {
  background: linear-gradient(135deg, #7c3aed 0%, #c026d3 55%, #f472b6 100%); color: #fff;
  clip-path: polygon(0 0, 100% 48px, 100% 100%, 0 calc(100% - 48px));
  margin: 36px 0; padding-top: 110px; padding-bottom: 110px;
}
main > section.tone-dark h1, main > section.tone-dark h2, main > section.tone-dark h3,
main > section.tone-pink h1, main > section.tone-pink h2, main > section.tone-pink h3 { color: #fff; }
main > section.tone-dark p, main > section.tone-dark li, main > section.tone-dark .intro,
main > section.tone-pink p, main > section.tone-pink li, main > section.tone-pink .intro { color: #e4e1ff; }
main > section.tone-dark .card, main > section.tone-dark .step-card, main > section.tone-dark .plan,
main > section.tone-dark details, main > section.tone-dark .pay-table, main > section.tone-dark .calc-box {
  background: #1a1545; color: #f5f3ff; border: 1px solid rgba(255, 255, 255, .08);
}
main > section.tone-dark .pay-table th, main > section.tone-dark .pay-table td { color: #f5f3ff; border-color: rgba(255,255,255,.08); }
main > section.tone-pink .card, main > section.tone-pink .step-card, main > section.tone-pink .plan,
main > section.tone-pink details, main > section.tone-pink .pay-table {
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px);
}
main > section.tone-pink .pay-table th, main > section.tone-pink .pay-table td { color: #fff; border-color: rgba(255,255,255,.25); }
main > section.tone-dark .card h3, main > section.tone-dark .step-card h3, main > section.tone-dark .plan h3,
main > section.tone-pink .card h3, main > section.tone-pink .step-card h3, main > section.tone-pink .plan h3 { color: #fff; }
main > section.tone-dark .card p, main > section.tone-dark .step-card p,
main > section.tone-pink .card p, main > section.tone-pink .step-card p { color: inherit; opacity: .9; }
main > section.tone-dark .card a, main > section.tone-dark a, main > section.tone-pink a { color: #67e8f9; }
main > section.tone-pink .btn:not(.ghost) { background: #fff; color: #7c1d6f; }

/* Floating shapes */
.jz-shape { position: absolute; pointer-events: none; z-index: 0; opacity: .55; animation: jz-drift var(--dur, 14s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.jz-shape.ring { border-radius: 50%; border: 10px solid var(--c, #22d3ee); background: none; }
.jz-shape.dot { border-radius: 50%; background: var(--c, #f472b6); }
.jz-shape.square { border-radius: 18%; background: linear-gradient(135deg, var(--c, #7c3aed), #22d3ee); transform: rotate(var(--rot, 20deg)); }
.jz-shape.blob { border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%; background: linear-gradient(120deg, var(--c, #f472b6), #7c3aed); }
@keyframes jz-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(var(--dx, 24px), var(--dy, -30px)) rotate(120deg); }
  66%  { transform: translate(calc(var(--dx, 24px) * -0.6), calc(var(--dy, -30px) * 0.4)) rotate(240deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

/* Headings: the colour flows diagonally, top-left to bottom-right, and eases back and forth. */
.grad-text {
  background-image: linear-gradient(135deg, #22d3ee 0%, #7c3aed 50%, #f472b6 100%);
  background-size: 200% 200%;
  animation: jz-flow 8s ease-in-out infinite alternate;
}
@keyframes jz-flow { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

/* Logo: one highlight sweep across the word when the page loads, then it settles to the normal colours. */
.brand .grad-text, .foot-brand .grad-text {
  background-image: linear-gradient(115deg, transparent 0 44%, rgba(255, 255, 255, .8) 50%, transparent 56% 100%),
                    linear-gradient(135deg, #22d3ee 0%, #7c3aed 50%, #f472b6 100%);
  background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat;
  animation: jz-sweep-once 1.8s ease-out 0.3s 1 both;
}
@keyframes jz-sweep-once { from { background-position: 0% 0%, 0 0; } to { background-position: 100% 0%, 0 0; } }

/* Big headings */
.home-hero h1 { font-size: clamp(44px, 6.2vw, 88px); line-height: .98; letter-spacing: -.025em; }
main > section h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -.02em; }

/* Marquee ticker */
.jz-marquee-wrap { overflow: hidden; margin: 40px 0; padding: 12px 0; }
.jz-marquee { background: #0f0b2e; color: #fff; padding: 16px 0; white-space: nowrap; transform: rotate(-1.5deg); position: relative; z-index: 2; }
.jz-marquee-track { display: inline-flex; gap: 36px; animation: jz-marq 26s linear infinite; font-weight: 800; font-size: clamp(20px, 3vw, 34px); text-transform: uppercase; letter-spacing: .02em; }
.jz-marquee span { color: #67e8f9; }
.jz-marquee em { color: #f472b6; font-style: normal; }
@keyframes jz-marq { to { transform: translateX(-50%); } }

/* Icon badges on cards */
.jz-icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 10px;
  background: linear-gradient(135deg, #22d3ee, #7c3aed 60%, #f472b6); box-shadow: 0 10px 24px -12px rgba(124, 58, 237, .7);
}
.jz-icon svg { width: 24px; height: 24px; }

/* Buttons: a little lift and a magnetic pull (JS sets --mx/--my) */
.btn { transition: transform .2s ease, box-shadow .25s ease; transform: translate(var(--mx, 0px), var(--my, 0px)); }
.btn:not(.ghost):hover { box-shadow: 0 16px 34px -14px rgba(124, 58, 237, .65); }

/* Cards lift and tilt (JS sets --rx/--ry) */
.card, .step-card, .plan { transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease, box-shadow .3s ease; }

/* Pictures: a soft reveal when they come into view */
.card-art, .page-art { transition: transform .5s ease; }
.card:hover .card-art { transform: scale(1.03); }

/* Confetti canvas */
.jz-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }

/* Reduced motion: keep the layout, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .jz-shape, .jz-marquee-track, .grad-text, .brand .grad-text, .foot-brand .grad-text { animation: none !important; }
  .card, .step-card, .plan, .btn { transform: none !important; transition: none !important; }
  .jz-glow, .jz-confetti { display: none !important; }
}

/* Smaller screens: fewer shapes, marquee a bit smaller */
@media (max-width: 640px) {
  main > section.tone-dark, main > section.tone-pink { clip-path: polygon(0 24px, 100% 0, 100% calc(100% - 24px), 0 100%); padding-top: 80px; padding-bottom: 80px; }
  .jz-shape { opacity: .35; }
  .jz-marquee-wrap { margin: 28px 0; }
}

/* Intro text on the coloured bands must stay readable. */
main > section.tone-dark .intro, main > section.tone-dark .intro * { color: #c4bfff !important; }
main > section.tone-pink .intro, main > section.tone-pink .intro * { color: #f5e8ff !important; }

/* ---- Stand-out pieces (see CLAUDE.md: anything that stands out) ---- */
.jz-sticker {
  display: inline-block; margin: 14px 0 12px; padding: 8px 18px; border-radius: 999px;
  background: linear-gradient(120deg, #22d3ee 0%, #7c3aed 55%, #f472b6 100%); color: #fff;
  font-weight: 900; font-size: clamp(1rem, 2.4vw, 1.2rem); letter-spacing: -.01em; line-height: 1.2; white-space: nowrap;
  transform: rotate(-3deg); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #7c3aed, 0 18px 34px -14px rgba(124, 58, 237, .8);
  animation: jz-wobble 3.2s ease-in-out infinite; transform-origin: 30% 50%;
}
@keyframes jz-wobble { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(-5deg) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .jz-sticker { animation: none !important; } }

/* ---- Smaller pictures, larger text ---- */
body { font-size: 18px; }
.card-art, .step-card .card-art { max-width: 220px; aspect-ratio: 4 / 3; margin-bottom: 12px; }
.page-art { max-width: 260px; }
.card p, .step-card p { font-size: 1.12rem; line-height: 1.6; }
.card h3, .step-card h3 { font-size: 1.3rem; }
.intro { font-size: 1.2rem; }
.ticks li { font-size: 1.12rem; }

/* The hook line: centred, with the pill inside the sentence. */
.jz-lead { text-align: center; font-size: clamp(1.35rem, 4.4vw, 2rem); font-weight: 800; line-height: 1.7; margin: 20px 0 16px; color: var(--text); }
.jz-lead .jz-sticker { font-size: clamp(1.2rem, 4vw, 1.8rem); padding: 10px 22px; margin: 10px 0 12px; transform: rotate(-3deg); }

/* ---- Quirky pieces ---- */
/* Spinning badge with circling text */
.jz-spin { position: relative; width: 132px; height: 132px; margin: 22px 0 6px; display: grid; place-items: center; }
.jz-spin svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: jz-spin 14s linear infinite; }
.jz-spin text { font-size: 15.5px; font-weight: 900; letter-spacing: .12em; fill: #0f0b2e; }
.jz-spin span { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, #22d3ee, #7c3aed 60%, #f472b6); box-shadow: 0 12px 26px -10px rgba(124,58,237,.8); }
@keyframes jz-spin { to { transform: rotate(360deg); } }

/* Big numbers on the steps, like a poster */
.step-card .num { font-size: 4.2rem; line-height: 1; font-weight: 900; background: linear-gradient(135deg, #22d3ee, #7c3aed 55%, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 4px; }
main > section.tone-dark .step-card .num, main > section.tone-pink .step-card .num { color: #fff; background: none; -webkit-background-clip: border-box; background-clip: border-box; text-shadow: 0 6px 0 rgba(15, 11, 46, .28); }

/* Buttons wiggle when touched or hovered (desktop and touch) */
.btn:not(.ghost):hover { animation: jz-wiggle .5s ease; }
@keyframes jz-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -2deg; } 75% { rotate: 2deg; } }

/* Big section headings that stand out */
main > section h2 { text-transform: none; }

@media (prefers-reduced-motion: reduce) { .jz-spin svg, .btn:not(.ghost):hover { animation: none !important; } }

/* ---- Hero colour glow ---- */
.home-hero { position: relative; overflow: hidden; }
.home-hero::before {
  content: ""; position: absolute; inset: -25% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(124, 58, 237, .20), transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(34, 211, 238, .22), transparent 40%),
    radial-gradient(circle at 62% 92%, rgba(244, 114, 182, .18), transparent 45%);
  animation: jz-mesh 16s ease-in-out infinite alternate;
}
.home-hero > .wrap { position: relative; z-index: 1; }
@keyframes jz-mesh { to { transform: translate3d(-4%, 3%, 0) scale(1.06); } }

/* ---- "See it in your colours" demo ---- */
@property --p { syntax: '<color>'; inherits: true; initial-value: #4f46e5; }
@property --a { syntax: '<color>'; inherits: true; initial-value: #22d3ee; }
.demo-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .demo-grid { grid-template-columns: 1fr 1.1fr; } }
.demo-eyebrow { display: inline-block; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; background: #0f0b2e; color: #67e8f9; }
.demo-pick { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 12px; }
.demo-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 2px solid #ddd9f5; background: #fff; font: inherit; font-weight: 700; cursor: pointer; color: var(--text); transition: transform .2s ease, border-color .2s ease; }
.demo-pill:hover { transform: translateY(-2px); }
.demo-pill i { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--c1, #4f46e5) 50%, var(--c2, #22d3ee) 50%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.demo-pill[aria-pressed=true] { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.18); }
.demo-pill:nth-child(1) i { --c1: #4f46e5; --c2: #22d3ee; }
.demo-pill:nth-child(2) i { --c1: #be185d; --c2: #7e22ce; }
.demo-pill:nth-child(3) i { --c1: #166534; --c2: #84cc16; }
.demo-pill:nth-child(4) i { --c1: #1e3a8a; --c2: #f59e0b; }
.mock { --p: #4f46e5; --a: #22d3ee; transition: --p .7s ease, --a .7s ease; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(15, 11, 46, .55); transform: rotate(-1.2deg); }
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f3f1ff; }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c7c3e6; }
.mock-bar i:nth-child(1) { background: #f472b6; } .mock-bar i:nth-child(2) { background: #facc15; } .mock-bar i:nth-child(3) { background: #22d3ee; }
.mock-bar span { margin-left: 10px; font-size: .85rem; color: #4b5563; font-weight: 600; }
.mock-hero { display: grid; gap: 10px; padding: 34px 24px; background: linear-gradient(135deg, var(--p), var(--a)); color: #fff; transition: background .7s ease; }
.mock-kicker { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.mock-hero strong { font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.1; max-width: 16ch; }
.mock-btn { justify-self: start; padding: 10px 18px; border-radius: 999px; background: #fff; color: var(--p); font-weight: 800; transition: color .7s ease; }
.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; }
.mock-cards div { padding: 14px; border-radius: 12px; background: #f6f5ff; border-top: 4px solid var(--a); transition: border-color .7s ease; }
.mock-cards b { display: block; color: var(--p); font-size: .95rem; transition: color .7s ease; }
.mock-cards span { font-size: .8rem; color: #4b5563; }
@media (max-width: 480px) { .mock-cards { grid-template-columns: 1fr; } .mock { transform: none; } }
@media (prefers-reduced-motion: reduce) { .home-hero::before, .mock, .mock-hero, .mock-btn, .mock-cards div, .mock-cards b { animation: none !important; transition: none !important; } }

/* ---- Pricing: two plans side by side ---- */
.plans { display: grid; gap: 16px; margin: 18px 0 8px; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan-card { position: relative; background: #fff; border: 2px solid #ddd9f5; border-radius: 20px; padding: 26px 22px 22px; box-shadow: 0 18px 40px -26px rgba(79, 70, 229, .5); display: grid; gap: 10px; align-content: start; transition: transform .25s ease; }
.plan-card:hover { transform: translateY(-4px); }
.plan-card--best { background: linear-gradient(160deg, #0f0b2e, #1e1b4b); color: #f5f3ff; border-color: transparent; }
.plan-card--best h3, .plan-card--best .plan-line { color: #f5f3ff; }
.plan-tag { justify-self: start; padding: 6px 12px; border-radius: 999px; background: linear-gradient(120deg, #22d3ee, #7c3aed 60%, #f472b6); color: #fff; font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.plan-card h3 { margin: 0; font-size: clamp(1.5rem, 3.6vw, 1.9rem); line-height: 1.15; }
.plan-line { margin: 0; font-size: 1.08rem; line-height: 1.55; color: var(--muted); }
.plan-card .btn { justify-self: start; }
.included { margin-top: 22px; }
.included h3 { margin: 0 0 8px; font-size: 1.25rem; }
.year-h { margin: 28px 0 0; font-size: 1.3rem; }
/* Plan cards keep dark text on white, even inside a coloured band. */
main > section .plans .plan-card:not(.plan-card--best) h3 { color: #0f0b2e; }
main > section .plans .plan-card:not(.plan-card--best) .plan-line { color: #3b3760; }
main > section .plans .plan-card--best h3, main > section .plans .plan-card--best .plan-line { color: #f5f3ff; }

/* ---- Bathroom illustration in the demo (takes the chosen colours) ---- */
.mock-hero { position: relative; min-height: 230px; }
.mock-hero > :not(.mock-art) { position: relative; z-index: 1; max-width: 56%; }
.mock-art { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 46%; max-width: 280px; height: auto; filter: drop-shadow(0 14px 22px rgba(15,11,46,.35)); animation: jz-float 6s ease-in-out infinite; }
.mock-art .wall { fill: rgba(255,255,255,.14); }
.mock-art .tile { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 2; }
.mock-art .mirror { fill: #e0f2fe; opacity: .9; }
.mock-art .pipe, .mock-art .bath-rim { stroke: #e2e8f0; stroke-width: 5; stroke-linecap: round; fill: none; }
.mock-art .pipe-head { fill: #e2e8f0; }
.mock-art .drop { fill: none; stroke: var(--a); stroke-width: 3; stroke-linecap: round; transition: stroke .7s ease; }
.mock-art .bath { fill: #ffffff; }
.mock-art .towel { fill: var(--a); transition: fill .7s ease; }
.mock-art .towel-band { fill: rgba(255,255,255,.5); }
.mock-art .leaf { fill: #16a34a; }
.mock-art .pot { fill: #f8fafc; }
@keyframes jz-float { 50% { transform: translateY(calc(-50% - 6px)); } }
@media (max-width: 600px) {
  .mock-hero { min-height: 0; }
  .mock-hero > :not(.mock-art) { max-width: 100%; }
  .mock-art { position: static; transform: none; width: 70%; max-width: 260px; margin: 6px auto 0; animation: none; }
}
@media (prefers-reduced-motion: reduce) { .mock-art { animation: none !important; } }

/* ---- Examples: illustrated mock sites, one per industry (placeholders) ---- */
.ex-grid { display: grid; gap: 26px; margin: 18px 0 28px; }
@media (min-width: 900px) { .ex-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.ex { display: grid; gap: 10px; align-content: start; }
.ex-mock { transform: none; margin: 0; }
.ex-hero { min-height: 0; padding: 26px 20px; }
.ex-hero strong { font-size: clamp(1.35rem, 5vw, 1.7rem); }
.ex-scene { display: block; width: 100%; height: auto; max-height: 150px; padding: 8px 18px 16px; background: linear-gradient(135deg, var(--p), var(--a)); box-sizing: border-box; }
.ex-scene path, .ex-scene rect, .ex-scene ellipse, .ex-scene circle { transition: fill .6s ease, stroke .6s ease; }
.ex h3 { margin: 4px 0 0; font-size: clamp(1.3rem, 4vw, 1.6rem); }
.ex p { margin: 0; font-size: 1.08rem; line-height: 1.55; }
.ex .fine { font-size: .95rem; color: var(--muted); }
main > section .ex .fine { color: #c4bfff; }

/* ---- Industry tiles: proper proportions, bigger on desktop ---- */
.band-grid { grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .band-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 960px) { .band-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.band-item { border-radius: 18px; box-shadow: 0 18px 34px -22px rgba(15,11,46,.7); transition: transform .25s ease; }
.band-item:hover { transform: translateY(-4px); }
.band-item img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.band-item span { left: 12px; bottom: 12px; font-size: 1rem; padding: 6px 14px; }
.ex-link { color: inherit; text-decoration: none; transition: transform .25s ease; }
.ex-link:hover { transform: translateY(-5px); }
.ex-link:hover .mock-btn { transform: scale(1.04); }
.ex-link:focus-visible { outline: 3px solid #22d3ee; outline-offset: 6px; border-radius: 20px; }
.ex-link h3 { color: inherit; }
main > section .ex-link h3 { color: #fff; }
main > section .ex-link p { color: #e4e1ff; }
.ex-link .mock-btn { transition: transform .2s ease; }
.ex-grid { align-items: stretch; } .ex-link { height: 100%; align-content: start; }

/* ---- How we compare (pricing page) ---- */
.compare-wrap { overflow-x: auto; margin: 16px 0 8px; border-radius: 20px; box-shadow: 0 22px 44px -28px rgba(79,70,229,.55); -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 20px; overflow: hidden; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #ebe8fb; font-size: 1rem; line-height: 1.45; }
.compare thead th { background: #f6f5ff; font-weight: 800; color: #0f0b2e; }
.compare tbody th { font-weight: 700; color: #0f0b2e; width: 22%; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .us { background: linear-gradient(160deg, #0f0b2e, #1e1b4b); color: #f5f3ff; font-weight: 700; }
.compare thead th.us { background: linear-gradient(120deg, #22d3ee, #7c3aed 60%, #f472b6); color: #fff; }
.compare td { color: #3b3760; }
main > section .compare td:not(.us), main > section .compare th:not(.us) { color: #3b3760; }

/* ---- Pricing page: jazzed up ---- */
.price-banner { margin: 6px 0 4px; text-align: center; }
.price-banner p { margin: 0; font-size: clamp(1.35rem, 3.4vw, 1.9rem); font-weight: 800; line-height: 1.5; color: #0f0b2e; }
.price-sticker { display: inline-block; transform: rotate(-3deg); margin: 0 4px; padding: 6px 16px; border-radius: 999px; background: linear-gradient(120deg, #22d3ee, #7c3aed 60%, #f472b6); color: #fff; box-shadow: 0 14px 28px -14px rgba(124,58,237,.7); white-space: nowrap; animation: jz-wiggle 4s ease-in-out infinite; }
@keyframes jz-wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(2deg) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .price-sticker { animation: none; } }
.plan-card { overflow: hidden; }
.plan-card--best::after { content: "No setup fee"; position: absolute; top: 18px; right: -40px; transform: rotate(35deg); background: #f472b6; color: #0f0b2e; font-weight: 800; font-size: .8rem; padding: 4px 48px; letter-spacing: .05em; text-transform: uppercase; }
.trial { display: grid; gap: 14px; margin: 14px 0 6px; }
@media (min-width: 760px) { .trial { grid-template-columns: repeat(3, 1fr); } }
.trial-step { position: relative; background: #fff; border-radius: 18px; padding: 20px 18px; border: 2px solid #ddd9f5; box-shadow: 0 16px 34px -26px rgba(79,70,229,.5); display: grid; gap: 6px; align-content: start; }
.trial-day { justify-self: start; font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; border-radius: 999px; background: #0f0b2e; color: #fff; }
.trial-step h3 { margin: 4px 0 0; font-size: 1.3rem; color: #0f0b2e; }
.trial-step p { margin: 0; font-size: 1.08rem; line-height: 1.55; color: #3b3760; }
.trial-step--free { background: linear-gradient(160deg, #0f0b2e, #1e1b4b); border-color: transparent; }
.trial-step--free h3 { color: #fff; }
.trial-step--free p { color: #f5f3ff; }
.trial-step--free .trial-day { background: #22d3ee; color: #0f0b2e; }
.home-compare { margin-top: 28px; }
.home-compare h3 { font-size: clamp(1.4rem, 3.2vw, 1.8rem); margin: 0 0 8px; color: #0f0b2e; }
main > section .home-compare h3 { color: #0f0b2e; }
/* Contrast fixes for the pricing page bands */
main > section .trial-step:not(.trial-step--free) h3 { color: #0f0b2e; }
main > section .trial-step:not(.trial-step--free) p { color: #3b3760; }
main > section .trial-step--free h3 { color: #fff; }
main > section .trial-step--free p { color: #f5f3ff; }
main > section .price-banner p { color: #fff; }
.site-foot a, .site-foot li a { color: #d9d4f5; }
.site-foot .foot-fine, .site-foot p { color: #cfc9ee; }
/* Phone: the comparison becomes one card per row, so nothing needs sideways scroll */
@media (max-width: 640px) {
  .compare-wrap { overflow: visible; box-shadow: none; }
  .compare { min-width: 0; background: transparent; display: block; }
  .compare thead { display: none; }
  .compare tbody { display: grid; gap: 14px; }
  .compare tbody tr { display: grid; gap: 0; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 16px 34px -26px rgba(79,70,229,.5); }
  .compare tbody th { width: auto; background: #f6f5ff; border-bottom: 0; padding: 12px 16px; }
  .compare tbody td { display: grid; grid-template-columns: 1fr; gap: 2px; border-bottom: 1px solid #ebe8fb; }
  .compare tbody td::before { content: attr(data-label); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #5b56a0; }
  .compare tbody td.us { background: linear-gradient(160deg, #0f0b2e, #1e1b4b); color: #f5f3ff; }
  .compare tbody td.us::before { color: #22d3ee; }
  .compare tbody tr:last-child td { border-bottom: 0; }
}
/* Bands always keep room for the slanted edge, even when a page sets inline padding */
main > section.tone-dark, main > section.tone-pink { padding-top: 96px !important; }

/* ---- Website previews (illustrations, not client work) ---- */
.ex-site { position: relative; height: 210px; margin: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--p) 35%, #0f0b2e), color-mix(in srgb, var(--a) 30%, #0f0b2e)); overflow: hidden; }
.ex-win { position: absolute; background: #fff; border-radius: 12px; box-shadow: 0 22px 40px -18px rgba(0,0,0,.55); padding: 10px; display: grid; gap: 8px; align-content: start; }
.ex-win--a { left: 10%; top: 16px; width: 74%; transform: rotate(-4deg); }
.ex-win--b { right: 6%; bottom: 16px; width: 44%; transform: rotate(5deg); }
.ex-nav { display: flex; gap: 5px; align-items: center; }
.ex-nav i { width: 6px; height: 6px; border-radius: 50%; background: #d4d0ee; }
.ex-nav b { margin-left: auto; width: 34px; height: 8px; border-radius: 4px; background: var(--a); }
.ex-img { position: relative; height: 72px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 80%, #fff) 0%, var(--a) 55%, color-mix(in srgb, var(--p) 70%, #000) 100%); }
.ex-sun { position: absolute; width: 22px; height: 22px; border-radius: 50%; right: 16%; top: 14px; background: rgba(255,255,255,.85); box-shadow: 0 0 18px 6px rgba(255,255,255,.35); }
.ex-hill { position: absolute; left: -10%; right: -10%; bottom: -30px; height: 60px; border-radius: 50% 50% 0 0; background: color-mix(in srgb, var(--p) 85%, #000); }
.ex-line { height: 7px; border-radius: 4px; background: #e6e3f7; width: 92%; }
.ex-line.short { width: 60%; }
.ex-cta { height: 14px; width: 42%; border-radius: 999px; background: var(--p); }
.ex-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ex-tiles i { height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--a), var(--p)); opacity: .85; }
.ex-chip { justify-self: start; font-size: .7rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--a); color: #0f0b2e; }
.ex-scene { display: none; }
.ex-grid .mock-hero { min-height: 0; }
@media (prefers-reduced-motion: no-preference) { .ex-win--a { animation: ex-float 6s ease-in-out infinite; } .ex-win--b { animation: ex-float 7s ease-in-out infinite reverse; } }
@keyframes ex-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.ex-note { margin: 10px 0 0; font-size: 1rem; color: #e4e1ff; }
#industries .ex-note { max-width: 1200px; margin: 16px auto 0; padding: 0 16px; }