/* Clean layer, loaded last on every page (owner, 6 Nov 2026):
   no pills or chips, no placeholder pictures, no spinning badge,
   bright bold headings in every section, the WebPresta logo and a mega menu. */

/* ---------- Logo ---------- */
.top .brand img { display: block; height: 46px; width: auto; }
@media (max-width: 520px) { .top .brand img { height: 36px; } }
.site-foot .foot-brand img { display: block; height: 60px; width: auto; }

/* ---------- Header and mega menu ---------- */
.top { background: rgba(255, 255, 255, .97) !important; }
.top .wrap { min-height: 72px; }
.mainnav { display: flex; align-items: center; gap: 6px; }
.mainnav .mm-top, .mainnav .mm-toggle {
  color: #0f0b2e !important; font: inherit; font-weight: 800; font-size: 1.02rem; text-decoration: none;
  background: none; border: 0; padding: 10px 12px; cursor: pointer; border-radius: 8px;
}
.mainnav .mm-top:hover, .mainnav .mm-toggle:hover, .mainnav .mm-toggle[aria-expanded="true"] { background: #f1eefe; }
.mainnav .mm-toggle span { font-size: .8em; margin-left: 2px; }
.nav-start {
  margin-left: 8px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 10px; background: #4f46e5; color: #fff !important; font-weight: 900; font-size: 1.02rem;
  text-decoration: none; letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 6px 16px -6px rgba(79, 70, 229, .7);
}
.nav-start:hover { background: #7c3aed; }
.mm-burger {
  display: none; font: inherit; font-weight: 900; font-size: 1rem; text-transform: uppercase; letter-spacing: .02em;
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 2px solid #0f0b2e; background: #fff; color: #0f0b2e; cursor: pointer;
}
@media (max-width: 860px) {
  .mainnav .mm-top, .mainnav .mm-toggle { display: none; }
  .mm-burger { display: inline-flex; align-items: center; }
  .nav-start { margin-left: 0; padding: 0 14px; }
}
.megamenu {
  position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid #ece9fb;
  box-shadow: 0 24px 40px -18px rgba(15, 11, 46, .35); max-height: calc(100vh - 72px); overflow-y: auto;
}
.megamenu[hidden] { display: none; }
.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 28px; padding-bottom: 32px; }
.mm-col { display: flex; flex-direction: column; gap: 4px; }
.mm-h {
  margin: 0 0 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: 1.15rem;
  background: linear-gradient(90deg, #4f46e5, #7c3aed 50%, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mm-col a { color: #0f0b2e; text-decoration: none; font-weight: 700; font-size: 1.05rem; padding: 7px 0; }
.mm-col a:hover, .mm-col a:focus-visible { color: #7c3aed; }
@media (max-width: 860px) { .mm-grid { grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 20px; } }
@media (max-width: 420px) { .mm-grid { grid-template-columns: 1fr; } }

/* ---------- No placeholder pictures, no spinning badge ---------- */
img.page-art, img.card-art, .band-item img, .jz-spin { display: none !important; }

/* ---------- No pills: labels become plain bold text ---------- */
.jz-sticker, .jz-word, .price-sticker, .plan-tag, .plan .tag, .trial-day, .demo-eyebrow, .eyebrow, .tag-soon, .cw-mini-tag, .ex-chip, .kicker {
  display: inline; background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  box-shadow: none !important; transform: none !important; animation: none !important; color: inherit; font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
}
.plan .tag { position: static; display: block; margin: 0 0 6px; color: #7c3aed; }
.plan-tag, .trial-day, .demo-eyebrow, .eyebrow { display: block; margin: 0 0 8px; color: #7c3aed; }
.price-sticker { color: #7c3aed; }
/* The home line "We create Awesome Websites from £19.99 a month": bold gradient words, no pill. */
.jz-lead .jz-word {
  display: inline-block; margin: 4px 0; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05;
  background: linear-gradient(90deg, #22d3ee, #7c3aed 50%, #f472b6) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}
main > section.tone-dark .plan-tag, main > section.tone-dark .trial-day, main > section.tone-dark .plan .tag,
main > section.tone-dark .price-sticker, main > section.tone-dark .demo-eyebrow { color: #67e8f9; }
main > section.tone-pink .plan-tag, main > section.tone-pink .trial-day, main > section.tone-pink .plan .tag,
main > section.tone-pink .price-sticker, main > section.tone-pink .demo-eyebrow { color: #fff; }

/* Buttons and choice buttons: rounded rectangles, not pills. */
.btn, .cw-btn, .cw-fix, .cw-mini-btn, .demo-pill, .chip, .mock-btn, .wc-dock, .wc-dock a { border-radius: 10px !important; }
.wc-cur span { border-radius: 6px; }

/* ---------- Bright, bold headings in every section (paragraph text stays normal) ---------- */
main h2, main .mm-h, .page-head h1 { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.02; }
main h2, .page-head h1 {
  background: linear-gradient(90deg, #4f46e5, #7c3aed 50%, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent;
}
section.block h2 { font-size: clamp(1.9rem, 5vw, 3.2rem); margin-bottom: 14px; }
.page-head h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
main > section.tone-dark h2 {
  background: linear-gradient(90deg, #22d3ee, #a5f3fc 45%, #f9a8d4); -webkit-background-clip: text; background-clip: text; color: transparent;
}
main > section.tone-pink h2 { background: none; color: #fff; -webkit-text-fill-color: #fff; }
main h3 { font-weight: 900; letter-spacing: -.005em; }
.site-foot h3 { font-weight: 900; text-transform: uppercase; color: #67e8f9; }

/* Fixes after the first check */
.top .brand img { height: 58px; }
@media (max-width: 520px) { .top .brand img { height: 44px; } }
.top .wrap.mm-grid { display: grid; align-items: start; justify-content: stretch; min-height: 0; }
.top .mainnav .nav-start { display: inline-flex !important; }
.price-sticker { text-transform: none; }
.plan-card--best::after { display: none !important; content: none !important; }

/* Trade picture cards. */
.trade-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 24px; }
@media (max-width: 1100px) { .trade-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px) { .trade-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .trade-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
.trade { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e2fa; border-radius: 16px; overflow: hidden; color: #0f0b2e; text-decoration: none; box-shadow: 0 6px 18px rgba(15, 11, 46, .10); transition: transform .25s, box-shadow .25s; }
.trade img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 512; object-fit: cover; transition: transform .5s; }
.trade, .trade span, .band .trade, .band .trade span { color: #0f0b2e; }
.trade span { flex: 1; display: flex; align-items: center; gap: 8px; padding: 11px 12px; font-weight: 800; font-size: 15px; line-height: 1.2; border-top: 1px solid #ece9fb; }
.trade:hover, .trade:focus-visible { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 14px 30px rgba(79, 70, 229, .3); }
.trade:hover img { transform: scale(1.06); }
@media (max-width: 600px) { .trade span { font-size: 13px; padding: 8px 9px; } }
.trade-more { margin-top: 20px; font-weight: 700; }
.trade-more a { white-space: nowrap; }

.prose .trade-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) { .prose .trade-grid { grid-template-columns: 1fr 1fr; } }

/* Headings: beat jazz.css's "main > section h2 { text-transform: none }" */
main > section h2, main > section.block h2 { text-transform: uppercase !important; font-weight: 900; }

/* Content is always visible: no fade-in that can leave empty dark areas on phones */
.reveal, .reveal.in { opacity: 1 !important; transform: none !important; }

/* Moving shapes in every section and the footer, behind the content */
.jz-has-shapes { position: relative; overflow: hidden; }
.jz-has-shapes > .wrap, .jz-has-shapes > div:not(.jz-shape) { position: relative; z-index: 1; }
.jz-shape.jz-light { opacity: .22; }

/* FAQ as clean cards with a plus that turns into a minus */
.faq details, #faq-list details { border: 1px solid rgba(124, 58, 237, .18); border-radius: 16px; margin: 0 0 12px; padding: 0; background: #fff; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq details[open], #faq-list details[open] { border-color: #7c3aed; box-shadow: 0 14px 28px -20px rgba(79, 70, 229, .6); }
.faq summary, #faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-weight: 800; font-size: 1.08rem; color: #0f0b2e; }
.faq summary::-webkit-details-marker, #faq-list summary::-webkit-details-marker { display: none; }
.faq summary::after, #faq-list summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #f1eefe; color: #7c3aed; font-weight: 900; font-size: 1.3rem; transition: transform .25s, background .25s; }
.faq details[open] summary::after, #faq-list details[open] summary::after { content: "–"; background: #7c3aed; color: #fff; }
.faq details p, #faq-list details p { padding: 0 20px 18px; margin: 0; color: #2a2552 !important; font-size: 1.05rem; }
main > section.tone-dark .faq details, main > section.tone-dark.faq details { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
main > section.tone-dark.faq summary { color: #fff; }
main > section.tone-dark.faq details p { color: #e4e1ff !important; }
main > section.tone-dark.faq summary::after { background: rgba(255, 255, 255, .1); color: #67e8f9; }
main > section.tone-dark.faq details[open] summary::after { background: #22d3ee; color: #0f0b2e; }

/* Shapes truly behind text on every page */
.jz-has-shapes { isolation: isolate; }
.jz-has-shapes > .jz-shape, .jz-shape { z-index: -1 !important; }
.jz-has-shapes > *:not(.jz-shape) { position: relative; z-index: 1; }
@media (max-width: 960px) {
  .jz-shape { max-width: 70px; max-height: 70px; }
  .jz-shape:nth-of-type(odd) { left: -34px !important; right: auto !important; }
  .jz-shape:nth-of-type(even) { left: auto !important; right: -34px !important; }
}
main > section.tone-dark + section.tone-pink, main > section.tone-pink + section.tone-dark,
main > section.tone-dark + section.tone-dark, main > section.tone-pink + section.tone-pink { margin-top: -48px; }

/* Third review fixes: readable errors and links, FAQ above shapes */
.err, #err, #home-err { color: #b91c1c !important; font-weight: 700; }
main > section:not(.tone-dark):not(.tone-pink) a:not(.btn):not(.trade):not(.x-project):not(.nav-start) { color: #4f46e5; }
main > section.tone-pink a:not(.btn):not(.trade) { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
main details, .faq details { position: relative; z-index: 1; }
/* clip (not hidden) keeps shapes inside without breaking sticky positioning */
.jz-has-shapes, #studio { overflow: clip !important; }

/* ---------- How we compare: head to head ---------- */
@property --vs-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.vs { margin: 18px 0 8px; position: relative; padding: 34px 26px 22px; border-radius: 28px; background: linear-gradient(180deg, #ffffff, #f6f4ff); box-shadow: 0 40px 80px -50px rgba(79, 70, 229, .55), 0 0 0 1px #ebe8fb inset; }
main > section .vs .vs-cell.vs-label, main > section .vs .vs-diy, main > section .vs .vs-des { color: #2a2650; }
main > section .vs .vs-label { color: #0f0b2e; }
main > section .vs .vs-us, main > section .vs .vs-us span { color: #fff; }
main > section .vs .vs-head b:not(.vs-brand) { color: #0f0b2e; }
main > section .vs .fine { color: #3f3b63; }
.vs-switch { display: none; }
.vs-grid { position: relative; display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; isolation: isolate; }
.vs-row { display: contents; }
.vs-cell { grid-row: var(--vr, 1); padding: 16px 18px; font-size: 1.12rem; line-height: 1.45; color: #0f0b2e; border-bottom: 1px solid #e6e2fb; display: flex; gap: 10px; align-items: flex-start; transition: background .25s ease; }
.vs-label { grid-column: 1; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: 1rem; align-items: center; }
.vs-us { grid-column: 2; color: #fff; font-weight: 700; border-bottom-color: rgba(255,255,255,.12); }
.vs-diy { grid-column: 3; }
.vs-des { grid-column: 4; }
.vs-diy, .vs-des { background: rgba(255,255,255,.82); color: #2a2650; }
.vs-row:last-child .vs-cell { border-bottom: 0; }
.vs-head .vs-cell { flex-direction: column; gap: 2px; border-bottom: 0; padding-top: 22px; padding-bottom: 18px; }
.vs-head .vs-diy, .vs-head .vs-des { border-radius: 16px 16px 0 0; }
.vs-row:last-child .vs-diy, .vs-row:last-child .vs-des { border-radius: 0 0 16px 16px; }
.vs-head b { font-size: 1.25rem; font-weight: 900; text-transform: uppercase; line-height: 1.1; }
.vs-sub { font-size: .95rem; font-weight: 700; color: #57537a; }
.vs-head .vs-us .vs-sub { color: #a5f3fc; }
.vs-brand { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; background: linear-gradient(90deg, #22d3ee, #a78bfa, #f472b6, #22d3ee); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: vs-shine 5s linear infinite; }
/* The lit column: dark ink with a turning colour edge, lifted above the others. */
.vs-glow { grid-column: 2; grid-row: 1 / span var(--rows, 8); z-index: -1; border-radius: 22px; margin: -10px -6px; border: 3px solid transparent;
  background: linear-gradient(170deg, #1e1b4b, #0f0b2e 55%, #1a0f3d) padding-box, conic-gradient(from var(--vs-a), #22d3ee, #7c3aed, #f472b6, #4f46e5, #22d3ee) border-box;
  box-shadow: 0 30px 70px -26px rgba(124, 58, 237, .75), 0 0 0 1px rgba(255,255,255,.06) inset; animation: vs-turn 6s linear infinite; }
.vs-glow::after { content: ""; position: absolute; inset: 0; border-radius: 20px; background: radial-gradient(60% 30% at 50% 0%, rgba(34, 211, 238, .28), transparent 70%); pointer-events: none; }
.vs-glow { position: relative; }
@keyframes vs-turn { to { --vs-a: 360deg; } }
@keyframes vs-shine { to { background-position: -200% 0; } }
/* Icons */
.vs-tick, .vs-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px; position: relative; }
.vs-tick { background: linear-gradient(135deg, #22d3ee, #34d399); box-shadow: 0 0 0 4px rgba(34, 211, 238, .18); }
.vs-tick::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #0f0b2e; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.vs-dot { background: #e9e6fb; }
.vs-dot::after { content: ""; position: absolute; left: 7px; top: 10.5px; width: 10px; height: 3px; border-radius: 2px; background: #8b86b3; }
.vs-soon { display: block; margin-bottom: 4px; color: #f9a8d4; font-weight: 900; }
/* Hover: the whole row lights up */
@media (hover: hover) and (min-width: 760px) {
  .vs-row.hot .vs-label { background: linear-gradient(90deg, rgba(79, 70, 229, .12), transparent); }
  .vs-row.hot .vs-diy, .vs-row.hot .vs-des { background: #f5f3ff; }
  .vs-row.hot .vs-us { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .07); }
  .vs-row.hot .vs-tick { transform: scale(1.15); }
}
/* Scroll in: rows slide in one after another, ticks pop */
.vs-row:not(.vs-head) .vs-cell { transition: opacity .5s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2), background .25s ease; transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s; }
.vs:not(.in) .vs-row:not(.vs-head) .vs-cell { opacity: 0; transform: translateY(14px); }
.vs .vs-tick { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i, 0) * 90ms + 250ms); }
.vs:not(.in) .vs-tick { transform: scale(0); }
.vs-close { margin: 28px 0 6px; text-align: center; font-size: clamp(1.4rem, 3.6vw, 2.1rem); font-weight: 900; text-transform: uppercase; line-height: 1.15; color: #0f0b2e; }
main > section .vs-close { color: #0f0b2e; }
.vs .fine { text-align: center; }
/* Phones: us against one option, chosen with the switch */
@media (max-width: 759px) {
  .vs { padding: 22px 12px 16px; border-radius: 22px; }
  .vs-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
  .vs-switch-label { width: 100%; font-weight: 900; text-transform: uppercase; font-size: .95rem; color: #0f0b2e; }
  .vs-switch button { flex: 1 1 0; font: inherit; font-weight: 800; font-size: 1rem; padding: 12px 10px; border-radius: 10px; border: 2px solid #c7d2fe; background: #fff; color: #312e81; cursor: pointer; }
  .vs-switch button[aria-pressed="true"] { background: #4f46e5; border-color: #4f46e5; color: #fff; box-shadow: 0 10px 24px -12px rgba(79, 70, 229, .8); }
  .vs-grid { grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .vs-glow { display: none; }
  .vs-cell { grid-row: auto !important; font-size: 1.02rem; padding: 12px; border-bottom: 0; }
  .vs-label { grid-column: 1 / -1; padding: 16px 2px 6px; font-size: .95rem; }
  .vs-head .vs-label { display: none; }
  .vs-us { grid-column: 1; background: linear-gradient(170deg, #1e1b4b, #0f0b2e); border-radius: 14px; box-shadow: 0 14px 30px -18px rgba(124, 58, 237, .9); }
  .vs-diy, .vs-des { grid-column: 2; border-radius: 14px !important; border: 2px solid #ece9fb; background: #fff; }
  .vs[data-them="diy"] .vs-des, .vs[data-them="des"] .vs-diy { display: none; }
  .vs-head .vs-cell { padding: 14px 12px; }
  .vs-head b { font-size: 1.05rem; }
  .vs-brand { font-size: 1.2rem !important; }
  .vs-tick, .vs-dot { width: 20px; height: 20px; }
  .vs-tick::after { left: 6.5px; top: 3px; width: 5px; height: 10px; }
  .vs-dot::after { left: 5px; top: 8.5px; }
  .vs.swap .vs-diy, .vs.swap .vs-des { animation: vs-flip .45s ease; }
  @keyframes vs-flip { from { opacity: 0; transform: rotateY(70deg); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .vs-glow, .vs-brand { animation: none; }
  .vs .vs-cell, .vs .vs-tick { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.prose .vs { width: min(1120px, calc(100vw - 32px)); left: 50%; transform: translateX(-50%); }
main > section .vs p.vs-close { color: #0f0b2e !important; }
main > section .vs p.vs-close .grad-text { color: transparent !important; }
.vs-brand { font-size: clamp(1.15rem, 2vw, 2rem) !important; overflow-wrap: anywhere; }
@media (max-width: 759px) { .vs-cell { padding: 11px 10px; font-size: 1rem; } .vs-diy, .vs-des { hyphens: auto; } }
/* New wider logo (Nov 2026) */
.top .brand img { height: 42px !important; width: auto; }
@media (max-width: 520px) { .top .brand img { height: 28px !important; } }
.site-foot .foot-brand img { height: 48px; }

/* Footer logo: scale evenly to fit the column, never squashed. */
.site-foot .foot-brand img { width: 100%; max-width: 300px; height: auto !important; aspect-ratio: 877 / 140; object-fit: contain; }

/* Pay now: a plain second action under the main button. */
.pay-link[hidden], [data-pay-wrap][hidden] { display: none !important; }
.pay-link { display: block; margin-top: 12px; font-weight: 800; font-size: 1.05rem; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pay-box { margin: 28px 0; padding: 26px; border-radius: 20px; background: linear-gradient(150deg, #4f46e5, #7c3aed 60%, #db2777); color: #fff; }
.pay-box h2 { color: #fff !important; -webkit-text-fill-color: #fff; margin-top: 0; }
.pay-box p { color: #fff !important; }
.pay-box .btn { background: #fff !important; color: #312e81 !important; margin: 6px 10px 6px 0; }