:root{
  --bg:#0b0b0c;
  --panel:#141417;
  --muted:#a9adb7;
  --text:#f1f5f9;
  --accent:#e11d48; /* red */
  --accent-2:#f59e0b; /* gold */
  --border:#23232a;
  --card:#101114;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(1200px 600px at 15% -10%, rgba(225,29,72,.12), transparent 60%),
  radial-gradient(1200px 600px at 85% -10%, rgba(245,158,11,.10), transparent 60%), var(--bg); color:var(--text);}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.5;}
h1,h2,h3{font-family:Archivo, Inter, sans-serif; letter-spacing:.5px}
a{color:var(--accent-2); text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
img{max-width:100%; height:auto}
section{scroll-margin-top:96px}
footer{scroll-margin-top:96px}

header{position:sticky; top:0; z-index:50; background:rgba(11,11,12,.8); backdrop-filter: blur(10px); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:0; min-height:80px}
.logo{display:inline-flex; align-items:center}
.logo img{
  height:64px;
  width:auto;
  display:block;
  filter:drop-shadow(0 0 12px rgba(0,0,0,.35));
}
.dot-gold{color:var(--accent-2)}
.dot-red{color:var(--accent)}
.nav ul{list-style:none; display:flex; gap:18px; margin:0; padding:0;}
.nav a{padding:10px 12px; border-radius:10px; color:var(--text)}
.nav a:hover{background:var(--panel)}
.cta-nav{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#0b0b0c !important; font-weight:700}

.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--border)}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 500px at 15% 20%, rgba(225,29,72,.20), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(245,158,11,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.68));
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.05);
}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; padding:56px 0}
.badge{display:inline-flex; align-items:center; gap:8px; background:#111218; border:1px solid var(--border); padding:6px 10px; border-radius:999px; color:var(--muted); font-size:12px}
.badge .flag-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  font-size:12px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(245,158,11,.35), rgba(245,158,11,.1) 60%, transparent 70%);
  box-shadow:0 0 0 0 rgba(245,158,11,.4);
  animation:pulse-flag 1.8s ease-in-out infinite;
}
@keyframes pulse-flag{
  0%{box-shadow:0 0 0 0 rgba(245,158,11,.45); transform:scale(1);}
  55%{box-shadow:0 0 0 12px rgba(245,158,11,0); transform:scale(1.06);}
  100%{box-shadow:0 0 0 0 rgba(245,158,11,0); transform:scale(1);}
}
.hero h1{font-size:44px; margin:14px 0}
.hero p{color:var(--muted); max-width:60ch}
.buttons{display:flex; gap:12px; margin-top:18px}
.btn{display:inline-block; border:1px solid var(--border); padding:12px 16px; border-radius:12px; font-weight:600; color:var(--text); background:var(--panel); box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#0b0b0c}
.btn[aria-disabled="true"]{
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}
/* Ensure buttons inside class cards stay high-contrast */
#classes .card .btn.primary{color:#fff}
.btn.secondary{background:#0f1014}
.hero-card{background:linear-gradient(180deg,#121318,#0d0e12); border:1px solid var(--border); border-radius:var(--radius); padding:20px}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}
.stat{background:#0e0f12; border:1px solid var(--border); border-radius:12px; padding:12px; text-align:center}
.stat .k{font-size:22px; font-weight:800}

section{padding:56px 0; border-bottom:1px solid var(--border)}
section h2{font-size:28px; margin:0 0 12px}
section p.lead{color:var(--muted); margin:0 0 20px}

.grid{display:grid; gap:16px}
/* Use minmax(0, 1fr) so wide children don't push columns off-screen */
@media (min-width: 900px){
  .grid.cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .grid.cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

/* Past Races cards: stack "Highlights" over "Results" on mobile/tablet */
@media (max-width: 1024px){
  #media .grid.cols-2{grid-template-columns:1fr}
  #media .grid.cols-2 > *{min-width:0}
}

@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.card h3{margin:0 0 8px}
.tag{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:#111218; border:1px solid var(--border); color:var(--muted)}
.tag.danger{background:rgba(225,29,72,.14); border-color:rgba(225,29,72,.55); color:#fecdd3}

/* Classes: equal-height cards + button pinned to bottom */
#classes .grid{align-items:stretch}
#classes .card{display:flex; flex-direction:column}
#classes .card > .row:last-child{
  margin-top:auto;
  width:100%;
  justify-content:center;
}

.tabs{display:flex; gap:8px; margin:10px 0 18px}
.tab{padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0f1014; cursor:pointer; color:#fff}
.tab[aria-selected="true"]{background:linear-gradient(135deg,rgba(225,29,72,.15), rgba(245,158,11,.15)); border-color:var(--accent-2)}
.tabpanel{display:none}
.tabpanel.active{display:block}

.doc-content{
  font-size:15px;
  line-height:1.65;
  word-break:break-word;
}
.doc-content h1,
.doc-content h2,
.doc-content h3,
.doc-content h4{
  margin:18px 0 10px;
}
.doc-content p{margin:10px 0; color:var(--text)}
.doc-content ul,
.doc-content ol{padding-left:18px; margin:10px 0}
.doc-content li{margin:6px 0}
.doc-content strong{font-weight:800}

table{width:100%; border-collapse:collapse;}
th,td{border-bottom:1px solid var(--border); padding:10px 8px; text-align:left}
th{color:#cbd5e1; font-weight:600; background:#101116}
tbody tr:hover{background:#0e0f13}

/* Schedule layout */
#schedule{
  --schedule-card-h:112px;
  --schedule-ticket-h:34px;
}

.schedule-item{position:relative}
.schedule-card{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#0f1014;
}
.schedule-card .meta{display:flex; gap:18px; align-items:center; min-width:0; flex:1}
.schedule-card .meta > div{min-width:0}
.pill{padding:6px 10px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted)}

/* Ticket button: full width, attached under the card */
.schedule-ticket-btn{
  width:100%;
  border-top-left-radius:0;
  border-top-right-radius:0;
  height:var(--schedule-ticket-h);
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:-1px; /* tuck into the card border */
}

/* Desktop: force equal-sized tiles and consistent button placement */
@media (min-width: 900px){
  #schedule .schedule-card{height:var(--schedule-card-h)}

  /* All tiles reserve the ticket space, even if no button */
  #schedule .schedule-item{min-height:calc(var(--schedule-card-h) + var(--schedule-ticket-h))}
  #schedule .schedule-item:not(.schedule-has-under-btn){padding-bottom:var(--schedule-ticket-h)}

  /* Keep long titles/locations from changing card height */
  #schedule .schedule-card .b700{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    overflow:hidden;
  }
  #schedule .schedule-card .muted{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

.media-grid{display:grid; gap:12px}
@media(min-width:900px){.media-grid{grid-template-columns:repeat(4,1fr)}}

/* Past Races highlights layout (video + photo gallery) */
.media-strip{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
/* Ensure gallery can shrink within grid column */
.media-strip > .thumb-gallery{flex:1 1 auto; min-width:0; max-width:100%}

/* Photo gallery strip (shows 4 thumbs per view; arrows scroll by 4) */
.thumb-gallery{
  --thumb-w: 140px;
  --thumb-gap: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:100%;
}
@media (min-width: 900px){
  .thumb-gallery{--thumb-w: 150px; --thumb-gap: 12px}
}
.gallery-nav{
  width:40px;
  height:40px;
  padding:0;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(20,20,23,.65);
  color:var(--text);
  cursor:pointer;
  display:none; /* hide arrows; gallery is swipe/scroll */
}
.gallery-nav:hover{background:rgba(20,20,23,.9)}
.gallery-nav:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.gallery-viewport{
  width:min(100%, calc(var(--thumb-w) * 4 + var(--thumb-gap) * 3));
  overflow:hidden;
  border-radius:12px;
}
.gallery-viewport{position:relative}
.gallery-track{
  display:flex;
  gap:var(--thumb-gap);
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color: rgba(245,158,11,.45) rgba(255,255,255,.06);
  padding:2px;
}
.gallery-track::-webkit-scrollbar{height:10px}
.gallery-track::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg, rgba(225,29,72,.40), rgba(245,158,11,.40));
  border-radius:999px;
  border:2px solid rgba(16,17,20,.75);
}
.gallery-track::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}
.gallery-track::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg, rgba(225,29,72,.55), rgba(245,158,11,.55));
}

/* Desktop: bigger, more premium scrollbar */
@media (min-width: 1025px){
  .gallery-track{
    scrollbar-width:auto;
    padding:4px;
  }
  .gallery-track::-webkit-scrollbar{height:14px}
  .gallery-track::-webkit-scrollbar-thumb{
    border-width:3px;
    background:linear-gradient(90deg, rgba(225,29,72,.55), rgba(245,158,11,.55));
    box-shadow:0 6px 18px rgba(0,0,0,.35);
  }
  .gallery-track::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
  }
}
.gallery-track .thumb{
  flex:0 0 var(--thumb-w);
}

/* Mobile/tablet: prevent overflow + emphasize swipe scrolling */
@media (max-width: 1024px){
  /* Stack highlights so gallery fits comfortably */
  .media-strip{
    flex-direction:column;
    align-items:stretch;
  }

  .thumb-gallery{gap:0; width:100%}
  .thumb-gallery .gallery-viewport{width:100%}

  /* Scroll hint: subtle fade on right edge */
  .thumb-gallery .gallery-viewport::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:34px;
    height:100%;
    pointer-events:none;
    background:linear-gradient(90deg, rgba(16,17,20,0), rgba(16,17,20,.95));
  }

  /* Make scroll affordance more obvious */
  .gallery-track{
    scroll-snap-type:x mandatory;
    padding-right:34px; /* keep last thumb from hiding behind fade */
    scrollbar-width:auto;
  }
  .gallery-track .thumb{scroll-snap-align:start}
  .gallery-track::-webkit-scrollbar{height:12px}
  .gallery-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
}
.thumb{
  aspect-ratio: 16/9;
  background:#13141a;
  border:1px solid var(--border);
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#6b7280;
  overflow:hidden;
  position:relative;
  padding:0;
  cursor:pointer;
  text-decoration:none;
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
}

.thumb .thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* YouTube video thumbs (keep the other placeholders untouched) */
.thumb.thumb-video{
  padding:0;
  display:block;
}
.thumb.thumb-video .thumb-img{filter:saturate(1.05) contrast(1.02)}
.thumb .thumb-badge{
  position:absolute;
  left:10px;
  bottom:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.35);
  background:rgba(0,0,0,.55);
  color:#fff;
  backdrop-filter: blur(6px);
}

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
}
.lightbox[hidden]{display:none}
.lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
}
.lightbox-dialog{
  position:relative;
  margin:24px auto;
  width:min(1100px, calc(100% - 28px));
  height:auto;
  max-height:90vh;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(11,11,12,.92);
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:48px 1fr 48px;
  grid-template-rows:auto auto;
  gap:12px;
  padding:12px;
  align-items:center;
}
.lightbox-close{
  grid-column:1 / -1;
  justify-self:end;
}
.lightbox-nav{
  align-self:center;
  height:48px;
  width:48px;
  padding:0;
}
.lightbox-figure{
  margin:0;
  display:grid;
  grid-template-rows:auto auto;
  gap:10px;
  min-height:0;
  align-items:center;
}
.lightbox-img{
  width:100%;
  height:auto;
  max-height:calc(90vh - 140px);
  object-fit:contain;
  border-radius:12px;
  background:#0b0b0c;
  border:1px solid var(--border);
}
.lightbox-figure figcaption{
  text-align:center;
}

