/* ==========================================================================
   WIZKET — dial.css · "Tune in" (Marketing page, #channels)
   A brushed-metal tuning dial (13 notches, orange needle, glowing hub) and a CRT
   screen that shows the ad as it looks on each platform. js/dial.js turns it from the
   scroll (desktop, pinned) or by drag / tap (phones). The dial and the screen are
   hardware: dark in both themes. --tint (set per channel) washes the background.
   Prefix: dl- (section) · dlv- (the mock screens)
   ========================================================================== */
.dl { position: relative; }
.dl__stage {
  --side: clamp(20px, 6vw, 110px);
  --tint: #4f7fd9;
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding: calc(var(--nav-top) + var(--nav-h) + 16px) var(--side) clamp(20px, 3vh, 34px);
  background:
    radial-gradient(50% 60% at 72% 50%, color-mix(in srgb, var(--tint) 9%, transparent) 0%, transparent 70%),
    radial-gradient(55% 60% at 28% 55%, var(--petrol) 0%, transparent 70%),
    var(--bg);
  transition: background 0.8s var(--ease-io);
}

.dl-ring {
  position: fixed;
  z-index: 6;
  left: 0;
  top: 0;
  box-sizing: border-box;
  border: 6px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(253, 95, 7, 0.7), inset 0 0 30px rgba(253, 95, 7, 0.5);
  visibility: hidden;
  pointer-events: none;
}

/* ---- left: title + dial ---- */
.dl__left { display: grid; justify-items: start; align-content: center; min-height: 0; }
.dl__title { margin: 0; font: 400 clamp(2.6rem, min(5.2vw, 9.5vh), 5.8rem)/0.9 var(--font-display); text-transform: uppercase; color: var(--text); }

.dl-dial {
  --d: min(46vh, 30vw, 420px);
  position: relative;
  width: var(--d);
  height: var(--d);
  margin: clamp(26px, 5vh, 48px) 0 0 clamp(24px, 3vw, 46px);
  perspective: 900px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.dl-dial__face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.035) 0deg 2deg, rgba(0, 0, 0, 0.04) 2deg 4deg),
    radial-gradient(circle at 35% 30%, #4a555c 0%, #262e33 45%, #14191c 100%);
  box-shadow:
    0 40px 70px -30px rgba(0, 0, 0, 0.85),
    0 0 0 10px #10151800,
    inset 0 2px 0 rgba(255, 255, 255, 0.14),
    inset 0 -10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-out);
}
.dl-dial__face::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #333d43, #161b1f 70%); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.08); }
.dl-dial__ticks { position: absolute; inset: 0; }

