/* SEOS7 growth wizard, skin "v3" (views/site/growth-v3.php + js/growth-v3.js).
   The katteb.com/v3 pattern, rebuilt for Arabic and RTL: a night street of ad
   billboards, the lead-in line, the giant lime word behind the man's head, the
   side words either side of his shoulders, a glass URL box, then a full-screen
   dark wizard with timed between-step screens.
   Every class starts with v3- or wz- and every custom property with --v3-, so
   nothing clashes with the site-css.php tokens that head-meta.php inlines.
   No letter-spacing and no text-transform anywhere: tracking breaks the joins
   between Arabic letters. Physical left/right only where the art needs it. */

:root {
  --v3-night: #070D1C;
  --v3-ink: #ffffff;
  --v3-indigo: #3024F5;
  --v3-indigo-hi: #4945FF;
  --v3-ring: #7775FF;
  --v3-peri: #AFABFF;
  --v3-lime: #FFD60A;
  --v3-lime-ink: #0C1428;
  --v3-err: #FFB4A8;
  /* lighter at the start of the line: the right edge in RTL */
  --v3-grad: linear-gradient(270deg, #FFE45C 0%, #FFD60A 50%, #FFC300 100%);
  --v3-glow: 0 10px 30px rgba(255, 214, 10, .3);
  --v3-glass: rgba(12, 20, 40, .56);
  --v3-line: rgba(255, 255, 255, .1);
  --v3-block: 'Alexandria', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --v3-serif: 'Amiri', 'Times New Roman', serif;
  --v3-sans: 'IBM Plex Sans Arabic', 'Alexandria', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --v3-ease: cubic-bezier(.2, .7, .2, 1);
  /* the headline's sizes, shared so the side words and the man can be placed from them */
  --v3-while: clamp(24px, min(3vw, 5vh), 50px);
  --v3-word: clamp(64px, min(13.6vw, 20.5vh), 240px);
  --v3-while-lh: 1.45;
  --v3-word-lh: 1.22;
  --v3-head-top: calc(52px + 3vh);
}

html.v3-html { background: var(--v3-night); scroll-behavior: auto; }
body.v3 { margin: 0; min-height: 100%; background: var(--v3-night); color: var(--v3-ink); font-family: var(--v3-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
/* zero-specificity resets over site-css.php's dark headings and blue links, so every class below wins */
:where(.v3) :is(h1, h2, h3, h4) { color: inherit; }
:where(.v3) a { color: inherit; }
.v3 [hidden] { display: none !important; }
html.v3-lock, html.v3-lock body { overflow: hidden; }
.v3-i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v3 bdi { unicode-bidi: isolate; }
.wz-sr, .v3-form label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===================================================================== hero */
.v3-hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: var(--v3-night) url('../img/home-v3/bg-wide.webp') center / cover no-repeat;
}
.v3-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 13, 28, .66) 0%, rgba(7, 13, 28, .2) 26%, rgba(7, 13, 28, 0) 45%, rgba(7, 13, 28, .25) 62%, rgba(7, 13, 28, .94) 100%); }

/* the bar: the white wordmark at the start (right), the Google rating pill at the end */
.v3-top { position: absolute; z-index: 4; top: calc(18px + env(safe-area-inset-top, 0px)); inset-inline: clamp(18px, 4vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v3-logo { display: block; line-height: 0; }
.v3-logo img { height: 34px; width: auto; max-width: none; display: block; }
.v3-top-l { display: flex; align-items: center; gap: 10px; }
.v3-rate { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(12, 20, 40, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 13.5px/1 var(--v3-sans); color: #fff; white-space: nowrap; }
.v3-rate b { font: 800 14px/1 var(--v3-block); }
.v3-rate .v3-i { width: 15px; height: 15px; color: #FFC93D; fill: #FFC93D; stroke: none; }

/* the headline: the serif line, then the giant lime word behind his head */
.v3-head { position: absolute; z-index: 1; left: 0; right: 0; top: var(--v3-head-top); margin: 0; text-align: center; line-height: 1; user-select: none; font-weight: 400; }
.v3-while { display: block; font: 700 var(--v3-while)/var(--v3-while-lh) var(--v3-serif); color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.v3-word {
  display: block; font: 900 var(--v3-word)/var(--v3-word-lh) var(--v3-block); color: var(--v3-lime); margin-top: -.04em; white-space: nowrap;
  /* motion: the word streaks sideways like the crowd; mirrored, so it trails to the right as Arabic reads */
  text-shadow: .06em 0 .04em rgba(255, 214, 10, .55), .13em 0 .07em rgba(255, 214, 10, .3), .22em 0 .1em rgba(255, 214, 10, .14),
               -.06em 0 .04em rgba(255, 214, 10, .45), -.12em 0 .07em rgba(255, 214, 10, .22);
}

/* the one man in focus, in front of the word */
.v3-person { position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%); height: min(80vh, 1120px); width: auto; max-width: none; pointer-events: none;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .45)); }
/* a dark floor over his lower body, so the note and the box read on his shirt */
.v3-floor { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 13, 28, 0) 0%, rgba(7, 13, 28, .55) 35%, rgba(7, 13, 28, .9) 70%, rgba(7, 13, 28, .97) 100%); }

/* the side words either side of his shoulders: «أنت تحقق» on the right (read first), the rest on the left */
.v3-side { position: absolute; z-index: 3; left: 0; right: 0;
  top: calc(var(--v3-head-top) + var(--v3-while) * var(--v3-while-lh) + var(--v3-word) * 1.02 + 5.5vh);
  /* one centred line; the gap is his head plus the .12em «أنت تحقق» is longer than «المبيعات.»,
     so the whole line sits on the page centre while the gap still clears his head */
  --v3-side-fs: clamp(26px, min(3.3vw, 5.8vh), 58px); --v3-side-gap: min(36vh, 30vw);
  display: flex; justify-content: center; align-items: center; pointer-events: none; }
.v3-side span { font: 800 var(--v3-side-fs)/1.3 var(--v3-block); color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, .65); white-space: nowrap; }
.v3-side i { flex: none; width: calc(var(--v3-side-gap) + .12 * var(--v3-side-fs)); }