.lightbox-meta{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.lightbox-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.lightbox-open{
  box-shadow:none;
}

/* Ticket modal (schedule "Buy Tickets") */
.ticket-modal{
  position:fixed;
  inset:0;
  z-index:9999;
}
.ticket-modal[hidden]{display:none}
.ticket-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.78);
}
.ticket-modal-dialog{
  position:relative;
  margin:24px auto;
  width:min(560px, calc(100% - 28px));
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(11,11,12,.92);
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow);
  padding:14px;
  display:grid;
  gap:12px;
}
.ticket-modal-close{
  justify-self:end;
}
.ticket-modal-actions{
  display:grid;
  gap:10px;
}
.ticket-modal-actions .btn[aria-disabled="true"]{
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}
@media (min-width: 520px){
  .ticket-modal-actions{grid-template-columns:1fr 1fr}
  .ticket-modal-actions .btn{justify-content:center; text-align:center}
}

/* Mobile: keep action button easy to hit */
@media (max-width: 720px){
  .lightbox-open{
    width:100%;
    justify-content:center;
    text-align:center;
  }
}

.product{display:flex; gap:14px}
.product .img{width:100px; height:100px; background:#13141a; border:1px solid var(--border); border-radius:10px}
.price{font-weight:700}

footer{padding:34px 0; color:var(--muted)}
.row{display:flex; gap:12px; flex-wrap:wrap}
.between{justify-content:space-between; align-items:center}
.b700{font-weight:800}
.space{height:8px}
.muted{color:#a9adb7}

/* Forms */
.form{display:grid; gap:12px}
.form-grid{display:grid; gap:12px}
@media (min-width: 720px){
  .form-grid.cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
.form label,
.field label{
  display:block;
  font-weight:700;
  margin:0 0 6px;
  color:#e5e7eb;
  letter-spacing:.2px;
}

.form input,
.form select,
.form textarea,
.field input,
.field select,
.field textarea{
  width:100%;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0f1014;
  color:var(--text);
  padding:12px 12px;
  font:inherit;
}
.form input[type="file"]{padding:10px}
.form input[type="date"]{color-scheme:dark}

.form input::file-selector-button{
  margin-right:10px;
  border:1px solid var(--border);
  background:rgba(20,20,23,.65);
  color:var(--text);
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
}
.form input::file-selector-button:hover{background:rgba(20,20,23,.9)}
.form input:focus,
.form select:focus,
.form textarea:focus,
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:2px solid rgba(245,158,11,.55);
  outline-offset:2px;
}

/* Submit row on mobile: full-width primary */
@media (max-width: 720px){
  .form .row.between{align-items:stretch}
  .form .row.between > .btn.primary{width:100%; justify-content:center; text-align:center}
}

/* Honeypot (anti-spam) */
.hp{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  display:none !important;
}

/* Points pager (Previous Years standings) */
.points-pager-controls{margin-bottom:10px}
.points-pager-controls .btn[disabled]{opacity:.55; cursor:not-allowed; pointer-events:none}
.points-note{margin:0 0 14px}

/* Points: current year TBD cards */
#points-current .standings-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:240px;
}
#points-current .standings-card::before{
  content:"";
  position:absolute;
  inset:-120px -140px auto;
  height:220px;
  background:
    radial-gradient(220px 160px at 20% 60%, rgba(225,29,72,.22), transparent 65%),
    radial-gradient(260px 190px at 70% 40%, rgba(245,158,11,.18), transparent 70%);
  pointer-events:none;
}
#points-current .standings-head{position:relative; z-index:1}
#points-current .standings-tbd-hero{position:relative; z-index:1; margin-top:6px}
#points-current .tbd-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  letter-spacing:.06em;
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(245,158,11,.55);
  background:linear-gradient(135deg, rgba(225,29,72,.18), rgba(245,158,11,.16));
  color:#fde68a;
  text-transform:uppercase;
}