.dl-tick {
  --a: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  transform: rotate(var(--a));
}
.dl-tick i { position: absolute; left: -1.5px; top: calc(var(--d) * -0.5 + 6px); width: 3px; height: calc(var(--d) * 0.07); border-radius: 2px; background: rgba(255, 255, 255, 0.35); transition: background-color 0.3s, box-shadow 0.3s; }
.dl-tick span {
  position: absolute;
  left: 0;
  top: calc(var(--d) * -0.5 - 24px);
  translate: -50% 0;
  transform: rotate(calc(var(--a) * -1));
  font: 700 10.5px/1 var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s;
}
.dl-tick.is-on i { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.dl-tick.is-on span { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .dl-tick:hover span { color: var(--text); } }
.dl-tick:focus-visible span { outline: 2px solid var(--accent); outline-offset: 3px; }

.dl-dial__needle { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.dl-dial__needle i { position: absolute; left: -3px; top: calc(var(--d) * -0.39); width: 6px; height: calc(var(--d) * 0.39); border-radius: 6px 6px 2px 2px; background: linear-gradient(#ff8a3d, var(--accent)); box-shadow: 0 0 14px rgba(253, 95, 7, 0.7); }
.dl-dial__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--d) * 0.2);
  height: calc(var(--d) * 0.2);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3b464c, #12171a);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  transition: background 0.4s, box-shadow 0.4s;
}
.dl-dial__hub.is-lit { background: radial-gradient(circle at 40% 35%, #ffb27a, var(--accent) 55%, #c2410c); box-shadow: 0 0 0 5px rgba(253, 95, 7, 0.2), 0 0 40px rgba(253, 95, 7, 0.75); }

.dl__nav { display: flex; align-items: center; gap: 14px; margin: clamp(30px, 4.5vh, 44px) 0 0 calc(clamp(24px, 3vw, 46px) + var(--d, 300px) / 2 - 90px); }
.dl-dial ~ .dl__nav { margin-left: clamp(24px, 3vw, 46px); }
.dl__arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line2); background: var(--surface); font: 400 24px/1 var(--font-body); color: var(--text); transition: border-color 0.3s; }
@media (hover: hover) and (pointer: fine) { .dl__arrow:hover { border-color: var(--text); } }
.dl__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dl__count { margin: 0; font: 400 18px/1 var(--font-display); letter-spacing: 0.08em; color: var(--muted); }
.dl__count b { font-weight: 400; color: var(--accent); }

/* ---- right: the CRT + the details ---- */
.dl__right { display: grid; gap: clamp(16px, 3vh, 26px); align-content: center; min-height: 0; }
.dl-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 52vh;
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(90% 90% at 50% 45%, #141c21 0%, #070a0c 100%);
  border: 10px solid #1a2024;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85), inset 0 0 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.dl-screen__freq { position: absolute; z-index: 3; left: 16px; top: 12px; margin: 0; font: 600 11px/1 ui-monospace, Consolas, monospace; letter-spacing: 0.12em; color: #7fe0a8; text-shadow: 0 0 6px rgba(127, 224, 168, 0.6); }
.dl-screen__view { position: absolute; inset: 0; display: grid; place-items: center; padding: 34px 26px 22px; }
.dl-screen__static { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; opacity: 0; image-rendering: pixelated; pointer-events: none; }
.dl-screen__scan { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px); box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.55); border-radius: 18px; }
.dl-screen__scan::after { content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 20%; background: linear-gradient(transparent, rgba(255, 255, 255, 0.06), transparent); animation: dl-roll 5s linear infinite; }
@keyframes dl-roll { to { transform: translateY(600%); } }
.dl-screen.is-tuning .dl-screen__static { opacity: 0.55; }
.dl-screen.is-tuning .dl-screen__view { filter: blur(3px) brightness(1.6); transform: skewX(-4deg) scaleY(1.04); }
.dl-screen__view { transition: filter 0.15s, transform 0.15s; }