/* the floor: the note, the box, the no-website link and the logo row */
.v3-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); padding: 0 clamp(18px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; text-align: center; }
.v3-note { margin: 0 0 4px; max-width: 62ch; font: 700 clamp(15px, 1.2vw, 18px)/1.5 var(--v3-sans); color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 2px 16px rgba(0, 0, 0, .75); text-wrap: balance; }
.v3-form {
  position: relative; width: min(640px, 100%); display: flex; align-items: center; gap: 8px; padding-block: 7px; padding-inline: 24px 7px; cursor: text;
  background: rgba(12, 20, 40, .55); border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.v3-form:focus-within { border-color: rgba(255, 214, 10, .6); box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 0 3px rgba(255, 214, 10, .16); }
.v3-form.is-bad { border-color: rgba(255, 180, 168, .8); }
.v3-field { position: relative; flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; }
.v3-field input { display: block; flex: 1; width: 100%; min-width: 0; margin: 0; border: 0; outline: 0; background: transparent; color: #fff; caret-color: var(--v3-lime);
  font: 600 18px/1.4 var(--v3-sans); padding: 10px 0; text-align: right; }
/* the placeholder: a prompt, then real domains typed out one after another (aria-hidden; the label says it) */
.v3-ph { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); overflow: hidden; white-space: nowrap; text-align: right;
  font: 600 18px/1.4 var(--v3-sans); color: rgba(255, 255, 255, .62); pointer-events: none; }
.v3-ph.is-typing::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 2px; vertical-align: -.14em; background: var(--v3-lime); animation: v3Caret 1s steps(1) infinite; }
.v3-field.has-text .v3-ph { display: none; }
@keyframes v3Caret { 50% { opacity: 0; } }
.v3-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; border-radius: 999px; padding: 15px 26px;
  font: 800 16px/1.2 var(--v3-sans); color: var(--v3-lime-ink); white-space: nowrap;
  background: var(--v3-grad); box-shadow: var(--v3-glow); transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}
