/* DenG Labs careers site. One stylesheet for the main page and role pages.
 *
 * Design system (keep new styles on these scales):
 *   Type sizes   12 · 14 · 16 · 18 · 22 · 30 · 56 · 88   (headings shrink on phones via clamp)
 *   Spacing      8 · 12 · 16 · 24 · 32 · 48 · 64 · 104
 *   Radii        10 buttons · 16 small boxes · 24 big cards · 999 pills
 *   Greys        --ink headings · --text body · --muted secondary
 *   Weights      500 body · 700 labels/buttons · 800 headings
 */

:root {
  --ink: #0B1220;
  --text: #3B4556;
  --muted: #5A6578;
  --line: #E3E8F0;
  --blue: #1877F2;
  --blue-dark: #0F5FCC;
  --blue-soft: #E4EEFF;
  --grey-soft: #F2F4F8;
  --green-soft: #E6F4CF;
  --lavender-soft: #E8E4FA;
  --warn-soft: #FFF4F2;
  --warn: #C2410C;

  --r-button: 10px;
  --r-box: 16px;
  --r-card: 24px;
  --r-pill: 999px;

  --gutter: clamp(16px, 5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
a { color: var(--ink); }
a:hover { color: var(--blue); }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; }
p { margin: 0; }
img, svg { flex-shrink: 0; }

/* overflow: clip (not hidden) trims the decorative dots without breaking position: sticky. */
.page { position: relative; overflow: clip; min-height: 100vh; }
.wrap { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- background decoration ---------- */

.dots { position: absolute; top: 0; left: 0; width: 100%; height: 760px; pointer-events: none; }

.deco-dot { position: absolute; border-radius: 50%; pointer-events: none; }
.deco-dot--1 { top: 190px; left: 7%; width: 12px; height: 12px; background: #6FA3F7; }
.deco-dot--2 { top: 470px; right: 9%; width: 16px; height: 16px; background: #BFD6FB; }
.deco-dot--3 { top: 600px; left: 15%; width: 8px; height: 8px; background: #C9CED8; }
.deco-dot--4 { top: 140px; right: 22%; width: 8px; height: 8px; background: #C9CED8; }
.deco-dot--r1 { top: 168px; right: 10%; width: 12px; height: 12px; background: #BFD6FB; }
.deco-dot--r2 { top: 328px; right: 22%; width: 8px; height: 8px; background: #C9CED8; }

/* ---------- header and buttons ---------- */

.header { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 80px; }
.logo { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; text-decoration: none; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--ink); border-radius: var(--r-button);
  font-weight: 700; font-size: 14px; text-decoration: none;
}

/* Primary action: always DenG blue. */
.btn-dark, .btn-apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r-button);
  background: var(--blue); color: #FFFFFF;
  font-family: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 12px 24px rgba(24, 119, 242, 0.25);
}
.btn-dark:hover, .btn-apply:hover { color: #FFFFFF; background: var(--blue-dark); }
.btn-dark { min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn-apply { min-height: 64px; padding: 0 32px; font-size: 18px; }

/* ---------- main page: hero ---------- */

.hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(32px, 6vw, 64px) 0 clamp(48px, 7vw, 64px);
}
.hero h1 { font-size: clamp(44px, 8vw, 88px); line-height: 1.02; }
.hero__accent { display: block; color: var(--blue); }
.hero__stop { margin-left: -0.04em; }
.hero__sub {
  margin: 24px 0 32px; max-width: 64ch;
  font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--text);
}

/* ---------- main page: video ---------- */

.video-section { padding-bottom: clamp(64px, 9vw, 104px); }
.video {
  display: block; position: relative; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: 0; border-radius: var(--r-box); overflow: hidden;
  background: var(--ink); color: #FFFFFF; cursor: pointer; font: inherit;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__tag {
  position: absolute; top: 16px; left: 16px; padding: 8px 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: var(--r-button);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1;
}
.video__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: var(--ink);
}
/* Role page: work videos. Two side by side from 640px, stacked on phones.
   The YouTube thumbnail is the button background; the dark overlay keeps the play button readable. */
.work-videos { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .work-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A single video takes the full width. */
.work-video:only-child { grid-column: 1 / -1; }
.work-video { margin: 0; }
/* Videos with a YouTube thumbnail as background (intro video + work videos). */
.video--thumb { background-size: cover; background-position: center; }
.video--thumb::before { content: ''; position: absolute; inset: 0; background: rgba(11, 18, 32, 0.25); transition: background 0.15s ease; }
.video--thumb:hover::before { background: rgba(11, 18, 32, 0.1); }
.work-video .video__play { width: 56px; height: 56px; }
.work-video figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text); }
.video-caption { margin-top: 16px; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); }

/* ---------- section headings (main page) ---------- */

.who h2, .roles h2 { font-size: clamp(30px, 5vw, 56px); line-height: 1.05; }

/* ---------- main page: who we're looking for ---------- */

.who { padding-bottom: clamp(64px, 9vw, 104px); }
.who__intro {
  margin: 16px 0 32px; max-width: 60ch;
  font-size: 18px; line-height: 1.6; color: var(--text);
}

/* Stacked on phones and tablets, three side by side from 960px up; never a 2 + 1 split. */
.traits { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 960px) { .traits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.trait {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  /* Bottom padding reserves the corner the shape sits in, so text never runs over it. */
  min-height: 240px; padding: 32px 32px 88px; border-radius: var(--r-card);
}
.trait--green { background: var(--green-soft); }
.trait--lavender { background: var(--lavender-soft); }
.trait--blue { background: var(--blue-soft); }
.trait__num {
  align-self: flex-start; padding: 4px 8px;
  border: 1.5px solid var(--ink); border-radius: var(--r-pill);
  font-weight: 700; font-size: 12px; line-height: 1.2;
}
.trait h3 { margin-top: 8px; font-size: 22px; line-height: 1.15; letter-spacing: -0.025em; }
.trait p { position: relative; z-index: 1; max-width: 30ch; font-size: 18px; line-height: 1.5; color: var(--text); }
.trait__shape { position: absolute; right: -12px; bottom: -16px; width: 88px; height: 88px; }
.trait__shape--wave { right: -8px; bottom: -4px; width: 100px; height: 64px; }

/* Phones and tablets: cards are full width, so text has room beside the shape. Shorter cards
   get people to Open roles sooner. */
@media (max-width: 959px) {
  .trait { min-height: 0; padding: 24px 96px 24px 24px; }
  .trait p { font-size: 16px; }
  .trait__shape { width: 72px; height: 72px; }
  .trait__shape--wave { width: 84px; height: 54px; }
}

/* ---------- main page: open roles ---------- */

.roles { padding-bottom: clamp(64px, 9vw, 104px); scroll-margin-top: 16px; }
.roles__head { margin-bottom: 24px; }

.role-list { display: flex; flex-direction: column; gap: 12px; }
.role-card {
  display: flex; align-items: center; gap: 24px; padding: 24px 32px;
  border: 1.5px solid var(--line); border-radius: var(--r-card); background: #FFFFFF;
  text-decoration: none; transition: border-color 0.15s ease;
}
.role-card:hover { color: var(--ink); border-color: var(--blue); }
.role-card__body { flex: 1 1 auto; min-width: 0; }
.role-card__name { font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.03em; }
.role-card__summary { margin-top: 8px; font-size: 16px; color: var(--text); }
.role-card__arrow {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}

.empty { padding: 32px 24px; border-radius: var(--r-card); background: var(--lavender-soft); }
.empty p { max-width: 30ch; font-size: 18px; line-height: 1.4; font-weight: 600; }

/* ---------- pills (shared) ---------- */

.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-pill);
  background: var(--grey-soft); color: var(--text);
  font-weight: 600; font-size: 14px; line-height: 1;
}
.pill--blue { background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; }

/* ---------- footer ---------- */

.footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding: 24px 0 48px; border-top: 1.5px solid var(--line);
  font-size: 14px; font-weight: 600; color: var(--muted);
}
.footer a { color: var(--muted); text-underline-offset: 3px; }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.social {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 12px; border-radius: var(--r-button);
  background: var(--grey-soft); color: var(--ink);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.footer a.social { color: var(--ink); }
.social:hover, .footer a.social:hover { background: var(--blue-soft); color: var(--blue); }

/* ---------- role page ---------- */

/* Single reading column. Below 1000px a sticky bottom Apply bar shows. */
.role-layout { display: block; }

/* One reading column, centred on the page; text inside stays left-aligned. */
.doc { max-width: 760px; margin-inline: auto; }
.doc h2 { margin-bottom: 16px; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.03em; }
.doc__intro { padding: clamp(32px, 6vw, 64px) 0 32px; }
.eyebrow { font-weight: 700; font-size: 14px; color: var(--blue); }
.doc__intro h1 { margin-top: 8px; font-size: clamp(40px, 7vw, 56px); line-height: 1.05; letter-spacing: -0.04em; }
.doc__summary { margin-top: 16px; font-size: 18px; color: var(--text); }
.doc__intro .pills { margin-top: 24px; }
.doc__section { padding: 32px 0; border-top: 1.5px solid var(--line); }
.doc__lead { margin: -4px 0 24px; color: var(--text); }

.bullets, .notfor, .checks, .steps { margin: 0; padding: 0; list-style: none; }
.bullets, .checks { display: flex; flex-direction: column; gap: 12px; }
.bullets li, .checks li, .notfor li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: var(--text); }
.bullets__mark { flex: 0 0 auto; width: 8px; height: 8px; margin: 9px 4px 0 0; border-radius: 2px; background: var(--blue); }
.checks svg { margin-top: 2px; color: var(--blue); }