.dl-now { min-height: 120px; }
.dl-now p { margin: 0; }
.dl-now__name { margin: 0; font: 400 clamp(2rem, min(3.4vw, 6.4vh), 3.4rem)/0.95 var(--font-display); text-transform: uppercase; color: var(--text); }
.dl-now__what { margin-top: 10px !important; font: 600 clamp(1rem, 1.2vw, 1.12rem)/1.35 var(--font-body); color: var(--text); }
.dl-now__best { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px !important; font: 500 14px/1.3 var(--font-body); color: var(--muted); }
.dl-now__best em { padding: 6px 10px; border-radius: 8px; background: var(--accent-soft); font: 700 10.5px/1 var(--font-body); font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.dl-now.is-swap > * { animation: dl-swap 0.5s var(--ease-out) both; }
.dl-now.is-swap > *:nth-child(2) { animation-delay: 0.05s; }
.dl-now.is-swap > *:nth-child(3) { animation-delay: 0.1s; }
@keyframes dl-swap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   The mock screens (each fits the CRT; light "app" palettes)
   -------------------------------------------------------------------------- */
.dlv { position: relative; font-family: var(--font-body); color: #15191c; }
.dlv p { margin: 0; }
.dlv .mk-cup { transform: scale(0.7); }
.dlv-who { display: flex; align-items: center; gap: 8px; font: 700 12px/1 var(--font-body); }
.dlv-who i, .dlv-wahead i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #fd5f07; font: 400 12px/1 var(--font-display); font-style: normal; color: #fff; }
.dlv-img { display: grid; place-items: center; border-radius: 10px; background: linear-gradient(160deg, #ff8a3d, #c2410c); }

.dlv--search, .dlv--seo, .dlv--mail { width: min(100%, 440px); padding: 16px 18px; border-radius: 14px; background: #fff; display: grid; gap: 8px; }
.dlv-q { padding: 9px 14px; border-radius: 999px; border: 1px solid #dfe3e6; font: 500 13px/1 var(--font-body); }
.dlv-q::before { content: "\2315  "; color: #8a959b; }
.dlv-res { display: grid; gap: 5px; padding: 10px 12px; border-radius: 10px; background: #fff7f1; box-shadow: inset 3px 0 0 #fd5f07; }
.dlv-sp { font: 700 11px/1 var(--font-body); }
.dlv-t { font: 600 16px/1.2 var(--font-body); color: #1a4fd6; }
.dlv-d { font: 400 12.5px/1.35 var(--font-body); color: #4d5960; }
.dlv-links { display: flex; gap: 14px; font: 600 12px/1 var(--font-body); color: #1a4fd6; }
.dlv-ln { display: block; height: 8px; border-radius: 4px; background: #eceff1; }
.dlv-ln.is-s { width: 60%; }

.dlv--maps { width: min(100%, 440px); display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border-radius: 14px; background: #fff; }
.dlv-map { position: relative; min-height: 170px; background: #e8efe6; }
.dlv-map i { position: absolute; background: #fff; }
.dlv-map i:nth-child(1) { left: 0; right: 0; top: 46%; height: 12px; }
.dlv-map i:nth-child(2) { top: 0; bottom: 0; left: 38%; width: 12px; }
.dlv-map i:nth-child(3) { left: 0; right: 0; top: 18%; height: 6px; transform: rotate(-12deg); }
.dlv-pin { position: absolute; left: 50%; top: 40%; width: 26px; height: 26px; margin: -26px 0 0 -13px; border-radius: 50% 50% 50% 0; background: #fd5f07; transform: rotate(-45deg); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); animation: dl-pin 0.6s var(--ease-out) both; }
.dlv-pin::after { content: ""; position: absolute; left: 8px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
@keyframes dl-pin { from { transform: translateY(-40px) rotate(-45deg); opacity: 0; } }
.dlv-mcard { display: grid; align-content: center; gap: 8px; padding: 14px; }
.dlv-mcard b { font: 700 15px/1.2 var(--font-body); }
.dlv-mcard span { font: 500 11.5px/1.3 var(--font-body); color: #b06d00; }
.dlv-mcard p { display: flex; flex-wrap: wrap; gap: 6px; }
.dlv-mcard em { padding: 6px 9px; border-radius: 999px; border: 1px solid #dfe3e6; font: 600 11px/1 var(--font-body); font-style: normal; color: #1a4fd6; }

.dlv--yt { width: min(100%, 440px); aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #1a0f08, #7c2d12); color: #fff; overflow: hidden; }
.dlv--yt .mk-cup { transform: scale(1); }
.dlv-adl { position: absolute; left: 12px; bottom: 14px; font: 700 11.5px/1 var(--font-body); }
.dlv-skip { position: absolute; right: 0; bottom: 30px; padding: 9px 14px; background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(255, 255, 255, 0.3); border-right: 0; font: 600 12.5px/1 var(--font-body); }
.dlv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.25); }
.dlv-bar i { display: block; height: 100%; width: 10%; background: #f5c518; animation: dl-yt 5s linear infinite; }
@keyframes dl-yt { to { width: 100%; } }

.dlv--shop { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: 10px; }
.dlv-prod { display: grid; gap: 5px; padding: 8px; border-radius: 12px; background: #fff; }
.dlv-prod .dlv-img { height: 80px; background: #eef1f3; }
.dlv-prod.is-sp { box-shadow: 0 0 0 2px #fd5f07; }
.dlv-prod.is-sp .dlv-img { background: linear-gradient(160deg, #ff8a3d, #c2410c); }
.dlv-prod b { font: 600 11.5px/1.2 var(--font-body); }
.dlv-prod em { font: 800 14px/1 var(--font-body); font-style: normal; }
.dlv-prod small { font: 500 10px/1 var(--font-body); color: #b06d00; }

.dlv--ig, .dlv--short { height: 100%; display: grid; place-items: center; }
.dlv-reel { position: relative; height: min(100%, 300px); aspect-ratio: 9 / 16; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(180deg, #2a1306 0%, #c2410c 65%, #fd5f07 100%); color: #fff; overflow: hidden; }
.dlv--short .dlv-reel { background: linear-gradient(180deg, #101418, #3a2a55 60%, #c94f9a); }
.dlv-cap { position: absolute; left: 10px; right: 30px; bottom: 44px; font: 700 11.5px/1.3 var(--font-body); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); }
.dlv-shopnow { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.92); text-align: center; font: 800 11px/1 var(--font-body); color: #15191c; }
.dlv-likes { position: absolute; right: 8px; bottom: 80px; text-align: center; font: 700 10px/1.2 var(--font-body); }
.dlv-sound { position: absolute; left: 10px; bottom: 12px; display: flex; align-items: center; gap: 6px; font: 600 10px/1 var(--font-body); }
.dlv-eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.dlv-eq i { width: 3px; background: #fff; animation: dl-eq 0.8s ease-in-out infinite alternate; }
.dlv-eq i:nth-child(2) { animation-delay: 0.2s; } .dlv-eq i:nth-child(3) { animation-delay: 0.4s; } .dlv-eq i:nth-child(4) { animation-delay: 0.1s; }
@keyframes dl-eq { from { height: 3px; } to { height: 12px; } }

.dlv--fb { width: min(100%, 440px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: center; }
.dlv-post { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: #fff; }
.dlv-post .dlv-img { height: 110px; }
.dlv-form { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.6); animation: dl-pop 0.5s var(--ease-out) 0.2s both; }
.dlv-form b { font: 700 13px/1.2 var(--font-body); }
.dlv-form i { display: block; padding: 8px 10px; border-radius: 6px; border: 1px solid #dfe3e6; font: 500 11px/1 var(--font-body); font-style: normal; color: #8a959b; }
.dlv-form em { padding: 9px; border-radius: 6px; background: #1a4fd6; text-align: center; font: 700 12px/1 var(--font-body); font-style: normal; color: #fff; }
@keyframes dl-pop { from { opacity: 0; transform: translateY(16px) scale(0.92); } }

.dlv--wa { width: min(100%, 360px); display: grid; gap: 8px; padding-bottom: 14px; overflow: hidden; border-radius: 14px; background: #efe9e1; }
.dlv-wahead { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: #1f6f54; font: 700 13px/1 var(--font-body); color: #fff; }
.dlv-wahead small { margin-left: auto; font: 500 10.5px/1 var(--font-body); opacity: 0.8; }
.dlv-bub { justify-self: end; max-width: 78%; margin: 0 12px !important; padding: 8px 10px; border-radius: 10px 2px 10px 10px; background: #d9fdd3; font: 500 12px/1.35 var(--font-body); animation: dl-pop 0.4s var(--ease-out) both; }
.dlv-bub.is-them { justify-self: start; border-radius: 2px 10px 10px 10px; background: #fff; animation-delay: 0.35s; }
.dlv-bub:nth-child(4) { animation-delay: 0.7s; }

.dlv--li { width: min(100%, 360px); display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: #fff; }
.dlv-doc { height: 140px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 10px; background: #15191c; color: #fff; }
.dlv-doc b { font: 400 28px/0.95 var(--font-display); text-transform: uppercase; }
.dlv-doc span { font: 500 11px/1.3 var(--font-body); opacity: 0.75; }
.dlv-react { font: 600 11px/1 var(--font-body); color: #66727a; }

.dlv--niche { width: min(100%, 440px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlv--niche span { display: grid; gap: 6px; padding: 18px 14px; border-radius: 12px; background: #fff; }
.dlv--niche span:nth-child(1) { background: #15191c; color: #fff; }
.dlv--niche span:nth-child(2) { box-shadow: inset 4px 0 0 #d6336c; }
.dlv--niche span:nth-child(3) { background: #fffc00; }
.dlv--niche span:nth-child(4) { box-shadow: inset 4px 0 0 #ff6314; }
.dlv--niche b { font: 400 22px/1 var(--font-display); text-transform: uppercase; }
.dlv--niche em { font: 600 11px/1 var(--font-body); font-style: normal; opacity: 0.7; }

.dlv-rank { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: r; }
.dlv-rank li { counter-increment: r; padding: 7px 10px; border-radius: 8px; background: #f3f5f6; font: 500 12px/1.2 var(--font-body); color: #4d5960; }
.dlv-rank li::before { content: "#" counter(r) "  "; font-weight: 800; color: #8a959b; }
.dlv-rank li.is-you { background: #fff1e8; color: #15191c; box-shadow: inset 3px 0 0 #fd5f07; animation: dl-climb 1.2s var(--ease-out) both; }
.dlv-rank li.is-you b { color: #1a4fd6; }
@keyframes dl-climb { from { transform: translateY(130px); opacity: 0.4; } }
.dlv-climb { justify-self: end; font: 700 12px/1 var(--font-body); color: #66727a; }
.dlv-climb b { color: #fd5f07; }

.dlv-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 9px 10px; border-radius: 8px; font: 400 12px/1.3 var(--font-body); color: #66727a; }
.dlv-row b { font-weight: 700; color: #15191c; }
.dlv-row.is-new { background: #fff1e8; box-shadow: inset 3px 0 0 #fd5f07; animation: dl-pop 0.5s var(--ease-out) both; }

.dlv--pick { display: grid; justify-items: center; gap: 12px; max-width: 360px; text-align: center; color: #fff; }
.dlv--pick > b { font: 400 80px/0.8 var(--font-display); color: #fd5f07; text-shadow: 0 0 30px rgba(253, 95, 7, 0.6); }
.dlv--pick p { font: 600 14px/1.4 var(--font-body); color: #dfe6ea; }
.dlv-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dlv-picks em { padding: 7px 11px; border-radius: 999px; background: rgba(253, 95, 7, 0.16); border: 1px solid #fd5f07; font: 700 12px/1 var(--font-body); font-style: normal; color: #fff; animation: dl-pop 0.4s var(--ease-out) both; }
.dlv-picks em:nth-child(2) { animation-delay: 0.15s; } .dlv-picks em:nth-child(3) { animation-delay: 0.3s; }

/* --------------------------------------------------------------------------
   Small screens: dial on top, screen underneath, no pin
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .dl__stage { height: auto; min-height: 0; grid-template-columns: 1fr; gap: 26px; padding: clamp(90px, 13vh, 130px) var(--side) clamp(60px, 9vh, 90px); }
  .dl__left { justify-items: center; text-align: center; }
  .dl .ws-eyebrow { justify-content: center; }
  .dl-dial { --d: min(60vw, 290px); margin: 46px 0 0; }
  .dl-dial ~ .dl__nav { margin: 30px 0 0; }
  .dl-screen { border-width: 7px; border-radius: 20px; max-height: none; }
  .dl-screen__view { padding: 30px 12px 14px; }
  .dlv--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .dlv--fb { grid-template-columns: 1fr; }
  .dlv--fb .dlv-post { display: none; }
  .dlv--maps .dlv-map { min-height: 130px; }
  .dlv-reel { height: min(100%, 220px); }
}
@media (max-width: 480px) {
  .dl-screen { aspect-ratio: 4 / 4.2; }
}