.v3-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.v3-btn.is-busy, .wz-btn.is-busy { pointer-events: none; opacity: .75; }
.v3-btn.is-busy::after, .wz-btn.is-busy::after { content: ''; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(12, 20, 40, .3); border-top-color: var(--v3-lime-ink); animation: wzSpin .8s linear infinite; }
.v3-err { min-height: 0; margin: -2px 0 0; font: 700 13.5px/1.45 var(--v3-sans); color: var(--v3-err); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.v3-err:empty { display: none; }
.v3-idea { border: 0; background: none; padding: 4px 6px; margin: -2px 0 0; color: rgba(255, 255, 255, .86); font: 600 14px/1.4 var(--v3-sans); cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(255, 214, 10, .55); text-underline-offset: 5px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.v3-idea:hover { color: var(--v3-lime); }
.v3-logos { margin-top: 14px; display: grid; justify-items: center; gap: 14px; }
.v3-logos small { font: 700 15px/1.3 var(--v3-sans); color: #fff; }
.v3-logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px clamp(24px, 3vw, 44px); }
/* monochrome white: grey, inverted and lifted, so the marks keep their inner detail */
.v3-logos img { display: block; height: 38px; width: auto; max-width: none; filter: grayscale(1) invert(1) brightness(1.6); opacity: 1; }
.v3-logos img.is-tall { height: 56px; }
.v3 :focus-visible { outline: 3px solid var(--v3-ring); outline-offset: 3px; }
.v3-form :focus-visible { outline: none; }

/* ===================================================================== below the fold */
.v3-more { position: relative; padding: clamp(56px, 9vh, 96px) clamp(18px, 4vw, 56px) clamp(64px, 10vh, 110px);
  background: radial-gradient(70% 50% at 50% 0%, rgba(255, 214, 10, .06), transparent 70%), var(--v3-night); }
.v3-more-in { width: min(1040px, 100%); margin: 0 auto; display: grid; justify-items: center; text-align: center; gap: 14px; }
.v3-kick { margin: 0; font: 700 clamp(17px, 1.5vw, 20px)/1.4 var(--v3-serif); color: var(--v3-peri); }
.v3-more-h { margin: 0; font: 900 clamp(28px, 3.6vw, 46px)/1.3 var(--v3-block); color: var(--v3-lime); text-wrap: balance; }
.v3-more-lede { margin: 0; max-width: 62ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.8; color: rgba(255, 255, 255, .76); text-wrap: pretty; }
.v3-proof { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.v3-proof li, .v3-card { background: var(--v3-glass); border: 1px solid var(--v3-line); border-radius: 18px; padding: clamp(18px, 2vw, 24px);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.v3-proof li { display: grid; gap: 6px; align-content: start; }
.v3-proof b { font: 900 clamp(28px, 3vw, 40px)/1.15 var(--v3-block); color: var(--v3-lime); }
.v3-proof span { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.v3-more-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; text-align: start; }
.v3-card-k { display: inline-flex; align-items: center; gap: 7px; font: 700 15px/1.3 var(--v3-serif); color: var(--v3-peri); }
.v3-card-k .v3-i { width: 17px; height: 17px; }
.v3-case { position: relative; background-image: radial-gradient(60% 60% at 100% 0%, rgba(255, 214, 10, .08), transparent 70%); }
.v3-case-in { display: grid; gap: 6px; margin-top: 8px; }
.v3-case-d { font: 900 clamp(36px, 4vw, 52px)/1.1 var(--v3-block); color: var(--v3-lime); }
.v3-case-m { font-size: 14.5px; color: rgba(255, 255, 255, .8); }
.v3-bars { display: grid; gap: 8px; margin: 10px 0 6px; }
.v3-bars > span { display: grid; grid-template-columns: 74px minmax(0, 1fr) 64px; align-items: center; gap: 10px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.v3-bars i { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.v3-bars em { display: block; height: 100%; border-radius: 999px; background: rgba(255, 255, 255, .55); transition: width .6s var(--v3-ease); }
.v3-bars > span + span em { background: var(--v3-grad); }
.v3-bars bdi { font: 800 14px/1 var(--v3-block); color: #fff; text-align: left; }
.v3-case-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.v3-case-n b { font: 700 15px/1.4 var(--v3-sans); }
.v3-case-n small { font-size: 13px; color: rgba(255, 255, 255, .58); }
.v3-dots { position: absolute; top: clamp(18px, 2vw, 24px); inset-inline-end: clamp(18px, 2vw, 24px); display: flex; gap: 5px; }
.v3-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .2s ease, width .2s ease; }
.v3-dots i.on { width: 18px; border-radius: 999px; background: var(--v3-lime); }
.v3-side-cards { display: grid; gap: 16px; align-content: start; }
.v3-gbp { display: flex; align-items: center; gap: 14px; }
.v3-gbp-r { font: 900 46px/1 var(--v3-block); color: #fff; }
.v3-gbp > span { display: grid; gap: 4px; }
.v3-stars { display: flex; gap: 3px; color: #FFC93D; }
.v3-stars .v3-i { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.v3-gbp small { font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.v3-chans { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v3-chans li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(12, 20, 40, .3); font: 600 13.5px/1.3 var(--v3-sans); }
.v3-chans .v3-i { width: 16px; height: 16px; color: var(--v3-lime); }
.v3-more-cta { margin-top: 18px; }
.v3-noscript { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; margin: 0; padding: 14px; background: #1A2440; text-align: center; }

/* ===================================================================== the wizard */
.v3-wiz { position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column; overflow: hidden; overflow: clip; color: #fff; background: var(--v3-night); font-family: var(--v3-sans); }
.v3-wiz.is-on { display: flex; animation: wzIn .35s ease both; }
.v3-wiz::before { content: ''; position: absolute; inset: -40px; z-index: 0; pointer-events: none; background: url('../img/home-v3/bg-wide.webp') center / cover no-repeat;
  filter: blur(14px) brightness(.36) saturate(1.1); transform: scale(1.04); }
.v3-wiz::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, rgba(7, 13, 28, .15), rgba(7, 13, 28, .7) 75%), linear-gradient(to bottom, rgba(7, 13, 28, .5), rgba(7, 13, 28, .1) 30%, rgba(7, 13, 28, .8)); }
.v3-wiz > * { position: relative; z-index: 1; }
.v3-wiz :focus-visible { outline: 3px solid var(--v3-ring); outline-offset: 3px; }
.v3-wiz .wz-in:focus-visible { outline: none; }
/* each step's title takes focus on arrival for screen readers; it is not a control, so no ring */
.v3-wiz #wzTitle:focus, .v3-wiz .wz-h:focus, .v3-wiz .wz-pop-h:focus { outline: none; }
.v3-wiz button, .v3-wiz input, .v3-wiz select { font-family: inherit; }
@keyframes wzIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
@keyframes wzUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wzSpin { to { transform: rotate(360deg); } }
@keyframes wzShine { from { background-position: 400px 0; } to { background-position: -400px 0; } }

/* the bar: wordmark, the steps, sound and close */
.wz-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) calc(clamp(16px, 4vw, 48px) + env(safe-area-inset-right, 0px)) 14px calc(clamp(16px, 4vw, 48px) + env(safe-area-inset-left, 0px));
  border-bottom: 1px solid rgba(255, 255, 255, .06); }
.wz-logo { justify-self: start; line-height: 0; }
.wz-logo img { height: 28px; width: auto; max-width: none; display: block; }
.wz-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0; }
.wz-steps li { display: flex; align-items: center; }
.wz-steps li + li::before { content: ''; width: clamp(10px, 1.4vw, 22px); height: 1px; margin: 0 6px; background: rgba(255, 255, 255, .18); }
.wz-steps span { display: flex; align-items: center; gap: 7px; padding: 4px; color: rgba(255, 255, 255, .45); font: 700 13px/1 var(--v3-sans); white-space: nowrap; }
.wz-steps i { font-style: normal; }
.wz-steps b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .24); font: 800 12px/1 var(--v3-block); }
.wz-steps .is-done span { color: var(--v3-peri); }
.wz-steps .is-done b { border-color: var(--v3-peri); }
.wz-steps [aria-current="step"] span { color: #fff; }
.wz-steps [aria-current="step"] b { background: var(--v3-grad); border-color: var(--v3-lime); color: var(--v3-lime-ink); box-shadow: 0 0 16px rgba(255, 214, 10, .45); }
.wz-top-r { justify-self: end; display: flex; align-items: center; gap: 10px; }
.wz-close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); background: rgba(12, 20, 40, .45); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .15s ease; }
.wz-close .v3-i { width: 18px; height: 18px; }
.wz-close:hover { background: rgba(255, 255, 255, .14); }
/* the sound switch (katteb's, brought back on): small, remembered in this browser */
.wz-sound { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(12, 20, 40, .45);
  color: rgba(255, 255, 255, .7); font: 700 13px/1 var(--v3-sans); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.wz-sound:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.wz-sound.is-on { color: var(--v3-lime); border-color: rgba(255, 214, 10, .45); }
.wz-sound svg { width: 16px; height: 16px; flex: none; }
.v3-top .wz-sound { height: 38px; width: 38px; padding: 0; justify-content: center; background: rgba(12, 20, 40, .38); border-color: rgba(255, 255, 255, .34); }
.v3-top .wz-sound-l { display: none; }

/* the scrolling stage */
.wz-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: clamp(26px, 6vh, 56px) calc(clamp(16px, 4vw, 48px) + env(safe-area-inset-right, 0px)) 40px calc(clamp(16px, 4vw, 48px) + env(safe-area-inset-left, 0px)); outline: 0; }
.wz-step { width: min(720px, 100%); margin: 0 auto; }
.wz-step.is-wide { width: min(1040px, 100%); }
.wz-enter { animation: wzUp .42s var(--v3-ease) both; }
.wz-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; font: 700 clamp(16px, 1.4vw, 19px)/1.4 var(--v3-serif); color: var(--v3-peri); text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
.wz-h { margin: 8px 0 10px; font: 900 clamp(27px, 3.1vw, 42px)/1.35 var(--v3-block); color: var(--v3-lime); text-wrap: balance; outline: 0; }
.wz-h img { width: 30px; height: 30px; border-radius: 8px; background: #fff; vertical-align: -4px; margin-inline-end: 10px; }
.wz-lead { margin: 0 0 24px; max-width: 62ch; font-size: 15.5px; line-height: 1.75; color: rgba(255, 255, 255, .76); }
.wz-lead b { color: #fff; }
.wz-card { background: var(--v3-glass); border: 1px solid var(--v3-line); border-radius: 18px; padding: clamp(18px, 2vw, 24px);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.wz-card + .wz-card { margin-top: 14px; }
.wz-sub { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font: 700 16px/1.4 var(--v3-serif); color: var(--v3-peri); }
.wz-sub .v3-i { width: 17px; height: 17px; }
.wz-fine { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .6); }

/* the action bar */
.wz-bar { display: flex; align-items: center; gap: 12px;
  padding: 12px calc(clamp(16px, 4vw, 48px) + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(clamp(16px, 4vw, 48px) + env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, rgba(7, 13, 28, .94), rgba(7, 13, 28, .72)); border-top: 1px solid rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.v3-wiz.no-bar .wz-bar { display: none; }
.wz-bar-in { width: min(1040px, 100%); margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.wz-bar-note { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .66); }
.wz-bar-note b { color: #fff; }
.wz-btn, .wz-ghost { white-space: nowrap; }
.wz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 15.5px/1.2 var(--v3-sans); color: var(--v3-lime-ink); background: var(--v3-grad); box-shadow: var(--v3-glow); transition: transform .15s ease, filter .15s ease, opacity .15s ease; text-align: center; text-decoration: none; }
.wz-btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.wz-btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.wz-btn .v3-i, .wz-ghost .v3-i { width: 18px; height: 18px; }
.wz-btn .v3-i[class*="wa"] { fill: currentColor; }
.wz-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(12, 20, 40, .3); color: #fff; font: 700 14.5px/1.2 var(--v3-sans); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.wz-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
.wz-ghost:disabled { opacity: .45; cursor: not-allowed; }
.wz-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 0; color: var(--v3-peri); font: 700 14px/1.4 var(--v3-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.wz-link .v3-i { width: 15px; height: 15px; }
.wz-spacer { flex: 1; }

/* the site pill and the live log (analysing) */
.wz-site { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; padding: 7px 9px 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  font: 700 14.5px/1.2 var(--v3-sans); color: #fff; text-shadow: none; }
.wz-site img { width: 20px; height: 20px; border-radius: 5px; background: #fff; flex: none; }
.wz-site bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wz-site.is-run::before { content: ''; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: var(--v3-lime); animation: wzSpin .8s linear infinite; }
.wz-site.is-done::before { content: '\2713'; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--v3-lime); color: var(--v3-lime-ink); font: 800 11px/1 var(--v3-sans); }
.wz-log { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.wz-log li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-weight: 600; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .45); transition: color .2s ease; }
.wz-log li.is-run, .wz-log li.is-done { color: #fff; }
.wz-dot { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); display: grid; place-items: center; font: 800 12px/1 var(--v3-sans); color: var(--v3-lime-ink); }
.is-run .wz-dot { border-color: rgba(255, 255, 255, .25); border-top-color: var(--v3-ring); animation: wzSpin .8s linear infinite; }
.is-done .wz-dot { background: var(--v3-lime); border-color: var(--v3-lime); }
.is-done .wz-dot::before { content: '\2713'; }
.wz-track { display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 18px; }
.wz-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--v3-grad); transition: width .4s ease; margin-inline-start: 0; }
.wz-track.is-halt i { background: rgba(255, 255, 255, .35); }
.wz-fact { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .7); }
.wz-fact .v3-i { width: 18px; height: 18px; margin-top: 3px; color: var(--v3-lime); }
.wz-errbox { margin-top: 18px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 180, 168, .5); background: rgba(255, 180, 168, .07); }
.wz-errbox p { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; color: #fff; font-weight: 600; line-height: 1.55; }
.wz-errbox .v3-i { width: 18px; height: 18px; margin-top: 3px; color: var(--v3-err); }
.wz-errbox .wz-ghost { min-height: 40px; font-size: 14px; }
.wz-err { margin: 10px 0 0; font: 700 14px/1.5 var(--v3-sans); color: var(--v3-err); }
.wz-err button { margin-inline-start: 6px; border: 0; background: none; color: var(--v3-lime); font: inherit; text-decoration: underline; cursor: pointer; }

/* loaders: a spinner line whose words change, over three shimmering bars */
.wz-wait { display: grid; gap: 12px; }
.wz-wait-line { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.wz-wait-line .wz-dot { border-color: rgba(255, 255, 255, .25); border-top-color: var(--v3-ring); animation: wzSpin .8s linear infinite; }
.wz-skel { height: 74px; border-radius: 16px; background: linear-gradient(270deg, rgba(255, 255, 255, .05) 0, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .05) 100%) 0 0 / 800px 100% no-repeat, rgba(255, 255, 255, .04);
  animation: wzShine 1.4s linear infinite; border: 1px solid rgba(255, 255, 255, .08); }

/* contact */
.wz-form { display: grid; gap: 14px; }
.wz-field { display: grid; gap: 6px; min-width: 0; }
.wz-field label { font: 700 14.5px/1.3 var(--v3-sans); color: #fff; }
.wz-inw { position: relative; display: flex; align-items: center; min-width: 0; flex: 1; }
.wz-inw > .v3-i { position: absolute; inset-inline-start: 14px; width: 18px; height: 18px; color: rgba(255, 255, 255, .5); pointer-events: none; }
.wz-in { width: 100%; min-width: 0; min-height: 52px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; background: rgba(0, 0, 0, .35); color: #fff;
  font: 500 16px/1.5 var(--v3-sans); padding: 10px 14px; outline: 0; transition: border-color .15s ease, box-shadow .15s ease; }
/* physical: the icon sits on the right in this RTL page, whatever the input's own direction (e-mail is LTR) */
.wz-inw > .v3-i + .wz-in { padding-right: 42px; padding-left: 14px; }
.wz-in[dir="ltr"] { text-align: right; }
.wz-in::placeholder { color: rgba(255, 255, 255, .42); }
.wz-in:focus { border-color: rgba(255, 214, 10, .7); box-shadow: 0 0 0 3px rgba(255, 214, 10, .16); }
.wz-field.is-bad .wz-in, .wz-in[aria-invalid="true"] { border-color: var(--v3-err); }
.wz-phone { display: flex; gap: 8px; }
.wz-phone .wz-inw .wz-in { text-align: left; }
.wz-code { flex: none; width: 108px; padding: 10px 10px; text-align: left; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: rgba(0, 0, 0, .35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center / 14px no-repeat; }
.wz-code option { background: #0C1428; color: #fff; }
.wz-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wz-safe { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
.wz-safe .v3-i { width: 15px; height: 15px; color: var(--v3-lime); }

/* insight */
.wz-tags { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wz-tags li, .wz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  font: 600 13.5px/1.35 var(--v3-sans); color: #fff; text-decoration: none; }
.wz-tags .v3-i, .wz-chip .v3-i { width: 15px; height: 15px; color: var(--v3-lime); }
.wz-chip img { width: 16px; height: 16px; border-radius: 4px; background: #fff; }
.wz-ins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wz-ins .wz-card + .wz-card { margin-top: 0; }
.wz-ins ul, .wz-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.wz-ins li, .wz-checks li { position: relative; padding-inline-start: 26px; font-size: 14.5px; line-height: 1.65; color: rgba(255, 255, 255, .86); }
.wz-ins li::before, .wz-checks li::before { content: '\2713'; position: absolute; inset-inline-start: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 214, 10, .16); color: var(--v3-lime); font: 800 10px/17px var(--v3-sans); text-align: center; }
.wz-ins .is-opp li::before { content: '\2726'; background: rgba(175, 171, 255, .16); color: var(--v3-peri); }
.wz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.wz-row > b { font: 700 15px/1.4 var(--v3-serif); color: var(--v3-peri); margin-inline-end: 4px; }

/* questions */
.wz-qmeta { display: flex; align-items: center; gap: 14px; }
.wz-qbar { flex: 1; max-width: 220px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.wz-qbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--v3-grad); transition: width .6s var(--v3-ease); }
.wz-q { margin: 0; padding: clamp(16px, 2vw, 22px); border: 1px solid var(--v3-line); border-radius: 18px; background: var(--v3-glass); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); min-width: 0; }
.wz-q-hint { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 13.5px; color: var(--v3-peri); }
.wz-q-hint .v3-i { width: 15px; height: 15px; }
.wz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wz-opt { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 9px 12px 9px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(12, 20, 40, .25);
  color: #fff; font: 600 14.5px/1.35 var(--v3-sans); text-align: start; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  animation: wzRise .45s var(--v3-ease) both; }
.wz-opt:hover { border-color: rgba(255, 255, 255, .55); background: rgba(12, 20, 40, .45); }
.wz-opt-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 214, 10, .1); color: var(--v3-lime); }
.wz-opt-ic .v3-i { width: 19px; height: 19px; }
.wz-opt-t { display: grid; gap: 1px; min-width: 0; }
.wz-opt-t b { font-weight: 700; }
.wz-opt-t small { font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .6); font-weight: 500; }
.wz-opt[aria-checked="true"] { background: var(--v3-grad); border-color: var(--v3-lime); color: var(--v3-lime-ink); box-shadow: 0 8px 24px rgba(255, 214, 10, .22); }
.wz-opt[aria-checked="true"] .wz-opt-ic { background: rgba(12, 20, 40, .14); color: var(--v3-lime-ink); }
.wz-opt[aria-checked="true"] small { color: rgba(12, 20, 40, .72); }
.wz-opt.is-pop { animation: wzPopIn .4s cubic-bezier(.2, .8, .3, 1.2) both; }
.wz-opt.is-other .wz-opt-ic { background: rgba(175, 171, 255, .14); color: var(--v3-peri); }
.wz-other { margin-top: 12px; }
.wz-q.is-wait .wz-opt { pointer-events: none; opacity: .55; }
.wz-q.is-wait .wz-opt[aria-checked="true"] { opacity: 1; }
.wz-qwait { display: grid; gap: 6px; margin-top: 14px; }
.wz-qwait small { font-size: 13px; color: rgba(255, 255, 255, .6); line-height: 1.6; }

/* between-step screens: about 3 to 5 seconds over the step that loads underneath */
.v3-wiz.is-held .wz-body *, .v3-wiz.is-held .wz-body *::before, .v3-wiz.is-held .wz-body *::after { animation-play-state: paused !important; }
.v3-wiz > .wz-gaas { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; place-items: center; padding: 24px clamp(16px, 4vw, 48px) calc(24px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(70% 60% at 50% 45%, rgba(255, 214, 10, .09), transparent 70%), rgba(7, 13, 28, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  cursor: pointer; animation: wzIn .35s ease both; transition: opacity .26s ease; }
.v3-wiz > .wz-gaas.is-out { opacity: 0; pointer-events: none; }
.wz-gaas-in { width: min(640px, 100%); text-align: center; display: grid; justify-items: center; gap: 12px; animation: wzUp .5s var(--v3-ease) .05s both; }
.wz-gaas-k { margin: 0; font: 700 clamp(16px, 1.5vw, 20px)/1.4 var(--v3-serif); color: var(--v3-peri); }
.wz-gaas-h { margin: 0; font: 900 clamp(32px, 4.6vw, 58px)/1.3 var(--v3-block); color: var(--v3-lime); text-wrap: balance; }
.wz-gaas-p { margin: 2px 0 0; max-width: 46ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.75; color: rgba(255, 255, 255, .82); text-wrap: balance; }
.wz-gaas-track { position: relative; display: block; width: min(240px, 60%); height: 3px; margin-top: 12px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.wz-gaas-track i { position: absolute; inset: 0; background: var(--v3-grad); transform-origin: right; animation: wzGaas 3s linear both; }
@keyframes wzGaas { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.wz-gaas-rate { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.wz-gaas-rate .v3-stars .v3-i { width: 15px; height: 15px; }
.wz-gaas-skip { font-size: 12.5px; color: rgba(255, 255, 255, .45); }
/* the scenes: an orb that scans (reading, competitors) and three channels locking into the plan */
.wz-scene { position: relative; width: 240px; height: 150px; margin-bottom: 14px; }
.wz-orb { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFF4B0, #FFD60A 55%, #E0A800); color: var(--v3-lime-ink); box-shadow: 0 0 40px rgba(255, 214, 10, .45); animation: wzPopIn .6s cubic-bezier(.2, .8, .3, 1.2) .15s both; }
.wz-orb .v3-i { width: 40px; height: 40px; stroke-width: 2.2; }
.wz-orb img { width: 40px; height: 40px; border-radius: 10px; background: #fff; }
.wz-orb::before, .wz-orb::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(255, 214, 10, .45); animation: wzRing 1.8s ease-out .5s infinite; }
.wz-orb::after { animation-delay: 1.4s; }
@keyframes wzRing { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.wz-scene .wz-sat { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 16px; display: grid; place-items: center; background: rgba(12, 20, 40, .92); border: 1px solid rgba(255, 214, 10, .5); color: var(--v3-lime); box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.wz-sat .v3-i { width: 24px; height: 24px; }
.wz-scene.is-plan .wz-orb { animation: wzPopIn .6s cubic-bezier(.2, .8, .3, 1.2) 3.3s both; }
.wz-scene.is-plan .wz-orb::before, .wz-scene.is-plan .wz-orb::after { animation-delay: 3.4s, 4.2s; }
.wz-sat.s1 { right: 0; animation: wzSatR 3.3s var(--v3-ease) .3s both; }
.wz-sat.s2 { left: 0; animation: wzSatL 3s var(--v3-ease) .6s both; }
.wz-sat.s3 { left: 50%; margin-left: -26px; top: -10px; margin-top: 0; animation: wzSatT 1.6s var(--v3-ease) 1.9s both; }
@keyframes wzSatR { 0% { opacity: 0; transform: translateX(160px) rotate(16deg); } 25% { opacity: 1; transform: translateX(0) rotate(0); } 85% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-94px) scale(.4); } }
@keyframes wzSatL { 0% { opacity: 0; transform: translateX(-160px) rotate(-16deg); } 25% { opacity: 1; transform: translateX(0) rotate(0); } 85% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(94px) scale(.4); } }
@keyframes wzSatT { 0% { opacity: 0; transform: translateY(-60px); } 40% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(46px) scale(.4); } }

/* motion shared by the result */
@keyframes wzRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wzPopIn { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes wzStamp { 0% { opacity: 0; transform: rotate(-6deg) scale(2.4); } 60% { opacity: 1; transform: rotate(-6deg) scale(.94); } 100% { opacity: 1; transform: rotate(-6deg) scale(1); } }
@keyframes wzRays { to { transform: rotate(360deg); } }
@keyframes wzTroIn { 0% { opacity: 0; transform: translateY(26px) scale(.7) rotate(6deg); } 60% { opacity: 1; transform: translateY(-6px) scale(1.04) rotate(-1.5deg); } 100% { opacity: 1; transform: none; } }
@keyframes wzTroShine { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(300px); } }
@keyframes wzTwinkle { 0%, 100% { opacity: 0; transform: scale(.2); } 50% { opacity: 1; transform: scale(1); } }
@keyframes wzFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wzPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 214, 10, .55); } 70% { box-shadow: 0 0 0 12px rgba(255, 214, 10, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 214, 10, 0); } }
@keyframes wzReveal { 0% { box-shadow: 0 0 0 0 rgba(255, 214, 10, .5); } 100% { box-shadow: 0 0 0 18px rgba(255, 214, 10, 0); } }

/* ===================================================================== the plan: catchy and minimal */
.wz-plan-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
.wz-tro { position: relative; width: clamp(104px, 11vw, 150px); aspect-ratio: 200 / 214; }
.wz-tro::after { content: ''; position: absolute; left: 10%; right: 10%; top: 14%; bottom: 30%; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 10, .42), transparent); filter: blur(10px); }
.wz-tro-rays { position: absolute; inset: -22% -22% -8%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 10, .16) 0 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 72%); mask: radial-gradient(closest-side, #000 25%, transparent 72%); animation: wzRays 30s linear infinite; }
.wz-tro svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .45));
  animation: wzTroIn 1s cubic-bezier(.2, .8, .25, 1) .1s both, wzFloat 5s ease-in-out 1.3s infinite; }
.wz-tro-n { font-family: var(--v3-block); font-weight: 900; fill: var(--v3-lime-ink); }
.wz-tro-by { font: 800 13px var(--v3-sans); fill: var(--v3-lime); }
.wz-tro-shine { animation: wzTroShine 4.2s ease-in-out 1.2s infinite; }
.wz-tro-sp path { fill: #fff; transform-box: fill-box; transform-origin: center; animation: wzTwinkle 2.6s ease-in-out infinite both; }
.wz-tro-sp g:nth-child(odd) path { fill: var(--v3-lime); }
.wz-hello { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(255, 214, 10, .1); border: 1px solid rgba(255, 214, 10, .32);
  font: 700 14px/1.3 var(--v3-sans); color: var(--v3-lime); animation: wzRise .5s var(--v3-ease) .25s both; }
.wz-hello .v3-i { width: 15px; height: 15px; }
.wz-ptitle { margin: 12px 0 8px; font: 900 clamp(30px, 3.7vw, 50px)/1.32 var(--v3-block); color: #fff; text-wrap: balance; outline: 0; animation: wzRise .55s var(--v3-ease) .35s both; }
.wz-ptitle em { font-style: normal; color: var(--v3-lime); }
.wz-psum { margin: 0; max-width: 60ch; font-size: clamp(15.5px, 1.35vw, 18px); line-height: 1.75; color: rgba(255, 255, 255, .8); animation: wzRise .55s var(--v3-ease) .45s both; }
.wz-stamp { display: inline-block; margin-inline-start: 10px; padding: 5px 12px; border: 2.5px solid currentColor; border-radius: 10px; font: 900 15px/1.3 var(--v3-block); color: var(--v3-lime);
  vertical-align: middle; box-shadow: 0 0 22px rgba(255, 214, 10, .25), inset 0 0 14px rgba(255, 214, 10, .15); animation: wzStamp .55s cubic-bezier(.2, .9, .3, 1.2) .9s both; }
.wz-kpis { list-style: none; margin: clamp(20px, 3.4vh, 30px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wz-kpi { display: grid; gap: 4px; align-content: start; padding: clamp(14px, 1.8vw, 20px); border-radius: 18px; background: var(--v3-glass); border: 1px solid rgba(255, 214, 10, .22);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); background-image: radial-gradient(80% 70% at 100% 0%, rgba(255, 214, 10, .1), transparent 70%);
  animation: wzRise .5s var(--v3-ease) both; }
.wz-kpi b { font: 900 clamp(34px, 3.8vw, 50px)/1.15 var(--v3-block); color: var(--v3-lime); }
.wz-kpi b bdi { display: inline-block; }
.wz-kpi span { font: 700 14.5px/1.5 var(--v3-sans); color: #fff; }
.wz-kpi small { font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .6); }
.wz-kpi.is-text b { font: 800 clamp(18px, 1.6vw, 21px)/1.5 var(--v3-sans); color: var(--v3-lime); }
/* a headline deliverable: the big number, the whole line with that number lit, the aim under it */
.wz-kpi.is-line span { font: 700 clamp(15px, 1.25vw, 16.5px)/1.55 var(--v3-sans); color: #fff; }
.wz-kpi .wz-n { color: var(--v3-lime); font-weight: 800; }
.wz-kpi.is-line small { margin-top: 2px; }

.wz-plan { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 22px; align-items: start; margin-top: clamp(28px, 5vh, 44px); }
.wz-sec-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; }
.wz-sec-h h2 { margin: 0; font: 800 clamp(19px, 1.8vw, 23px)/1.4 var(--v3-block); color: #fff; }
.wz-sec-h small { font-size: 13px; color: rgba(255, 255, 255, .58); }
.wz-chans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wz-chan { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; align-content: start; padding: 14px 16px; border-radius: 16px; background: var(--v3-glass); border: 1px solid var(--v3-line);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); animation: wzRise .45s var(--v3-ease) both; }
.wz-chan-ic { grid-row: span 4; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 214, 10, .12); color: var(--v3-lime); }
.wz-chan-ic .v3-i { width: 22px; height: 22px; }
.wz-chan h3 { margin: 0; font: 700 15px/1.45 var(--v3-sans); color: #fff; }
.wz-chan p { margin: 0; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.wz-chan-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12.5px; }
.wz-chan-v s { color: rgba(255, 255, 255, .5); text-decoration-color: rgba(255, 180, 168, .85); text-decoration-thickness: 1.5px; }
.wz-chan-v span { display: inline-flex; align-items: center; gap: 4px; color: var(--v3-lime); font-weight: 700; }
.wz-chan-v .v3-i { width: 13px; height: 13px; }
/* what we do in the channel each month: 2 or 3 verb-first lines; the why becomes a caption */
.wz-chan-d { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 4px; }
.wz-chan-d li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 7px; align-items: start; font: 600 13.5px/1.6 var(--v3-sans); color: rgba(255, 255, 255, .9); }
.wz-chan-d .v3-i { width: 13px; height: 13px; margin-top: 5px; color: var(--v3-lime); stroke-width: 3; }
.wz-chan p.wz-chan-why { margin-top: 2px; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .55); }

.wz-price { position: sticky; top: 4px; border-color: rgba(255, 214, 10, .34); background-image: radial-gradient(80% 50% at 100% 0%, rgba(255, 214, 10, .1), transparent 70%); }
.wz-price.is-reveal { animation: wzReveal 1s ease-out .2s 2 both; }
.wz-price-k { display: inline-flex; align-items: center; gap: 7px; font: 700 16px/1.4 var(--v3-serif); color: var(--v3-peri); }
.wz-price-k .v3-i { width: 16px; height: 16px; }
.wz-price h2 { margin: 6px 0 12px; font: 800 clamp(19px, 1.7vw, 22px)/1.45 var(--v3-block); color: #fff; }
.wz-orig { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 14px; color: rgba(255, 255, 255, .7); }
.wz-orig s { font: 700 16px/1.3 var(--v3-sans); color: rgba(255, 255, 255, .6); text-decoration-color: rgba(255, 180, 168, .9); text-decoration-thickness: 2px; }
.wz-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 2px; }
.wz-amount strong { font: 900 clamp(44px, 4.4vw, 60px)/1.1 var(--v3-block); color: var(--v3-lime); }
.wz-amount > span { font: 700 15px/1.3 var(--v3-sans); color: rgba(255, 255, 255, .82); }
.wz-save { display: inline-block; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: var(--v3-grad); color: var(--v3-lime-ink); font: 800 13px/1.3 var(--v3-sans); }
.wz-usd { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .64); }
.wz-terms { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .64); }
.wz-terms .v3-i { width: 14px; height: 14px; color: var(--v3-lime); }
.wz-timer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .1); }
.wz-timer-l { display: inline-flex; align-items: center; gap: 6px; font: 700 13.5px/1.3 var(--v3-sans); color: rgba(255, 255, 255, .8); }
.wz-timer-l .v3-i { width: 16px; height: 16px; color: var(--v3-lime); }
.wz-cd { display: flex; align-items: flex-start; gap: 4px; }
.wz-cd > span { display: grid; justify-items: center; gap: 2px; min-width: 40px; }
.wz-cd b { font: 900 22px/1.1 var(--v3-block); color: #fff; }
.wz-cd b.is-tick { animation: wzPopIn .35s ease both; }
.wz-cd small { font-size: 10.5px; color: rgba(255, 255, 255, .55); }
.wz-cd i { font: 900 20px/1.1 var(--v3-block); color: rgba(255, 255, 255, .4); font-style: normal; }
.wz-cta { width: 100%; margin-top: 16px; min-height: 54px; font-size: 16px; white-space: normal; }
.wz-cta.is-glow { animation: wzPulse 2.2s ease-out 1.5s infinite; }
.wz-o-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, .66); }
.wz-o-note .v3-i { width: 14px; height: 14px; color: var(--v3-lime); }
.wz-ref { display: block; margin-top: 10px; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.wz-exp { margin: 4px 0 0; font-size: 14.5px; line-height: 1.7; color: #fff; }
.wz-price.is-expired .wz-pricebox, .wz-price.is-expired .wz-o-note { display: none; }

.wz-more { margin-top: 18px; }
.wz-toggle-all { width: 100%; justify-content: space-between; min-height: 52px; border-radius: 16px; font-size: 15px; }
.wz-toggle-all::after { content: '+'; font: 700 22px/1 var(--v3-sans); color: var(--v3-lime); }
.wz-toggle-all[aria-expanded="true"]::after { content: '\2212'; }
.wz-full { display: grid; gap: 14px; margin-top: 14px; }
.wz-full[hidden] { display: none; }
.wz-goal { display: flex; gap: 12px; align-items: flex-start; }
.wz-goal .v3-i { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--v3-lime); }
.wz-goal p { margin: 0; font: 700 15.5px/1.7 var(--v3-sans); }
.wz-dl h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 15px/1.45 var(--v3-sans); color: #fff; }
.wz-dl h3 .v3-i { width: 18px; height: 18px; color: var(--v3-lime); }
.wz-dl + .wz-dl { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.wz-road { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.wz-road > li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 0 0 18px; }
.wz-road > li::before { content: ''; position: absolute; top: 34px; bottom: 0; inset-inline-start: 16px; width: 2px; background: linear-gradient(rgba(255, 214, 10, .5), rgba(255, 214, 10, .08)); }
.wz-road > li:last-child::before { display: none; }
.wz-road-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0E1730; border: 2px solid var(--v3-lime); color: var(--v3-lime); font: 900 14px/1 var(--v3-block); }
.wz-road small { display: block; font: 700 14px/1.4 var(--v3-serif); color: var(--v3-peri); }
.wz-road b { display: block; margin: 2px 0 6px; font: 700 15px/1.55 var(--v3-sans); }
.wz-road ul { list-style: disc; margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.wz-road li li::marker { color: var(--v3-lime); }
.wz-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wz-wins li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.65; }
.wz-wins .v3-i { width: 18px; height: 18px; margin-top: 4px; color: var(--v3-lime); flex: none; }
.wz-closing { margin: 0; font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .8); }
.wz-ads-fine { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .56); }
.wz-p-foot { display: flex; justify-content: center; margin-top: 26px; }