#points-current .standings-skel{position:relative; z-index:1; margin-top:14px; border-top:1px solid var(--border); padding-top:12px}
#points-current .standings-skel-head{
  display:grid;
  grid-template-columns:40px 1fr 70px;
  gap:10px;
  color:#cbd5e1;
  font-weight:600;
  font-size:13px;
  opacity:.9;
}
#points-current .standings-skel-head .right{text-align:right}
#points-current .standings-skel-row{margin-top:10px}
#points-current .skel{
  display:block;
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size:240px 100%;
  animation:skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes skel-shimmer{
  0%{background-position:0 0}
  100%{background-position:240px 0}
}

#points-current .standings-actions{margin-top:auto; padding-top:12px; position:relative; z-index:1}
.points-pager-tablewrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;                 /* keep table inside the card */
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;        /* allow horizontal scroll on mobile */
}
.points-pager-tablewrap table{
  width:100%;
  min-width:100%;
  table-layout:auto;
}
.points-pager-tablewrap th,
.points-pager-tablewrap td{
  white-space:nowrap;              /* keep standings readable; scroll if needed */
  text-align:center;              /* center all columns */
  font-variant-numeric:tabular-nums;
  border-right:1px solid var(--border);
}
.points-pager-tablewrap th:last-child,
.points-pager-tablewrap td:last-child{
  border-right:none;
}
.points-pager-tablewrap thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:#101116;
}
.points-pager-tablewrap tbody tr:nth-child(odd){
  background:rgba(255,255,255,.02);
}
.points-pager-tablewrap tbody tr:hover{
  background:rgba(245,158,11,.07);
}
.points-pager-tablewrap tbody td:last-child{
  font-weight:800;
  color:var(--accent-2);
}