.notfor { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-box); background: var(--warn-soft); }
.notfor li { color: var(--ink); }
.notfor svg { margin-top: 2px; color: var(--warn); }

.levels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; color: var(--muted); }
/* Each arrow sticks to the level after it, so a wrap never leaves an arrow hanging. */
.level-step { display: inline-flex; align-items: center; gap: 8px; }
.level { padding: 8px 12px; border-radius: var(--r-pill); font-weight: 700; font-size: 14px; line-height: 1; background: var(--grey-soft); color: var(--ink); }
.level--1 { background: var(--blue-soft); color: var(--blue-dark); }
.level--2 { background: var(--blue); color: #FFFFFF; }

.step { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: var(--r-box); background: var(--grey-soft); }
.step__num {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: #FFFFFF; font-weight: 800; font-size: 14px;
}
.step__title { font-weight: 800; font-size: 18px; line-height: 1.3; }
.step__text { margin-top: 4px; font-size: 16px; line-height: 1.55; color: var(--text); }
.steps__arrow { display: flex; align-items: center; height: 24px; padding-left: 25px; color: #8DB6F7; }

/* Apply block: left aligned, the blue button is the only solid colour. */
.apply { position: relative; padding: 48px 0; border-top: 1.5px solid var(--line); }
.apply__dots {
  position: absolute; top: 0; bottom: 0; left: -40px; width: 520px; max-width: 120%; pointer-events: none;
  background-image: radial-gradient(#D5DDEA 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 260px 130px at 200px 62%, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
          mask-image: radial-gradient(ellipse 260px 130px at 200px 62%, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.apply__dot { position: absolute; top: 56%; left: 392px; width: 12px; height: 12px; border-radius: 50%; background: #BFD6FB; }
.apply__body { position: relative; }
.apply h2 { font-size: clamp(30px, 4vw, 30px); line-height: 1.1; }
.apply__note { margin-top: 12px; font-size: 18px; color: var(--muted); }
.apply .btn-apply { margin-top: 32px; }
.apply__meta { margin-top: 16px; font-size: 14px; color: var(--muted); }

.back { padding: 32px 0 48px; }
.back a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; }

/* ---------- application form (hiring system) ---------- */

.doc--form { max-width: 640px; padding-bottom: 64px; }
.apply-form { display: flex; flex-direction: column; gap: 24px; }
.apply-form h2 { margin: 16px 0 -8px; padding-top: 24px; border-top: 1.5px solid var(--line); font-size: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { padding: 0; font-weight: 700; font-size: 16px; color: var(--ink); }
/* A legend ignores the flex gap, so give it the same 8px space by hand. */
.field legend { margin-bottom: 8px; }
.field__hint { margin-top: -4px; font-size: 14px; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"],
.field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  border: 1.5px solid #CBD3E0; border-radius: var(--r-button); background: #FFFFFF;
  font: inherit; font-size: 16px; color: var(--ink);
}
.field textarea { resize: vertical; }
/* Custom arrow: same 16px inset on the right as the text has on the left. */
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230B1220' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.choice { display: flex; gap: 12px; flex-wrap: wrap; }
.choice label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border: 1.5px solid #CBD3E0; border-radius: var(--r-button); font-weight: 600; cursor: pointer;
}
.choice label:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark); }
.choice input { accent-color: var(--blue); width: 18px; height: 18px; }
.field__error { min-height: 0; font-size: 14px; font-weight: 600; color: var(--warn); }
.field__error:empty { display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea, .field.has-error .choice label { border-color: var(--warn); }
.form-error { font-weight: 700; color: var(--warn); }
.form-error:empty { display: none; }
.apply-form .btn-apply { align-self: flex-start; }
.apply-form .btn-apply:disabled { opacity: 0.6; cursor: wait; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { padding: 48px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.form-done h2 { margin: 0; font-size: 30px; }
.form-done .doc__summary { margin: 0; }

/* ---------- interview booking page ---------- */

.booked { margin-bottom: 32px; padding: 24px; border-radius: var(--r-card); background: var(--blue-soft); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.booked__label { font-weight: 700; font-size: 14px; color: var(--blue-dark); }
.booked__time { font-weight: 800; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.03em; line-height: 1.15; }
.booked .apply__meta { margin-top: 0; }
.booked .apply__meta:empty { display: none; }
.booked .btn-outline { cursor: pointer; font-family: inherit; color: var(--ink); background: #FFFFFF; }
.slots__tz { margin-bottom: 24px; font-size: 14px; color: var(--muted); }
.slots__days { display: flex; flex-direction: column; gap: 16px; }
/* Day picker: short weekday on top, date below. The chosen day is solid blue. */
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.day {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px;
  border: 1.5px solid #CBD3E0; border-radius: var(--r-button); background: #FFFFFF;
  color: var(--ink); font: inherit; cursor: pointer;
}
.day:hover { border-color: var(--blue); }
.day__name { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.day__date { font-size: 16px; font-weight: 800; }
.day[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #FFFFFF; }
.day[aria-pressed="true"] .day__name { color: rgba(255, 255, 255, 0.8); }
.slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.slot {
  min-height: 48px; padding: 0 12px; border: 1.5px solid #CBD3E0; border-radius: var(--r-button);
  background: #FFFFFF; color: var(--ink); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.slot:hover { border-color: var(--blue); color: var(--blue-dark); }
.slot[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #FFFFFF; }
.slots__empty { padding: 24px; border-radius: var(--r-box); background: var(--grey-soft); }
/* One slim row on every screen: chosen time on the left, Confirm on the right. */
.slots__confirm {
  position: sticky; bottom: 0; margin-top: 24px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: #FFFFFF; border-top: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.slots__chosen { min-width: 0; font-weight: 800; font-size: 16px; line-height: 1.3; }
.slots__confirm .btn-apply { flex: 0 0 auto; width: auto; min-height: 48px; font-size: 16px; padding: 0 20px; box-shadow: none; }
[data-booking] .form-error { margin-top: 16px; }
.skeleton { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.skeleton__box { display: block; height: 48px; border-radius: var(--r-button); background: var(--grey-soft); animation: skeleton-pulse 1.2s ease-in-out infinite alternate; }
.skeleton__box--day { height: 60px; }
@keyframes skeleton-pulse { from { opacity: 1; } to { opacity: 0.45; } }

/* ---------- sticky Apply bar (role page, below 1000px) ---------- */

.sticky-apply { display: none; }

@media (max-width: 999px) {
  .sticky-apply {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1.5px solid var(--line);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    transition: transform 0.2s ease;
  }
  .sticky-apply.is-hidden { transform: translateY(110%); }
  .sticky-apply__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .sticky-apply__text strong { font-size: 16px; font-weight: 800; }
  .sticky-apply__text span { font-size: 14px; font-weight: 600; color: var(--blue-dark); }
  .sticky-apply__btn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 24px; border-radius: var(--r-button);
    background: var(--blue); color: #FFFFFF; font-weight: 700; font-size: 16px; text-decoration: none;
  }
  .sticky-apply__btn:hover { color: #FFFFFF; }
  .sticky-apply__btn svg { width: 18px; height: 18px; }
  /* Keep the page bottom from hiding under the bar. */
  .doc .back { padding-bottom: 104px; }
}

/* ---------- small phones ---------- */

/* The hero and intro text fill the width, so background dots would sit on words. */
@media (max-width: 480px) {
  .deco-dot { display: none; }
}

@media (max-width: 420px) {
  .hero__sub br { display: none; }
  /* Arrow moves to the top-right corner so the text gets the full card width. */
  .role-card { position: relative; padding: 24px; }
  .role-card__name { padding-right: 48px; }
  .role-card__arrow { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; }
  /* All three pay levels fit on one line on a 375px phone. */
  .levels, .level-step { gap: 4px; }
  .level { padding: 8px; font-size: 12px; }
  .btn-apply { width: 100%; padding: 0 24px; font-size: 16px; }
  .booked .btn-outline { width: 100%; justify-content: center; min-height: 48px; }
  .apply__dot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sticky-apply { transition: none; }
  .skeleton__box { animation: none; }
}
.slot--current, .slot--current:hover { border-style: dashed; color: var(--muted); background: var(--grey-soft); cursor: default; }
/* Time on top, a small "Current" label under it. */
.slot--current { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.slot--current small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }