/* Landing demo CD: Chapters (D) with the owner's changes. Loaded after landing-d.css; every rule is scoped under .ldcd (which sits on the same element as .ldd).
   1. a more visible "See how it works" button and a faint plan note   2. a radar behind the engineered slip (two versions)
   3. the risk bar of Control Room (C) instead of the full-width swatches   4. the booking codes blurred at a slight angle. No inline styles (strict CSP). */
.ldcd {
  --s1: var(--ring-red); --s2: var(--ring-orange-red); --s3: var(--ring-amber);
  --s4: color-mix(in srgb, var(--ring-amber) 50%, var(--ring-lime-amber)); --s5: var(--ring-lime-amber);
  --s6: color-mix(in srgb, var(--ring-lime-amber) 50%, var(--ring-green)); --s7: var(--ring-green);
}

/* ---- hero: the way down (a quiet link, centred with its note; the two buttons above stay the only buttons) ----------------------------------------- */
.ldcd .howbox { display: grid; justify-items: center; gap: 6px; margin-top: clamp(14px, 3svh, 28px); text-align: center; }
.ldcd .how { margin-top: 0; text-decoration: none; transition: text-shadow 0.25s, color 0.25s; }
.ldcd .how svg { transition: filter 0.25s; }
.ldcd .how:hover, .ldcd .how:focus-visible { color: var(--teal-text); text-shadow: 0 0 18px color-mix(in srgb, var(--teal) 75%, transparent); }
.ldcd .how:hover svg, .ldcd .how:focus-visible svg { filter: drop-shadow(0 0 7px var(--teal)); }
.ldcd .plan-note { font-size: 0.82rem; color: var(--text-dim); opacity: 0.85; }

/* ---- 03: the radar -------------------------------------------------------------------------------------------------------------------------
   Its centre is on the bottom edge of the chapter, where 03 meets 04, so the chapter cuts it in half there, and its size follows the height of the screen, so it
   looks the same zoomed out. The beam turns the full 360 degrees; the half below the edge is simply not on screen. */
.ldcd .ch-slips .radar { --R: clamp(240px, 66svh, 800px); position: absolute; z-index: 2; left: 64%; bottom: 0; width: calc(var(--R) * 2); height: calc(var(--R) * 2); margin: 0 0 calc(var(--R) * -1) calc(var(--R) * -1);
  border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(39, 227, 194, 0.12), transparent 68%); }
.ldcd .radar .rg { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(39, 227, 194, 0.4); }
.ldcd .radar .r2 { inset: 18%; border-color: rgba(39, 227, 194, 0.34); }
.ldcd .radar .r3 { inset: 36%; border-color: rgba(39, 227, 194, 0.28); }
.ldcd .radar .ping { display: none; border: 1.5px solid var(--teal); }
/* the beam is not held by the rings: it reaches across the slip and on into the chapter, fading with distance */
.ldcd .radar .beam { position: absolute; inset: calc(var(--R) * -4.5); border-radius: 50%; transform: rotate(20deg);
  background: conic-gradient(from 0deg, rgba(39, 227, 194, 0) 0deg, rgba(39, 227, 194, 0.16) 30deg, rgba(39, 227, 194, 0.55) 34deg, rgba(39, 227, 194, 0) 34.6deg, rgba(39, 227, 194, 0) 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 60%); mask-image: radial-gradient(circle, #000 12%, transparent 60%); }
@keyframes cdturn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cdping { 0% { transform: scale(0.25); opacity: 0.7; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .ldcd .radar .beam { animation: cdturn 9s linear infinite; }
  .ldcd .radar .ping { display: block; animation: cdping 3.6s ease-out infinite; }
  .ldcd .radar .ping + .ping { animation-delay: 1.8s; }
}
@media (max-width: 900px) { .ldcd .ch-slips .radar { left: 50%; } }

/* ---- 04: the risk bar of Control Room (dots and knob a little larger, in proportion to the track) ------------------------------------------- */
.ldcd .dialbox { margin-top: clamp(14px, 3svh, 30px); }
.ldcd .dialbar { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); cursor: pointer; }
.ldcd .dialbar .track { position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 20px; height: 12px; border-radius: 8px; pointer-events: none;
  background: linear-gradient(90deg, var(--s1), var(--s2), var(--s3), var(--s4), var(--s5), var(--s6), var(--s7));
  box-shadow: 0 0 0 3px var(--ink-950), 0 0 26px -2px color-mix(in srgb, var(--sc) 70%, transparent); }
.ldcd .dialbar .stop { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 88px; padding: 10px 0 6px; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ldcd .dialbar .stop i { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--c); border: 5px solid var(--ink-950); box-shadow: 0 0 0 2px var(--c); transition: transform 0.2s; }
.ldcd .dialbar .stop:hover i { transform: scale(1.15); }
.ldcd .dialbar .stop .sl { padding: 0; font: 600 13px/1.2 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-dim); text-align: center; }
.ldcd .dialbar .stop[aria-checked="true"] .sl { color: var(--text); }
.ldcd .dialbar .stop:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 12px; }
/* the knob sits above the dots: it arrives over the dot it lands on, never behind it */
.ldcd .dialbar .knob { z-index: 4; top: 26px; width: 64px; height: 64px; border-radius: 0; background: none; box-shadow: none; transform: translate(-50%, -50%); }
.ldcd .dialbar .knob::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--teal); border: 4px solid var(--ink-950); box-shadow: 0 0 0 2px var(--teal), 0 0 24px color-mix(in srgb, var(--teal) 70%, transparent); transition: transform 0.2s; }
.ldcd .dialbar.drag .knob::before { transform: scale(1.1); }
.ldcd .dialbar:has(.stop:focus-visible) .knob::before { box-shadow: 0 0 0 2px var(--teal), 0 0 0 6px var(--ink-950), 0 0 0 8px var(--text); }
.ldcd .dial-ends { display: none; justify-content: space-between; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
@media (max-width: 700px) {
  .ldcd .dialbar .stop .sl, .ldcd .dialbar .stop[data-pos="1"] .sl, .ldcd .dialbar .stop[data-pos="7"] .sl { display: none; }
  .ldcd .dialbar .stop { min-height: 62px; }
  .ldcd .dialbar .stop i { width: 26px; height: 26px; border-width: 4px; }
  .ldcd .dialbar .track { top: 17px; height: 10px; }
  .ldcd .dialbar .knob { top: 23px; width: 56px; height: 56px; }
  .ldcd .dial-ends { display: flex; }
}

/* ---- 05: the codes, blurred at a slight angle --------------------------------------------------------------------------------------- */
.ldcd .veil { position: relative; overflow: hidden; margin-top: 6px; padding: 0.22em 0; border-radius: var(--r-md); }
.ldcd .veil .code { margin-top: 0; transform: rotate(-4deg); transform-origin: 0 60%; filter: blur(clamp(7px, 1.5cqi, 18px)); -webkit-user-select: none; user-select: none; pointer-events: none; opacity: 0.9; }
.ldcd .veil-lock { position: absolute; right: 4px; top: 6px; color: var(--text-dim); }

/* ---- closing: "Your next slip / is ready." on two lines, never three --------------------------------------------------------------------------- */
.ldcd .ch-close .cl-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); }
.ldcd .ch-close .big { --fs: clamp(3rem, min(7.4vw, 15svh), 8.4rem); }
@media (max-width: 900px) { .ldcd .ch-close .cl-grid { grid-template-columns: minmax(0, 1fr); } .ldcd .ch-close .big { --fs: clamp(2.4rem, 11.2vw, 5.4rem); } }

/* ---- the first slide, variant A: the logo as the headline ------------------------------------------------------------------------------- */
.ldcd .hero-logo { margin: 0 0 clamp(6px, 1.4svh, 14px); }
.ldcd .hero-logo img { width: clamp(260px, 40vw, 560px); height: auto; }
.ldcd .ch-hero .hero-sub { max-width: 38ch; font-weight: 400; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.45; }
/* the buttons, the way-down link and its note sit under the whole hero, on the centre line of the page (the chapter's padding is wider on the right, so the block is nudged back by half the difference) */
.ldcd .hero-actions { display: grid; justify-items: center; margin-top: clamp(20px, 4svh, 40px); transform: translateX(calc((var(--padr) - var(--pad)) / 2)); }
.ldcd .hero-actions .ctas { justify-content: center; margin-top: 0; }

/* the wordmark comes in two files, one for each theme; the landing reset had made both show, so the one for the other theme is hidden here */
.ldcd .hero-logo .logo-light { display: none; }
:root[data-theme="light"] .ldcd .hero-logo .logo-dark { display: none; }
:root[data-theme="light"] .ldcd .hero-logo .logo-light { display: block; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .ldcd .hero-logo .logo-dark { display: none; } :root:not([data-theme]) .ldcd .hero-logo .logo-light { display: block; } }

/* ---- the first slide's line: one word carries an amber bar that draws itself under it ---- */
.ldcd .amber-bar { background: linear-gradient(90deg, var(--gold), #ff9a3d) no-repeat 0 100% / 100% 0.16em; padding-bottom: 0.1em; font-weight: 800; }
html.anim .ldcd .chapter:not(.in) .amber-bar { background-size: 0 0.16em; }
html.anim .ldcd .chapter .amber-bar { transition: background-size 0.9s var(--ease) 0.9s; }
@media (prefers-reduced-motion: reduce) { .ldcd .amber-bar { transition: none; } }