/* the bar on the plan: the price, the timer and the CTA (hidden while the price card is on screen) */
.wz-obar { display: flex; align-items: center; gap: 12px; width: 100%; }
.wz-obar-p { display: grid; gap: 1px; min-width: 0; flex: 1; }
.wz-obar-p > span { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wz-obar-p b { font: 900 22px/1.2 var(--v3-block); color: var(--v3-lime); }
.wz-obar-p small { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.wz-obar-p s { font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.wz-obar-t { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.wz-obar-t b { font: 800 13px/1 var(--v3-block); color: #fff; }
.wz-obar-t .v3-i { width: 13px; height: 13px; color: var(--v3-lime); }

/* the claim popup: before WhatsApp */
.v3-wiz > .wz-pop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
  background: rgba(7, 13, 28, .74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: wzIn .25s ease both; }
.v3-wiz > .wz-pop[hidden] { display: none; }
.wz-pop-card { position: relative; width: min(480px, 100%); margin: auto; padding: clamp(22px, 3vw, 32px); border-radius: 24px; color: #fff; text-align: center;
  background: rgba(12, 20, 40, .94); border: 1px solid rgba(119, 117, 255, .5); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.wz-pop-ic { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 214, 10, .12); color: var(--v3-lime); }
.wz-pop-ic .v3-i { width: 28px; height: 28px; fill: currentColor; }
.wz-pop-h { margin: 12px 0 10px; font: 900 clamp(24px, 2.6vw, 30px)/1.35 var(--v3-block); color: var(--v3-lime); outline: 0; }
.wz-pop-p { margin: 0; font-size: 15.5px; line-height: 1.8; color: rgba(255, 255, 255, .86); }
.wz-pop-p b { color: #fff; }
.wz-pop-acts { display: grid; gap: 10px; margin-top: 20px; }
.wz-pop-acts .wz-btn, .wz-pop-acts .wz-ghost { width: 100%; }

@media (max-width: 1180px) {
  .wz-steps li:not([aria-current]) span i { display: none; }
}
@media (max-width: 980px) {
  .wz-plan { grid-template-columns: minmax(0, 1fr); }
  .wz-price { position: static; }
}

/* ===================================================================== phones */
@media (max-width: 760px) {
  :root {
    --v3-while: clamp(19px, 5.5vw, 28px);
    --v3-word: clamp(48px, 15.2vw, 82px);
    --v3-while-lh: 1.5;
    --v3-word-lh: 1.25;
    --v3-head-top: calc(84px + env(safe-area-inset-top, 0px));
    /* where his head starts: just inside the lower part of the word, on any screen height */
    --v3-ptop: calc(var(--v3-head-top) + var(--v3-while) * var(--v3-while-lh) + var(--v3-word) * .32);
  }
  /* unlike katteb, the page scrolls on a phone: the trust section sits below the hero */
  .v3-hero { background-image: url('../img/home-v3/bg-mob.webp'); height: 100vh; height: 100svh; min-height: 600px; }
  .v3-logo img { height: 30px; }
  .v3-rate { padding: 8px 12px; font-size: 12.5px; }
  .v3-rate span { display: none; }
  .v3-person { top: var(--v3-ptop); bottom: auto; height: calc(100svh - var(--v3-ptop) + 4px); min-height: calc(600px - var(--v3-ptop)); }
  /* crisp letters on a phone: only a faint sharp echo (blurred shadows smear the word on iOS) */
  .v3-word { text-shadow: .05em 0 0 rgba(255, 214, 10, .22), .1em 0 0 rgba(255, 214, 10, .08); }
  .v3-side { top: calc(var(--v3-ptop) + (100svh - var(--v3-ptop)) * .17); --v3-side-fs: clamp(15px, 4.6vw, 22px); --v3-side-gap: 36vw; padding: 0 4px; }
  .v3-side span { line-height: 1.35; }
  .v3-side span:first-child { text-align: end; }
  .v3-side span:last-child { text-align: start; }
  .v3-foot { gap: 8px; }
  .v3-note { font-size: 14px; max-width: 32ch; }
  .v3-form { padding-inline: 16px 6px; padding-block: 6px; }
  .v3-field input, .v3-ph { font-size: 16px; }
  .v3-btn { padding: 14px 18px; font-size: 15px; }
  .v3-logos { margin-top: 4px; gap: 8px; }
  .v3-logos small { font-size: 13.5px; }
  .v3-logos ul { flex-wrap: nowrap; gap: 18px; }
  .v3-logos li[data-key="magdi-yacoub"] { display: none; }
  .v3-logos img { height: 26px; }
  .v3-logos img.is-tall { height: 38px; }
  .v3-proof, .v3-more-grid { grid-template-columns: minmax(0, 1fr); }

  .v3-wiz::before { background-image: url('../img/home-v3/bg-mob.webp'); }
  .wz-top { grid-template-columns: auto 1fr auto; padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; gap: 8px; }
  .wz-logo img { height: 24px; }
  .wz-steps { justify-self: center; }
  .wz-steps span i { display: none; }
  .wz-steps li + li::before { width: 10px; margin: 0 3px; }
  .wz-close { width: 38px; height: 38px; }
  .wz-sound { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .wz-sound-l { display: none; }
  .wz-top-r { gap: 8px; }
  .wz-body { padding-top: 24px; }
  .wz-h { font-size: clamp(25px, 7.4vw, 32px); margin-bottom: 8px; }
  .wz-lead { margin-bottom: 18px; font-size: 15px; }
  .wz-ins, .wz-opts, .wz-chans { grid-template-columns: minmax(0, 1fr); }
  .wz-opt { min-height: 56px; }
  .wz-bar { padding-top: 10px; }
  .wz-bar-in { gap: 10px; }
  .wz-btn { min-height: 48px; padding: 0 20px; font-size: 15px; }
  .wz-ghost { min-height: 48px; padding: 0 16px; font-size: 14px; }
  .wz-bar-note { font-size: 12.5px; }
  .wz-bar-note.is-hide-sm { display: none; }
  .wz-plan-top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 6px; }
  .wz-tro { width: 96px; }
  .wz-psum { margin-inline: auto; }
  .wz-kpis { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .wz-kpi { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; padding: 12px 16px; text-align: start; }
  .wz-kpi b { font-size: clamp(30px, 9vw, 38px); }
  .wz-kpi.is-text { grid-template-columns: minmax(0, 1fr); }
  .wz-kpi.is-line { align-items: start; }
  .wz-kpi.is-line b { grid-row: span 2; align-self: center; min-width: 1.4em; text-align: center; }
  .wz-obar .wz-btn { padding: 0 16px; font-size: 14.5px; }
  .wz-obar-p b { font-size: 20px; }
}
@media (max-width: 480px) {
  .wz-logo { display: none; }
  .wz-top { grid-template-columns: 1fr auto; }
  .wz-steps { justify-self: start; }
  .wz-pop-card { padding: 22px 18px; border-radius: 20px; }
}
@media (max-width: 374px) {
  .v3-note { font-size: 13px; }
  .v3-btn { padding: 13px 14px; font-size: 14px; }
  .wz-steps li + li::before { width: 6px; margin: 0 2px; }
  .wz-btn { padding: 0 16px; }
}
@media (max-height: 640px) and (min-width: 761px) {
  .v3-logos { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-btn, .v3-form, .wz-btn { transition: none; }
  .v3-ph.is-typing::after { animation: none; }
  .v3-wiz.is-on, .wz-enter, .v3-wiz > .wz-pop, .v3-wiz > .wz-gaas, .wz-gaas-in, .wz-opt, .wz-opt.is-pop, .wz-hello, .wz-ptitle, .wz-psum, .wz-kpi, .wz-chan, .wz-stamp,
  .wz-tro svg, .wz-tro-rays, .wz-tro-shine, .wz-tro-sp path, .wz-orb, .wz-orb::before, .wz-orb::after, .wz-sat, .wz-cta.is-glow, .wz-price.is-reveal, .wz-cd b.is-tick, .wz-gaas-track i { animation: none !important; }
  .wz-sat { display: none; }
  .wz-tro-sp path { opacity: .8; transform: none; }
  .is-run .wz-dot, .wz-wait-line .wz-dot, .wz-site.is-run::before, .v3-btn.is-busy::after, .wz-btn.is-busy::after { animation-duration: 2.4s; }
  .wz-skel { animation: none; }
}