/* Layout switches that the Claude Design runtime handled in JS (breakpoint 860px, image slots 700px) */
[hidden] { display: none !important; }
.dc-mobile { display: none !important; }
@media (max-width: 859.98px) {
  .dc-desktop { display: none !important; }
  .dc-mobile { display: contents !important; }
}
@media (max-width: 699.98px) {
  .mod-img { display: none !important; }
}
.wa-float { bottom: 24px; }
@media (max-width: 859.98px) { .wa-float { bottom: 96px; } }
#reels::-webkit-scrollbar { display: none; }
:focus-visible { outline: 3px solid #4FB3E8; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } }

/* Live "open now" dot next to the next-cohort heading */
.live-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #2DB36A; flex: none; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2DB36A; animation: live-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes live-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
.live-pill.closed .live-dot { background: #9AA9B8; }
.live-pill.closed .live-dot::after { display: none; }
@media (prefers-reduced-motion: reduce) { .live-dot::after { animation: none; display: none; } }

/* Hero lead form */
#heroForm input:focus { background: #FFFFFF !important; }
body.modal-open { overflow: hidden; }
#leadModal[hidden], #leadThanks[hidden] { display: none !important; }
.hf-chip { position: relative; display: block; }
.hf-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hf-chip span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 4px 6px; border-radius: 12px; border: 1.5px solid #DCEBF7; background: #FFFFFF; color: #0B2540; font-family: Rubik, sans-serif; font-weight: 700; font-size: 14px; text-align: center; transition: background-color .15s, border-color .15s, color .15s; }
.hf-chip:hover span { border-color: #4FB3E8; }
.hf-chip input:checked + span { background: #0A6FB5; border-color: #0A6FB5; color: #FFFFFF; }
.hf-chip input:focus-visible + span { outline: 3px solid #4FB3E8; outline-offset: 2px; }
#heroForm input[aria-invalid="true"] { border-color: #B42318 !important; }

/* Hero buttons: two equal blue buttons, Instagram underneath at the same size */
.hero-btns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 640px; }
.hero-btns > * { width: 100%; min-height: 64px !important; padding: 10px 18px !important; font-size: 18px !important; border-radius: 18px !important; box-sizing: border-box; text-align: center; }
@media (max-width: 699.98px) { .hero-btns { grid-template-columns: 1fr; } }

/* Booking-app card spans the full row under the workshop strip: lay it out sideways on wide screens */
@media (min-width: 860px) {
  .booking-card { display: grid !important; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto 1fr; column-gap: 32px; align-items: start; }
  .booking-card > * { grid-column: 1; }
  .booking-card > a { grid-column: 2; grid-row: 1 / span 4; align-self: center; min-width: 260px; }
}

/* ---------- Welcome screen: video background, neon sign (backup: ../backups/before-hero-video) ---------- */
.hero-dark .hv3 { background: rgba(255,255,255,.08) !important; color: #FFFFFF !important; border-color: rgba(255,255,255,.7) !important; }
.hero-dark .hv3:hover { background: rgba(255,255,255,.18) !important; color: #FFFFFF !important; }
@media (max-width: 699.98px) {
  .hero-shade { background: linear-gradient(180deg, rgba(8,24,44,.78) 0%, rgba(8,24,44,.9) 100%) !important; }
}
.neon-sign {
  /* tight glow only, so the letters stay crisp */
  filter: brightness(2) contrast(1.3) saturate(1.1) drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(139,220,238,.85)) drop-shadow(0 0 14px rgba(79,179,232,.45));
  animation: neon-on 1.6s steps(1, end) .3s both, neon-hum 3.2s ease-in-out 2s infinite alternate;
}
@keyframes neon-on {
  0%   { opacity: .1; }
  12%  { opacity: 1; }
  16%  { opacity: .25; }
  28%  { opacity: 1; }
  33%  { opacity: .4; }
  45%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes neon-hum {
  from { filter: brightness(2) contrast(1.3) saturate(1.1) drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(139,220,238,.85)) drop-shadow(0 0 14px rgba(79,179,232,.45)); }
  to   { filter: brightness(2.15) contrast(1.3) saturate(1.1) drop-shadow(0 0 1px rgba(255,255,255,1)) drop-shadow(0 0 7px rgba(139,220,238,1)) drop-shadow(0 0 20px rgba(79,179,232,.6)); }
}
@media (prefers-reduced-motion: reduce) {
  .neon-sign { animation: none; }
}

/* Team: on desktop the intro + "2 for 1" sit beside the two teacher cards, filling the row */
@media (min-width: 960px) {
  .team-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
  .team-intro > [data-fade]:last-child { margin-bottom: 0 !important; }
  .team-cards { max-width: none !important; grid-template-columns: 1fr 1fr !important; }
}

/* Phones: compact welcome screen that fits one screen, glowing sign beside the heading */
@media (max-width: 699.98px) {
  .hero-dark .hero-grid { grid-template-columns: minmax(0, 1fr) 100px !important; column-gap: 12px !important; row-gap: 14px !important; padding-top: 18px !important; padding-bottom: 58px !important; align-items: center !important; }
  .hero-dark .hero-text { display: contents !important; }
  .hero-dark .hero-text > :first-child { grid-column: 1 / -1; grid-row: 1; }
  .hero-dark .hero-text > h1 { grid-column: 1; grid-row: 2; font-size: 27px !important; line-height: 1.12 !important; }
  .hero-dark .hero-logo { grid-column: 2; grid-row: 2; width: 100px !important; margin: 0 !important; }
  .hero-dark .hero-text > p { grid-column: 1 / -1; grid-row: 3; font-size: 15.5px !important; line-height: 1.5 !important; }
  .hero-dark .hero-text > div:last-child { grid-column: 1 / -1; grid-row: 4; margin-top: 0 !important; gap: 10px !important; }
  .hero-dark .hero-btns { gap: 8px !important; }
  .hero-dark .hero-btns > * { min-height: 50px !important; font-size: 16px !important; }
}

/* Before/after: 2 x 2 on wider screens so the photos stay big */
@media (min-width: 700px) { .ba-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; } }

/* Phones: the course video moves under the list so the lessons get the full width */
@media (max-width: 699.98px) {
  .course-row { flex-direction: column !important; align-items: stretch !important; }
  .course-video { position: static !important; flex: none !important; width: min(100%, 300px); align-self: center; }
}