@media (max-width: 720px){
  .points-pager-controls{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .points-pager-controls .row{width:100%}
  .points-pager-controls .btn{padding:10px 12px}
  .points-pager-tablewrap th,
  .points-pager-tablewrap td{
    padding:8px 6px;
    font-size:13px;
  }
  /* Override global mobile table rule for this table (we already provide scrolling via wrapper). */
  .points-pager-tablewrap table{
    display:table;
    overflow:visible;
  }
}

/* Sponsors */
.sponsors{margin-top:22px}
.sponsors h3{margin:0 0 10px; font-size:14px; color:#cbd5e1}
.sponsor{
  height:34px;
  width:auto;
  opacity:.95;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}

/* A11y */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Mobile / small screens */
@media (max-width: 720px){
  .container{padding:0 16px}

  header{position:sticky}
  .nav{position:relative; min-height:auto; padding:10px 0}
  .logo img{height:54px}

  /* Hero: tiny extra inset so text/cards never feel edge-to-edge */
  .hero .container{padding:0 18px}

  section{padding:44px 0}
  section h2{font-size:24px}

  .hero-inner{grid-template-columns:1fr; gap:18px; padding:34px 0}
  .hero h1{font-size:32px}
  .buttons{flex-wrap:wrap}
  .btn{padding:11px 14px}

  .stat-row{grid-template-columns:repeat(2,1fr)}
  .stat-row .stat:nth-child(3){grid-column:1 / -1}

  .tabs{flex-wrap:wrap}
  .tab{flex:1 1 auto}

  #schedule .schedule-card{flex-direction:column; align-items:flex-start}
  #schedule .schedule-card .meta{flex-wrap:wrap; gap:10px}

  /* Prevent table overflow; allow horizontal scroll only when needed */
  table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  th,td{white-space:nowrap}

  .product{flex-direction:column}
  .product .img{width:100%; height:160px}
}

/* Mobile: collapsible sections */
@media (max-width: 720px){
  section.section-collapsible .section-collapsible-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 10px;
  }

  section.section-collapsible .section-collapsible-header h1,
  section.section-collapsible .section-collapsible-header h2,
  section.section-collapsible .section-collapsible-header h3{
    margin:0;
  }

  section.section-collapsible .section-collapsible-toggle{
    flex:0 0 auto;
    width:42px;
    height:42px;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(20,20,23,.65);
    color:var(--text);
    cursor:pointer;
    position:relative;
  }
  section.section-collapsible .section-collapsible-toggle:hover{background:rgba(20,20,23,.9)}
  section.section-collapsible .section-collapsible-toggle:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}

  /* Chevron */
  section.section-collapsible .section-collapsible-toggle::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:10px;
    height:10px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translate(-50%, -55%) rotate(45deg);
    transition:transform .18s ease;
  }

  section.section-collapsible[data-expanded="true"] .section-collapsible-toggle::before{
    transform:translate(-50%, -45%) rotate(225deg);
  }

  /* Collapse behavior */
  section.section-collapsible .section-collapsible-body{
    overflow:hidden;
  }
  section.section-collapsible[data-expanded="false"] .section-collapsible-body{
    display:none;
  }
}

/* Non-mobile: keep toggles hidden */
@media (min-width: 721px){
  section.section-collapsible .section-collapsible-toggle{display:none}
  section.section-collapsible .section-collapsible-body{display:block}
}

/* Mobile nav: hamburger + dropdown menu (desktop nav remains unchanged) */
@media (max-width: 720px){
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin-left:auto;
    border-radius:12px;
    border:1px solid var(--border);
    background:rgba(20,20,23,.65);
    color:var(--text);
    cursor:pointer;
  }
  .nav-toggle:hover{background:rgba(20,20,23,.9)}
  .nav-toggle:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
  .nav-toggle-icon{
    width:18px;
    height:2px;
    background:currentColor;
    position:relative;
    border-radius:2px;
  }
  .nav-toggle-icon::before,
  .nav-toggle-icon::after{
    content:"";
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    background:currentColor;
    border-radius:2px;
  }
  .nav-toggle-icon::before{top:-6px}
  .nav-toggle-icon::after{top:6px}

  /* Hide the horizontal list; we render as dropdown */
  .nav-menu{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    margin-top:10px;
    background:rgba(11,11,12,.92);
    backdrop-filter: blur(10px);
    border:1px solid var(--border);
    border-radius:14px;
    padding:10px;
    box-shadow:var(--shadow);
    display:none;
    max-height:calc(100vh - 110px);
    overflow:auto;
  }
  header.nav-open .nav-menu{display:block}
  .nav-menu ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin:0;
    padding:0;
  }
  .nav-menu a{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    width:100%;
    padding:12px 14px;
    border-radius:12px;
    color:var(--text);
    background:rgba(20,20,23,.55);
    border:1px solid var(--border);
  }
  .nav-menu a:hover{background:rgba(20,20,23,.9)}
  /* Keep Register CTA styling consistent with desktop */
  .nav-menu a.cta-nav{
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    color:#0b0b0c !important;
    font-weight:700;
    justify-content:center;
    border-color:transparent;
  }
  .nav-menu a.cta-nav:hover{
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
  }
}

@media (min-width: 721px){
  .nav-toggle{display:none}
}