:root{
  --white:#FFFFFF; --alabaster:#F5F4F0; --cream:#FCF5EC; --warm-grey:#D6D3CA;
  --ink:#0E0E0E; --muted:#6E6A62; --peach:#FFAE84; --pale-peach:#FDE0CC; --burgundy:#5A272A;
  --display:"Cormorant Garamond",Georgia,serif; --body:"Manrope",system-ui,sans-serif;
  --label:"Jost",system-ui,sans-serif; --script:"Pinyon Script",cursive; --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
/* overflow-x MUST be `clip`, never `hidden`. `hidden` makes the browser compute
   overflow-y:auto, which turns  into a scroll container — and every
   position:sticky descendant then sticks to body's scrollport, which never scrolls
   (the documentElement is what scrolls). That silently killed the sticky filter bar
   AND mc-chrome's global `.a-nav{position:sticky}`. `clip` gives the same
   horizontal-overflow protection without creating a scroll box. */
body{background:var(--white);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;}
.elementor-section{padding:0 !important;}
.elementor-widget-html>.elementor-widget-container{padding:0 !important;margin:0 !important;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 44px;}
.serif{font-family:var(--display);font-weight:300;line-height:1.05;letter-spacing:.004em;}
a{color:inherit;text-decoration:none;}
.peach-rule{width:64px;height:2px;background:var(--peach);}

/* NAV */
/* mc-chrome.php forces `.a-nav{position:sticky !important}` sitewide, but the body
   overflow bug above meant it never actually stuck — so 7/29 added the separate fixed
   `.mc-sticky` peach bar as the real on-scroll nav. Now that sticky works again, leaving
   .a-nav sticky would pin an 89px cream nav *behind* the 70px peach one: two stacked
   headers. .mc-sticky wins (it's the deliberate sitewide design), so .a-nav goes static —
   which is exactly how the page already behaves today. Needs !important + later source
   order to beat mc-chrome's own !important. */
.a-nav{background:var(--cream);border-bottom:1px solid var(--warm-grey);position:static !important;z-index:20;}
.a-nav nav{display:flex;align-items:center;justify-content:space-between;height:88px;}
.a-nav .brand-lockup{display:flex;align-items:center;}
.a-nav .brand-mark{height:48px;width:auto;}
.a-nav .menu{display:flex;gap:22px;align-items:center;}
.a-nav .menu a{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:12px;color:var(--ink);transition:color .2s ease;}
.a-nav .menu a:hover{color:var(--burgundy);}
.a-nav .menu a.active{color:var(--burgundy);text-decoration:underline;text-decoration-color:var(--peach);text-decoration-thickness:2px;text-underline-offset:7px;}
.a-nav .menu .pill{background:var(--burgundy);color:#fff;padding:12px 22px;text-decoration:none;border-radius:6px;}
.a-nav .menu .pill:hover{background:#41191d;color:#fff;}

/* HERO */
.cl-hero{background:var(--cream);text-align:center;padding:74px 0 46px;position:relative;overflow:hidden;}
.cl-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;background:url(/wp-content/uploads/brand/mc-monogram-black.svg) no-repeat center 46%;background-size:min(40%,460px);}
.cl-hero .wrap{position:relative;z-index:1;}
.cl-hero .eyebrow{font-family:var(--label);text-transform:uppercase;letter-spacing:.28em;font-size:14px;font-weight:600;color:var(--burgundy);margin-bottom:18px;}
.cl-hero h1{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,5.4vw,4rem);color:var(--ink);line-height:1.02;}
.cl-hero .peach-rule{margin:22px auto 20px;}
.cl-hero p{max-width:54ch;margin:0 auto;color:#4a463f;font-size:18px;}
/* link across to the season calendar — term dates, closures, performance weeks */
.cl-hero .cal-link{margin-top:24px;}
.cl-hero .cal-link a{display:inline-block;font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:11.5px;color:var(--burgundy);border-bottom:1px solid var(--peach);padding-bottom:5px;transition:color .2s ease,border-color .2s ease;}
.cl-hero .cal-link a:hover{color:var(--ink);border-color:var(--burgundy);}

/* FILTER BAR + CLASS-PACK PROMO — one sticky unit.
   Both bands travel together under the fixed .mc-sticky nav (70px, z-60). ONE wrapper,
   not two sibling stickies with different `top` values: siblings overlap on iOS Safari
   the moment their heights change (e.g. the filter labels wrapping). z-55 keeps the
   whole unit under the nav so the nav always wins if they ever meet. */
:root{--mc-navh:70px;}
.cl-stickwrap{position:sticky;top:var(--mc-navh);z-index:55;}
.cl-filters{background:var(--pale-peach);border-bottom:1px solid rgba(90,39,42,.14);}
.cl-filters .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 34px;padding-top:18px;padding-bottom:18px;}
.cl-fgroup{display:flex;flex-direction:column;align-items:flex-start;gap:9px;}
.cl-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.cl-flabel{font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--muted);}
.cl-chip{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--ink);background:transparent;border:1px solid var(--warm-grey);border-radius:40px;padding:8px 16px;cursor:pointer;transition:all .2s ease;}
.cl-chip:hover,.cl-chip:focus{background:rgba(255,255,255,.55);border-color:var(--burgundy);color:var(--burgundy);}
.cl-chip.active{background:var(--burgundy);border-color:var(--burgundy);color:#fff;}
.cl-select{font-family:var(--label);text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--ink);background:#fff;border:1px solid var(--warm-grey);border-radius:40px;padding:9px 34px 9px 16px;cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A272A' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;}
.cl-select:hover{border-color:var(--burgundy);}
.cl-reset{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px;margin-left:auto;margin-bottom:11px;}
.cl-reset:hover{color:var(--burgundy);}

/* Class-pack promo. Sits in the slot the flexible-scheduling banner held until Robin asked for
   that banner to come out (2026-08-24), and deliberately reuses its proven geometry: a burgundy
   band under the peach filter bar on phones so the two read as separate bars, merged into one
   peach row on desktop so the sticky unit stays short.
   The CTA went straight to the Momence checkout for the 10-Class Package on 2026-08-24 (Dan). It
   pointed at #packs first, on the reasoning that there are two packs and the reader should pick;
   the strip now names ONE pack and its price, so sending that reader to a chooser was an extra
   step between a stated offer and buying it. The yoga series still has its own strip in #packs,
   and the utility-bar slide still links to /classes/#packs, so nothing loses its route.
   External link, so target=_blank + rel=noopener + an aria-label that says what it buys. */
.cl-packad{background:var(--burgundy);border-bottom:1px solid rgba(0,0,0,.18);}
/* nowrap: the copy and the Buy Now button share ONE line at every width. With flex-wrap:wrap
   the button dropped to a second line as soon as the copy got long enough (it did the moment the
   strip started naming the pack and its price), which both broke the row and grew the sticky
   unit's height. The text takes the shrink instead — hence min-width:0, without which a flex
   item refuses to shrink below its content and pushes the button out anyway. */
.cl-packad .wrap{display:flex;align-items:center;justify-content:flex-start;gap:12px 24px;padding-top:14px;padding-bottom:14px;flex-wrap:nowrap;}
/* margin:0 is load-bearing. The theme puts a bottom margin on <p>, and align-items:center
   centers the MARGIN box — so the visible text sits above the button's center line. The
   mockup's `*{margin:0}` reset loses to the theme's more specific p selector. */
/* Two stacked lines: the offer (bold) over its terms, both flush left. Costs no extra bar
   height — two lines at 1.3 come to ~40px, still inside the Buy Now button's ~43px, so the
   sticky unit measures the same as it did with a single line. text-align:left is explicit
   because the desktop rule right-ALIGNS the promo block as a whole against the page grid;
   without it the two lines would centre themselves against each other's ragged ends. */
.cl-packtext{margin:0;min-width:0;text-align:left;color:#F3DED3;font-size:15.5px;line-height:1.3;}
.cl-packtext strong,.cl-packtext span{display:block;}
.cl-packtext strong{color:#fff;font-weight:600;}
/* .cl-packcode (chip treatment for a discount code) lived here. Removed 2026-08-24: the TAKE10
   code came out of this bar the same day it went in — per Dan it does not apply to enough of the
   catalog to be advertised as a blanket offer, and a code that fails at checkout costs more trust
   than the discount buys. The strip now states the pack's own terms, which are always true. */
.cl-packcta{flex:none;font-family:var(--label);text-transform:uppercase;letter-spacing:.18em;font-size:11px;background:var(--peach);color:var(--burgundy);border:1px solid var(--peach);border-radius:6px;padding:12px 22px;cursor:pointer;transition:background .2s ease,transform .2s ease,color .2s ease;}
.cl-packcta:hover,.cl-packcta:focus{background:#FFC7A8;border-color:#FFC7A8;color:var(--burgundy);transform:translateX(2px);}
.cl-packcta:focus-visible{outline:2px solid #fff;outline-offset:2px;}
/* Anchor target for the promo. Offset clears BOTH the sticky nav and the sticky filter bar,
   which together sit on top of whatever the jump lands on. */
#packs{scroll-margin-top:calc(var(--mc-navh) + 96px);}

/* Desktop: one row — filters left, pack promo right. The filters are sized to their CONTENT
   (flex:0 0 auto + nowrap) rather than given a fixed 40% as the old banner split did; that
   fixed column is exactly what forced the two selects to stack on top of each other. The promo
   takes whatever is left and right-aligns to the page grid, so the filters keep the content's
   left edge and the CTA keeps its right. Bar height matters — it pins under the 70px nav, and
   every pixel it costs is a pixel of class cards the visitor can't see. */
@media(min-width:981px){
  .cl-stickwrap{display:flex;align-items:stretch;}
  .cl-filters{flex:0 0 auto;min-width:0;display:flex;align-items:center;}
  .cl-filters .wrap{max-width:none;margin:0;width:auto;flex-wrap:nowrap;padding:12px 28px 12px max(44px,calc((100vw - var(--wrap))/2 + 44px));}
  .cl-packad{flex:1 1 auto;min-width:0;display:flex;align-items:center;}
  .cl-packad .wrap{max-width:none;margin:0;width:100%;justify-content:flex-end;padding:10px max(44px,calc((100vw - var(--wrap))/2 + 44px)) 10px 0;}
  /* Desktop reads as ONE peach band: the promo half goes peach, its text flips burgundy to
     stand out, and the CTA + code chip invert. Phones keep the burgundy band, where the
     contrast comes from the band itself. */
  .cl-packad{background:var(--pale-peach);border-bottom:1px solid rgba(90,39,42,.14);}
  .cl-packtext{color:var(--burgundy);}
  .cl-packtext strong{color:#41191d;}
  .cl-packcta{background:var(--burgundy);border-color:var(--burgundy);color:#fff;}
  .cl-packcta:hover,.cl-packcta:focus{background:#41191d;border-color:#41191d;color:#fff;}
  .cl-packcta:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px;}
}

/* SECTIONS */
.cl-sec{padding:56px 0 8px;}
.cl-sec .sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:30px;flex-wrap:wrap;}
.cl-sec .sec-head h2{font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,3vw,2.4rem);color:var(--ink);}
.cl-sec .sec-head .sec-sub{color:var(--muted);font-size:15px;}
.cl-secnote{margin:-16px 0 28px;font-size:14px;color:#57534b;max-width:66ch;line-height:1.5;}
.cl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* 10-CLASS PACK — offer strip under the adult drop-in grid. Momence-hosted checkout;
   price/details are hand-maintained here (the public feed has no memberships endpoint). */
/* Width/alignment mirrors the schedule rows: .mcm-sch is 820px and LEFT-aligned
   (plugin CSS zeroes its auto margins), so the pack must be too or the edges drift. */
.cl-pack{max-width:820px;margin:24px 0 0;background:var(--cream);border:1px solid var(--warm-grey);border-left:4px solid var(--burgundy);border-radius:12px;padding:24px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
/* .cl-pack.pk-lead lived here: the 10-class strip led the schedule from 2026-08-15 and needed a
   bottom gap that .cl-pack (margin-bottom:0, only ever used trailing a grid) does not ship.
   Robin moved both packs BELOW the schedule on 2026-08-24, so they trail a grid again and the
   default margins are correct. Rule removed with the class. */
.cl-pack .pk-body{flex:1 1 340px;}
.cl-pack .pk-name{font-family:var(--display);font-weight:500;font-size:1.35rem;color:var(--ink);line-height:1.15;}
.cl-pack .pk-name b{color:var(--burgundy);font-weight:500;}
.cl-pack .pk-sub{margin-top:6px;font-size:14px;line-height:1.55;color:#57534b;}

/* CLASS CARD */
.cl-card{background:#fff;border:1px solid var(--warm-grey);border-radius:3px;padding:26px 26px 24px;display:flex;flex-direction:column;min-height:250px;transition:transform .2s ease,box-shadow .2s ease;}
.cl-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(90,39,42,.10);}
.cl-card .cl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:10px;}
.cl-badge{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--burgundy);background:var(--pale-peach);padding:5px 11px;border-radius:40px;white-space:nowrap;}
.cl-spots{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:#3f7a4f;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.cl-spots .dot{width:6px;height:6px;border-radius:50%;background:#3f7a4f;}
.cl-spots.low{color:#9a5a12;} .cl-spots.low .dot{background:#c07f1e;}
.cl-spots.full{color:#6E6A62;} .cl-spots.full .dot{background:#9a3b3b;}
.cl-spots.info{color:var(--muted);} .cl-spots.info .dot{background:var(--peach);}
.cl-name{font-family:var(--display);font-weight:500;font-size:1.42rem;color:var(--ink);line-height:1.1;margin-bottom:6px;}
.cl-sched{font-size:13.5px;color:#57534b;margin-bottom:14px;}
.cl-cardesc{font-size:14px;line-height:1.55;color:#57534b;margin-bottom:18px;flex-grow:1;}
.cl-teacher{display:flex;align-items:center;gap:9px;margin-top:auto;margin-bottom:18px;}
.cl-teacher img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;}
.cl-teacher .mono{width:34px;height:34px;border-radius:50%;background:var(--pale-peach);display:flex;align-items:center;justify-content:center;flex:none;}
.cl-teacher .mono img{width:20px;height:20px;border-radius:0;opacity:.55;}
.cl-teacher span{font-family:var(--display);font-weight:500;font-size:14px;color:#3a352f;}
.cl-enroll{align-self:flex-start;font-family:var(--label);text-transform:uppercase;letter-spacing:.2em;font-size:11px;background:var(--burgundy);color:#fff;padding:12px 22px;border-radius:6px;transition:background .2s ease,transform .2s ease;}
.cl-enroll:hover{background:#41191d;color:#fff;transform:translateX(2px);}
.cl-enroll.ghost{background:transparent;color:var(--burgundy);border:1px solid var(--burgundy);}
.cl-enroll.ghost:hover{background:var(--burgundy);color:#fff;}

.cl-noresults{display:none;text-align:center;padding:70px 0;color:var(--muted);font-family:var(--display);font-style:italic;font-size:1.4rem;}
.cl-sec.empty{display:none;}

/* footer */
footer{position:relative;overflow:hidden;background:var(--burgundy);color:#e4cfc4;padding:60px 0 40px;margin-top:60px;}
.foot-mono{position:absolute;top:50%;right:-4%;transform:translateY(-50%);width:min(46%,560px);pointer-events:none;z-index:0;opacity:.07;}
.foot-mono img{width:100%;filter:invert(1);}
footer .wrap{position:relative;z-index:1;}
footer .top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;}
footer .fbrand{font-family:var(--display);font-size:22px;letter-spacing:.18em;text-transform:uppercase;color:#fff;}
footer .fbrand small{display:block;font-family:var(--label);font-size:9px;letter-spacing:.36em;color:#c9a99b;margin-top:4px;}
footer .fmenu{display:flex;gap:32px;flex-wrap:wrap;}
footer .fmenu a{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:#e4cfc4;}
footer .fmenu a:hover{color:var(--peach);}
footer .rule{height:1px;background:rgba(255,174,132,.25);margin:38px 0 18px;}
footer .fine{font-family:var(--label);text-transform:uppercase;letter-spacing:.22em;font-size:10px;color:#b58f80;}

@media(max-width:980px){ .cl-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .cl-grid{grid-template-columns:1fr;} .wrap{padding:0 24px;} .a-nav .menu a:not(.pill){display:none;} .cl-reset{margin-left:0;} }

/* Phones: the sticky unit sits under a 70px nav, so every pixel it costs is a pixel of
   classes the visitor can't see. Drop the "Age"/"Class Type" labels (the <select>s say
   "Any Age"/"All Types" already), put the two selects on one row, and collapse the pack
   promo to a single line. */
@media(max-width:640px){
  .cl-filters .wrap{gap:8px;padding-top:10px;padding-bottom:10px;}
  .cl-fgroup{flex:1 1 0;min-width:0;gap:0;}
  .cl-flabel{display:none;}
  .cl-controls,.cl-select{width:100%;}
  .cl-select{padding:9px 30px 9px 13px;font-size:10.5px;letter-spacing:.06em;}
  .cl-packad .wrap{gap:10px 14px;padding-top:10px;padding-bottom:10px;}
  .cl-packtext{font-size:13px;line-height:1.35;}
  /* Bolder on phones: at 10px uppercase the button competes with the copy for attention,
     and the copy was winning. 600 is a real loaded Jost weight, not a synthesised faux-bold. */
  .cl-packcta{padding:10px 14px;font-size:10px;letter-spacing:.1em;font-weight:600;}
}
/* Very narrow: trim the promo rather than let the button clip. */
@media(max-width:400px){
  .cl-packtext{font-size:12px;}
  .cl-packcta{padding:10px 12px;letter-spacing:.06em;}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto;}}
/* ===== 8pt-grid section rhythm — standardized site-wide ===== */
:root{--section-y:80px;}
@media(max-width:980px){:root{--section-y:64px;}}
@media(max-width:767px){:root{--section-y:48px;}}
.cl-sec{padding:var(--section-y) 0;}
/* ============================================================================
   mc-classes components
   Everything above this line is the /classes/ design system as it already
   existed, extracted from the page it used to live inside. Below are only the
   components the sign-up-type redesign introduces. Same tokens, same scale —
   a reader should not be able to find the seam.
   ============================================================================ */

:root{
  /* RADII — specs/2026-06-30-design-tokens.md s5, "sharp / editorial".
     0 is the DEFAULT, 4px is the MAX and spent sparingly, a pill only where
     something is genuinely pill-shaped. There is no stadium radius in this
     brand; a 40px button is a soft app idiom and reads as another product.
     50% remains legal for a true circle (avatar, status dot). */
  --radius-none:0;
  --radius-sm:2px;
  --radius-md:4px;
  --radius-pill:999px;
  --hairline:#EFEDE7;
}

/* ---- Shared button -------------------------------------------------------
   Scoped under .mcc on purpose. Hello Elementor's reset.css loads AFTER this
   file and styles `[type="button"], [type="submit"], button` at the same
   specificity as a bare `.mcc-btn`, so the theme's pink outline won on every
   <button> in the private panel (Dan, 2026-09-23). One extra class beats it. */
.mcc .mcc-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 20px; border:1px solid var(--burgundy);
  border-radius:var(--radius-md);
  background:var(--burgundy); color:#fff; text-decoration:none; cursor:pointer;
  font-family:var(--label); font-size:11px; text-transform:uppercase; letter-spacing:.16em;
  white-space:nowrap; transition:background .2s ease;
}
.mcc .mcc-btn{transform:translateY(0);}
.mcc .mcc-btn:hover{background:#41191d; color:#fff; transform:translateY(-1px);}
.mcc .mcc-btn.ghost{background:transparent; color:var(--burgundy);}
.mcc .mcc-btn.ghost:hover{background:var(--burgundy); color:#fff;}
.mcc .mcc-btn.off{background:var(--warm-grey); border-color:var(--warm-grey); color:#4a4740;}
.mcc-btn-wide{width:100%; margin-top:20px;}
.mcc-btn-lg{margin-top:22px;}

.mcc a:focus-visible,.mcc button:focus-visible,.mcc select:focus-visible,
.mcc input:focus-visible,.mcc textarea:focus-visible{
  outline:2px solid var(--burgundy); outline-offset:3px;
}

/* ---- Tabs: the sign-up type ---------------------------------------------
   Three equal thirds. The sublabel is not decoration — "Semester" means
   nothing to a parent who has never enrolled a child in dance, and the tab is
   the only place that explanation fits without costing a click. */
.mcc-tabs{
  background:var(--pale-peach); margin:0 0 4px;
  border-top:1px solid rgba(90,39,42,.08); border-bottom:1px solid rgba(90,39,42,.08);
  /* top clears the fixed .mc-sticky nav (70px, z-60). At top:0 the tab bar
     pinned directly BEHIND it, so the sign-up switcher vanished on scroll. */
  position:sticky; top:var(--mc-navh); z-index:40;
}
.mcc-tabs-inner{display:grid; grid-template-columns:repeat(3,1fr);}
.mcc-tab{
  background:none; border:0; cursor:pointer; padding:13px 8px; min-height:62px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font:inherit; color:var(--ink); border-right:1px solid rgba(90,39,42,.09);
}
.mcc-tab:last-child{border-right:0;}
.mcc-tab-l{
  font-family:var(--label); font-size:11px; text-transform:uppercase; letter-spacing:.13em;
  line-height:1.2; text-align:center;
}
.mcc-tab-s{font-size:10.5px; line-height:1.3; color:#6b6459; text-align:center; text-wrap:balance;}
.mcc-tab[aria-selected="true"]{background:var(--burgundy);}
.mcc-tab[aria-selected="true"] .mcc-tab-l{color:#fff;}
.mcc-tab[aria-selected="true"] .mcc-tab-s{color:rgba(255,255,255,.72);}

.mcc-panel[hidden]{display:none;}
/* THE PAGE GRID. The template is full-bleed (<main> with no container), so the
   tab band above runs edge to edge on purpose — but everything that is content
   has to sit on the same 1240px column as the rest of the site, with the same
   gutters as .wrap. Without this the class rows ran from the viewport's left
   edge to its right, and the last Book button sat under the chat widget. */
.mcc-panel,.mcc-stale,.mcc-unavailable{
  max-width:var(--wrap); margin-left:auto; margin-right:auto;
  padding-left:24px; padding-right:24px;
}
.mcc-panel{padding-top:20px; padding-bottom:34px;}
.mcc-stale{margin-top:14px;}
@media(min-width:641px){
  .mcc-panel,.mcc-stale,.mcc-unavailable{padding-left:44px; padding-right:44px;}
}
.mcc-phead{margin-bottom:14px;}
/* Sign In on the heading row (2.15.6): heading left, button right, centred on the row.
   The look is the active "All classes" chip (peach fill, burgundy edge) in the small-button
   type of .mcc-btn, a notch smaller. Burgundy #5A272A on peach #FFAE84 is 6.6:1 (AA);
   hover/focus flip to burgundy fill with white text (11.9:1). */
.mcc-phead{display:flex; align-items:center; justify-content:space-between; gap:10px 20px;}
.mcc-phead-t{min-width:0;}
.mcc .mcc-signin-btn{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:38px; padding:0 16px; border:1px solid var(--burgundy); border-radius:var(--radius-md);
  background:var(--peach); color:var(--burgundy); text-decoration:none; cursor:pointer;
  font-family:var(--label); font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:.16em;
  line-height:1; white-space:nowrap; transition:background .2s ease,color .2s ease;
}
.mcc .mcc-signin-btn:hover,.mcc .mcc-signin-btn:focus-visible{background:var(--burgundy); color:#fff;}
.mcc .mcc-signin-btn:focus-visible{outline:2px solid var(--burgundy); outline-offset:3px;}
/* "Returning customer?" + the button: one group, right-aligned and centred on the row.
   If the pair cannot share a line, flex-wrap puts the text above the button. */
.mcc-signin{flex:0 1 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 12px;}
.mcc .mcc-signin-q{margin-left:0;}
@media(max-width:640px){
  .mcc-phead{flex-direction:column; align-items:flex-start;}
  .mcc-signin{justify-content:flex-start;}
}
.mcc-phead h2{font-family:var(--display); font-size:1.3rem; font-weight:400; margin:0; display:inline;}
.mcc-sub{font-size:12px; color:var(--muted); margin-left:8px;}
.mcc-step{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.15em; font-size:10.5px;
  color:var(--muted); margin:30px 0 14px;
}
.mcc-hint{font-size:12.5px; color:var(--muted); margin:9px 0 0; max-width:60ch;}
.mcc-note{
  font-family:var(--label); font-size:10.5px; line-height:1.6; letter-spacing:.03em;
  color:var(--muted); margin:22px 0 0; padding-top:16px; border-top:1px solid var(--hairline);
}
.mcc-stale{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.12em; font-size:10.5px;
  color:#9a5a12; margin:0 0 14px;
}
.mcc-unavailable{color:var(--muted);}
.mcc-empty{padding:34px 0; text-align:center; color:var(--muted); font-size:14px;}
.mcc-tbc{font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);}

/* ---- Day header + strip -------------------------------------------------
   The strip fills the width of whatever it is in: on a phone that is the
   device, on a desktop the content column. It is never a centred island, and
   it never scrolls sideways — a week you must swipe to see Saturday is a week
   you cannot plan against. */
.mcc-ds-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 0 12px;
}
.mcc-ds-date{font-family:var(--display); font-size:1.2rem; line-height:1.15;}

/* ---- Class-name chips (2.7.2) --------------------------------------------
   Dan, 2026-09-24: one tap per class name, several at once, peach when on --
   the toggles the portal's Customers list uses, under the tab heading and
   above the calendar. They wrap rather than scroll sideways, for the same
   reason the week never did. `.mcc`-prefixed to outrank the theme's button
   reset, like every other button on this page (2.5.1, 2.6.2). */
.mcc-chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px;}
.mcc-chips[hidden]{display:none;}
.mcc .mcc-chip{
  min-height:40px; padding:0 16px; border-radius:8px; cursor:pointer;
  background:transparent; border:1px solid transparent; box-shadow:none;
  font-family:var(--body); font-size:15px; font-weight:500; line-height:1;
  letter-spacing:0; text-transform:none; color:var(--ink); white-space:nowrap;
}
.mcc .mcc-chip:hover{background:var(--pale-peach); color:var(--ink);}
.mcc .mcc-chip[aria-pressed="true"],
.mcc .mcc-chip[aria-pressed="true"]:hover{background:var(--peach); border-color:var(--burgundy); color:var(--ink);}
.mcc .mcc-chip:focus-visible{outline:2px solid var(--burgundy); outline-offset:2px;}

/* Seven cards, not seven words under a rule. This is the shape the live site
   has always used (mc-momence's .mcm-sch-day) and it is the shape that makes a
   day look tappable: the old strip was text with a 2px underline on the active
   one, which on a phone reads as a caption rather than a control. Same tokens,
   same geometry -- 8px gutters, a 10px radius, a serif numeral -- so the two
   halves of this page stop looking like they came from different sites. */
.mcc-ds-strip{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px; width:100%;
  margin-bottom:22px;
}
.mcc-ds-day-btn{
  background:#fff; border:1px solid var(--warm-grey); border-radius:10px;
  padding:11px 4px 12px; cursor:pointer; min-height:62px;
  display:flex; flex-direction:column; align-items:center;
  font:inherit; color:var(--muted); text-align:center;
  transition:background .18s ease, border-color .18s ease;
}
.mcc-ds-dow{
  font-family:var(--label); font-size:10px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:4px;
}
.mcc-ds-num{font-family:var(--display); font-weight:400; font-size:1.5rem; color:var(--ink); line-height:1;}

/* The dot is why the strip is worth looking at: it says which days have
   anything on them before you tap one. Always in the DOM, faded to 0 on a
   blank day, so the seven cards keep identical heights. */
.mcc-ds-dot{
  width:5px; height:5px; border-radius:50%; background:var(--peach);
  margin:6px auto 0; opacity:0;
}
.mcc-ds-day-btn.has .mcc-ds-dot{opacity:1;}
/* Dimmed, NOT disabled. An empty day is still a tab; its panel says in words
   that nothing runs, which beats a dead button that appears broken. */
.mcc-ds-day-btn.empty{opacity:.42; background:transparent;}
.mcc-ds-day-btn:not(.on):hover{background:#fff; border-color:var(--peach); opacity:1;}
.mcc-ds-day-btn.on{background:var(--burgundy); border-color:var(--burgundy); opacity:1;}
.mcc-ds-day-btn.on .mcc-ds-dow{color:var(--pale-peach);}
.mcc-ds-day-btn.on .mcc-ds-num{color:#fff;}
.mcc-ds-day-btn.on .mcc-ds-dot{background:var(--pale-peach);}

/* Per-day headings exist for the no-JS case. Once JS narrows to one day the
   shared header above the strip does that job, so these come out. */
.mcc-ds-dayhead{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.15em; font-size:10.5px;
  color:var(--burgundy); margin:22px 0 4px;
}
.mcc-js .mcc-ds-dayhead{display:none;}

/* ---- Class row ----------------------------------------------------------
   One grid, two shapes. Phone: avatar left, the rest stacked beside it.
   Wide: five aligned columns, so times sit under times and every Book button
   lands on the same edge. Rows are NEVER placed side by side — a day's
   schedule is one list read top to bottom. */
/* Cards with a peach spine, matching the live schedule. A row used to be a
   hairline-separated band of text on the page background; against a cream page
   that reads as one long paragraph, and the eye has nothing to land on. The
   4px left accent is the load-bearing part -- it starts each row at a fixed
   point and gives the list a rhythm no border-bottom can. */
.mcc-rows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.mcc-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "name act"
    "time act"
    "body act"
    "cap  act";
  gap:2px 12px; align-items:start;
  background:#fff; border:1px solid #eceae4; border-left:4px solid var(--peach);
  border-radius:12px; padding:17px 19px;
  box-shadow:0 8px 20px rgba(90,39,42,.05);
}
/* display:none, not flex -- .mcc-rows is a flex parent now, and a `hidden` row
   left at display:flex would keep its 12px gap and open a hole in the list. */
.mcc-row[hidden]{display:none;}
.mcc-name{grid-area:name;} .mcc-time{grid-area:time;} .mcc-body{grid-area:body;}
.mcc-cap{grid-area:cap;} .mcc-act{grid-area:act;}

.mcc-time{font-family:var(--label); font-size:12.5px; letter-spacing:.02em; color:var(--ink);}
.mcc-body{min-width:0;}
/* The name leads the row and the time sits under it (2026-09-24). */
.mcc-name{font-family:var(--display); font-size:1.3rem; font-weight:400; line-height:1.2; margin:0 0 4px;}
.mcc-meta{font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:2px;}
/* A segment of a class ("Level C · Technique", 2.8.0): part of the name, a
   step quieter, so three rows of one class read as one class's day. */
.mcc-seg{color:var(--muted); white-space:nowrap;}
.mcc-rowprice{font-family:var(--display); font-size:1.12rem; color:var(--burgundy); margin-top:5px; line-height:1.1;}
/* Descriptions from the feed. 66ch keeps a long one readable on a wide screen
   instead of one sentence stretched across the whole middle column. */
.mcc-rowdesc,.mcc-pg-desc{font-size:13.5px; line-height:1.6; color:#57534b; max-width:66ch;}
.mcc-rowdesc{margin-top:8px;}
.mcc-rowdesc p,.mcc-pg-desc p{margin:0 0 .6em;}
.mcc-rowdesc p:last-child,.mcc-pg-desc p:last-child{margin-bottom:0;}
.mcc-cap{font-family:var(--label); font-size:10px; letter-spacing:.08em; color:var(--muted); padding-top:3px;}
.mcc-act{display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-start; gap:6px;}
/* "or use 1 credit": the class-pack door under Book. Burgundy on white clears
   4.5:1; underlined so it reads as a link, not a label. 44px tall for a thumb. */
.mcc-credit-link{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--label); font-size:11px; letter-spacing:.06em; color:var(--burgundy);
  text-decoration:underline; text-underline-offset:3px; white-space:nowrap;
}
.mcc-pack-expiry{white-space:nowrap;}

/* ---- Semester programs --------------------------------------------------
   One program, many day options. "Fairytale Ballet" is read once — ages 3-4,
   $320, Fall 2026 — then the parent picks a day underneath.
   EACH PROGRAM IS A CARD (2026-09-22, Dan). It started as an unboxed header
   with a rule, which stretched across the full 1240px column: name at the far
   left, price at the far right, day rows spanning the gap. Nothing read as
   belonging to anything. A card holds a program together and gets two up on a
   wide screen. */
.mcc-band{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:34px 0 18px;}
.mcc-band:first-of-type{margin-top:6px;}
.mcc-bandname{font-family:var(--display); font-size:1.36rem; font-weight:400; margin:0;}
.mcc-bandsub{
  font-family:var(--label); font-size:10.5px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted);
}

.mcc-pglist{display:grid; grid-template-columns:1fr; gap:16px;}
.mcc-pg{
  display:flex; flex-direction:column; margin:0;
  background:#fff; border:1px solid var(--warm-grey); border-top:3px solid var(--burgundy);
  border-radius:var(--radius-md); padding:20px 20px 8px;
  transition:box-shadow .2s ease;
}
.mcc-pg:hover{box-shadow:0 14px 34px rgba(90,39,42,.08);}
.mcc-pg[hidden]{display:none;}
.mcc-pg-head{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"title price" "facts price" "desc desc";
  gap:3px 14px; align-items:start; padding-bottom:16px;
}
.mcc-pg-title{grid-area:title; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;}
.mcc-pg-facts{grid-area:facts; font-size:12.5px; color:var(--muted);}
.mcc-pg-desc{grid-area:desc; margin-top:10px;}
.mcc-pg-price{
  grid-area:price; text-align:right; white-space:nowrap;
  font-family:var(--label); font-size:15px; color:var(--burgundy);
}
.mcc-pg-name{font-family:var(--display); font-size:1.26rem; font-weight:400; line-height:1.2; margin:0;}
.mcc-gate{
  font-family:var(--label); font-size:9px; text-transform:uppercase; letter-spacing:.15em;
  color:var(--burgundy); background:var(--pale-peach); padding:4px 9px;
  border-radius:var(--radius-sm); white-space:nowrap;
}

/* margin-top:auto pins the day options to the card's foot, so side-by-side
   cards with different-length descriptions still line their buttons up. */
.mcc-pg-opts{list-style:none; margin:auto 0 0; padding:0; border-top:1px solid var(--warm-grey);}
.mcc-pg-opt{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"day act" "meta act" "price act";
  gap:1px 14px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--hairline);
}
.mcc-pg-opt[hidden]{display:none;}
.mcc-pg-opt:last-child{border-bottom:0;}
.mcc-pg-day{grid-area:day; font-family:var(--label); font-size:12.5px; letter-spacing:.06em; color:var(--ink);}
.mcc-pg-meta{grid-area:meta; font-size:12.5px; color:var(--muted); line-height:1.45;}
.mcc-pg-optprice{grid-area:price; font-family:var(--label); font-size:13px; color:var(--burgundy);}
.mcc-pg-optprice:empty{display:none;}
.mcc-pg-act{grid-area:act; display:flex; justify-content:flex-end;}

/* ---- Private request ---------------------------------------------------- */
.mcc-pv{display:grid; grid-template-columns:1fr; gap:26px; align-items:start;}
.mcc-pv-main{min-width:0;}
.mcc-pv-explain{
  background:#fff; border:1px solid var(--warm-grey); border-radius:var(--radius-sm);
  padding:20px 22px;
}
.mcc-pv-explain b{
  font-family:var(--label); text-transform:uppercase; letter-spacing:.15em; font-size:10px;
  color:var(--burgundy); display:block; margin-bottom:9px;
}
.mcc-pv-explain p{font-size:14px; color:#57534b; margin:0 0 .7em;}
.mcc-pv-explain p:last-child{margin-bottom:0;}
.mcc-pv-reward{
  border-left:2px solid var(--peach); padding-left:13px;
  font-size:13.5px !important; color:var(--ink) !important;
}

.mcc-pv-suggest{display:flex; flex-wrap:wrap; gap:9px;}
.mcc-hint-wide{flex:1 0 100%; max-width:none; margin-top:0;}
.mcc-chip{
  display:flex; flex-direction:column; gap:2px; align-items:flex-start;
  background:#fff; border:1px solid var(--warm-grey); border-radius:var(--radius-sm);
  padding:10px 13px; cursor:pointer; font:inherit; text-align:left; min-height:44px;
}
.mcc-chip.on{border-color:#9a5a12; background:#FFF8F0;}
.mcc-chip-day{font-family:var(--label); font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--muted);}
.mcc-chip-time{font-family:var(--label); font-size:13px; color:var(--ink);}
.mcc-chip-why{font-size:10.5px; color:var(--muted); font-style:italic;}
.mcc-chip.on .mcc-chip-day{color:#9a5a12;}

.mcc-pv-flex{
  display:flex; gap:11px; align-items:flex-start; background:#fff;
  border:1px solid var(--warm-grey); border-radius:var(--radius-sm);
  padding:14px 16px; margin:18px 0 0; cursor:pointer; font-size:13.5px;
}
.mcc-pv-flex input{margin-top:3px; accent-color:var(--burgundy); min-width:18px; min-height:18px;}
.mcc-pv-flex em{
  color:#9a5a12; font-style:normal; font-family:var(--label);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; margin-left:4px;
}

.mcc-pv-win{display:flex; gap:10px; margin-top:11px; align-items:center;}
.mcc-pv-win select{
  font-family:var(--body); font-size:13.5px; padding:11px 12px; border:1px solid var(--warm-grey);
  background:#fff; border-radius:var(--radius-sm); flex:1; min-width:0; color:var(--ink);
}
.mcc-pv-rm{
  background:none; border:1px solid var(--warm-grey); border-radius:var(--radius-sm);
  width:44px; height:44px; cursor:pointer; color:var(--muted); font-size:17px; flex:0 0 auto;
}
.mcc-pv-add{
  background:none; border:0; padding:0; margin-top:14px; cursor:pointer; min-height:44px;
  font-family:var(--label); font-size:11px; text-transform:uppercase; letter-spacing:.15em;
  color:var(--burgundy); text-decoration:underline; text-underline-offset:3px;
}

/* Filled by the script (the booking summary). Empty, it drew a blank box. */
.mcc-pv-side:empty{display:none;}
.mcc-pv-side{
  background:#fff; border:1px solid var(--warm-grey); border-radius:var(--radius-sm); padding:20px;
}
.mcc-pv-sidetitle{font-family:var(--display); font-size:1.15rem; font-weight:400; margin:0 0 14px;}
.mcc-pv-dl{display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin:0 0 16px; font-size:13px;}
.mcc-pv-dl dt{
  font-family:var(--label); font-size:9.5px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); padding-top:3px;
}
.mcc-pv-dl dd{margin:0;}
.mcc-pv-sidelabel{
  font-family:var(--label); font-size:9.5px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); margin:0 0 8px; padding-top:14px; border-top:1px solid var(--hairline);
}
.mcc-pv-sidelist{list-style:none; margin:0; padding:0; font-size:13px;}
.mcc-pv-sidelist li{padding:7px 0; border-bottom:1px solid var(--hairline);}
.mcc-pv-sidelist li:last-child{border-bottom:0;}
.mcc-pv-sidefoot{
  margin-top:15px; padding-top:14px; border-top:1px solid var(--hairline);
  font-family:var(--label); font-size:10.5px; letter-spacing:.06em;
}
.mcc-fast{color:#3f7a4f;}
.mcc-slow{color:var(--muted);}

/* ============================================================================
   ENHANCE UPWARD. Every rule above is the phone rule; these only add room.
   ~90% of this site's visitors are on a phone, so that is the base case, not
   a fallback.
   ============================================================================ */
@media(min-width:560px){
  .mcc-tab{min-height:70px; padding:15px 12px;}
  .mcc-tab-l,.mcc-tab-s{font-size:11.5px;}
  .mcc-ds-date{font-size:1.5rem;}
  .mcc-row{grid-template-columns:minmax(0,1fr) auto; gap:2px 16px; padding:19px 24px;}
  .mcc-name{font-size:1.42rem;}
  .mcc-phead h2{font-size:1.8rem;}
  .mcc-sub{font-size:13px;}
}

@media(min-width:900px){
  /* Three aligned columns: the class (name, time under it, then studio,
     teacher and description), capacity, and the button. Until 2.7.1 the time
     and an initials circle had columns of their own and squeezed the
     description into a strip a few words wide (Dan, 2026-09-24); now it runs
     the whole text column. Capacity under capacity and every Sign up button
     on one right edge, so the eye can still run down a single column. */
  .mcc-row{
    grid-template-columns:minmax(0,1fr) 132px auto;
    grid-template-areas:
      "name cap act"
      "time cap act"
      "body cap act";
    /* Top-aligned, not centred: with a description under the name a row runs to
       several lines, and centring would float capacity and the button halfway
       down the paragraph. Padding sets capacity on the class name's line. */
    align-items:start; gap:0 20px;
  }
  .mcc-time{font-size:13.5px;}
  .mcc-cap{text-align:right; padding-top:8px;}
  .mcc-act{align-items:flex-end;}

  /* Option rows keep their stacked shape inside a card: day over time/teacher,
     button on the right. The old four-column row assumed the full 1240px. */
  .mcc-pg-name{font-size:1.4rem;}
  .mcc-pg{padding:26px 28px 10px;}

  .mcc-pv{grid-template-columns:minmax(0,1fr) 320px; gap:44px;}
  .mcc-pv-side{position:sticky; top:96px;}

  /* Room to breathe under the tab band once there is room to spend. */
  .mcc-panel{padding-top:48px; padding-bottom:56px;}
  .mcc-phead{margin-bottom:24px;}
  .mcc-band{margin-top:48px;}

  .mcc-tabs-inner{max-width:720px; margin:0 auto;}
  .mcc-btn-lg{min-height:50px; padding:0 30px;}
}

@media(prefers-reduced-motion:reduce){
  .mcc *{transition:none !important; animation:none !important;}
}

/* ---- Class packs + the direct-booking fallback -------------------------- */
.mcc-packs{display:grid; grid-template-columns:1fr; gap:14px; margin-top:30px;}
.mcc-pack{
  display:grid; grid-template-columns:1fr; gap:12px; align-items:start;
  background:var(--cream); border:1px solid var(--warm-grey);
  border-left:4px solid var(--peach); border-radius:12px; padding:18px 20px;
  box-shadow:0 8px 20px rgba(90,39,42,.05);
}
.mcc-pack-badge{
  font-family:var(--label); font-size:9px; text-transform:uppercase; letter-spacing:.16em;
  color:var(--burgundy); background:var(--pale-peach); padding:4px 9px;
  border-radius:var(--radius-sm); justify-self:start;
}
.mcc-pack-name{font-family:var(--display); font-size:1.16rem; line-height:1.25;}
.mcc-pack-name b{font-weight:500;}
.mcc-pack-sub{font-size:13px; color:#57534b; line-height:1.5; margin:5px 0 0;}
.mcc-pv-direct{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--warm-grey);
}
.mcc-pv-directlabel{
  font-family:var(--label); font-size:10.5px; text-transform:uppercase; letter-spacing:.15em;
  color:var(--muted); margin:0 0 4px;
}
.mcc-pv-directlinks{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;}

/* Two cards side by side, each STACKED: badge, offer, button. The old
   one-row card (badge | copy | button) left the copy ~130px wide inside a
   half-width card, so a two-sentence offer became a nine-line column. */
@media(min-width:760px){
  .mcc-pglist{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
  .mcc-packs{grid-template-columns:repeat(2,1fr); gap:20px; margin-top:40px;}
  .mcc-pack{grid-template-rows:auto 1fr auto; gap:14px; padding:24px 26px;}
  .mcc-pack .mcc-btn{justify-self:start;}
}

/* ============================================================================
   MOBILE VERTICAL BUDGET

   Measured on staging at 387px: the first class row landed at 922px of an 841px
   screen, so a phone visitor saw NO classes without scrolling. The hero alone
   was 472px — 56% of the viewport for a headline — with 74px of top padding, a
   41.6px H1 and a 108px lede.

   Since ~90% of this site's traffic is a phone, that is the primary case and
   these are corrections, not a fallback. The lede shrinks rather than
   disappearing, so it still reaches screen readers and crawlers.
   ============================================================================ */
@media(max-width:559px){
  .a-nav .inner{padding:10px 0;}
  .brand-mark,.a-nav .brand-mark{max-height:34px;}

  .cl-hero{padding:20px 0 12px !important;}
  .cl-hero h1{font-size:1.95rem !important; line-height:1.08 !important;}
  .cl-hero .eyebrow{font-size:10px;}
  .cl-hero .peach-rule{margin:11px auto 11px !important;}
  .cl-hero p{font-size:12.5px !important; line-height:1.45 !important; margin-bottom:.5em !important;}
  .cl-hero .cal-link{font-size:11px !important;}

  /* The active tab already says "Single / Walk in, pay per class", so the panel
     heading stops competing for the fold. It stays in the DOM for the heading
     outline, just not at 1.8rem on its own line. */
  .mcc-phead{margin-bottom:10px;}
  .mcc-phead h2{font-size:1.1rem;}
  .mcc-sub{font-size:11.5px;}

  .mcc-ds-head{padding:0 0 10px;}
  .mcc-ds-date{font-size:1.12rem;}
  .mcc-panel{padding-top:14px;}
}

/* Private panel (2.16.0, Dan 2026-10-15): lessons only. The teacher
   dropdown, "Not sure who?" and the request form are gone, and their rules
   with them. The honeypot rule stays: the Semester form uses it. */
.mcc-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.mcc-pv-error{margin:12px 0 0; font-size:14px; color:#9e494e;}

/* "Book a time": the platform's open times for a teacher who publishes them
   (2026-09-23). Chips a thumb can hit, grouped by day; the chosen one goes
   burgundy like a picked teacher card. */
.mcc-pv-times{display:grid; gap:8px;}
.mcc-pv-timeslabel{font-size:14px; font-weight:600;}
.mcc-pv-timeshint{margin:0; font-size:14px; color:#57534b;}
.mcc-pv-slotday{display:grid; gap:6px; padding:8px 0; border-top:1px solid var(--hairline);}
.mcc-pv-slotday:first-child{border-top:0; padding-top:0;}
.mcc-pv-slotdate{font-size:14px; font-weight:600;}
.mcc-pv-slotrow{display:flex; flex-wrap:wrap; gap:8px;}
.mcc-pv-slot{position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--hairline); border-radius:8px; background:#fff; font-size:15px; cursor:pointer;}
.mcc-pv-slot input{position:absolute; opacity:0; pointer-events:none;}
.mcc-pv-slot.on,.mcc-pv-slot:has(input:checked){border-color:var(--burgundy); box-shadow:inset 0 0 0 1px var(--burgundy);}
.mcc-pv-slot:focus-within{outline:2px solid var(--burgundy); outline-offset:2px;}

/* Booking from the website (2.6.0, Dan 2026-09-23; lessons only since
   2.16.0, Dan 2026-10-15): lesson → time → Continue to the portal. Each row
   is a set of chips like the day picker's; the chosen one goes burgundy. */
.mcc-pv-book{margin-top:22px; padding:18px; border:1px solid var(--hairline); border-radius:8px; background:#fff; display:grid; gap:16px;}
.mcc-pv-book .mcc-pv-directlabel{margin-top:0;}
.mcc-pv-step{display:grid; gap:8px;}
.mcc-pv-steplabel{font-size:14px; font-weight:600;}
.mcc-pv-choices{display:flex; flex-wrap:wrap; gap:8px;}
.mcc-pv-choice{min-height:44px;}
.mcc-pv-choice.on{border-color:var(--burgundy); box-shadow:inset 0 0 0 1px var(--burgundy); background:#fff;}
.mcc-pv-choice:focus-visible{outline:2px solid var(--burgundy); outline-offset:2px;}
.mcc-pv-continue[aria-disabled="true"]{opacity:.55; cursor:not-allowed;}
/* display:grid beats the hidden attribute. Unseen while the whole booking
   box waited for a teacher; since 2.16.0 the box shows from the start, so
   the time step and its calendar must stay away until a lesson is picked. */
.mcc-pv-times[hidden],.mcc-pv-cal[hidden]{display:none;}
.mcc-pv-book .mcc-hint{margin:0;}

/* The date & time picker (2.6.1, Dan 2026-09-23): a month with the open days
   lit, and the picked day's times in a column beside it, the way every
   scheduling link a family has used shows it. */
.mcc-pv-cal{display:grid; grid-template-columns:1fr; gap:20px; align-items:start;}
@media (min-width:720px){ .mcc-pv-cal{grid-template-columns:minmax(0,1fr) 240px;} }
.mcc-pv-calhead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
.mcc-pv-calmonth{font-family:var(--display); font-size:1.15rem;}
.mcc-pv-calnav{background:none; border:1px solid var(--hairline); border-radius:8px; width:44px; height:44px; cursor:pointer; color:var(--burgundy); font-size:22px; line-height:1;}
.mcc-pv-calnav:disabled{opacity:.35; cursor:default;}
.mcc-pv-calgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; justify-items:center;}
.mcc-pv-caldow{font-family:var(--label); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); padding:4px 0;}
.mcc-pv-calday-btn{position:relative; width:42px; height:42px; border-radius:50%; border:1px solid transparent; background:none; font:inherit; font-size:15px; color:var(--muted); cursor:default;}
.mcc-pv-calday-btn.has{background:#fcf5ec; color:var(--burgundy); font-weight:600; cursor:pointer;}
.mcc-pv-calday-btn.has:hover{border-color:var(--burgundy);}
.mcc-pv-calday-btn.on{background:var(--burgundy); color:#fff;}
.mcc-pv-calday-btn.today::after{content:""; position:absolute; left:50%; bottom:4px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:currentColor;}
.mcc-pv-calday-btn:focus-visible{outline:2px solid var(--burgundy); outline-offset:2px;}
.mcc-pv-tz{margin:12px 0 0; font-size:12.5px; color:var(--muted);}
.mcc-pv-caldaytitle{font-family:var(--display); font-weight:400; font-size:1.1rem; margin:0 0 10px;}
.mcc-pv-calside .mcc-pv-slots{display:grid; gap:8px; max-height:420px; overflow:auto; padding-right:4px;}
.mcc-pv-calside .mcc-pv-slot{justify-content:center; border-color:var(--burgundy); color:var(--burgundy); font-weight:600; width:100%;}
.mcc-pv-calside .mcc-pv-slot.on,.mcc-pv-calside .mcc-pv-slot:has(input:checked){background:var(--burgundy); color:#fff;}

/* Scoped under .mcc like .mcc-btn (2.6.2): Hello Elementor's reset styles every
   <button> at the same specificity as a bare class and loads after this file,
   so the day cells came out as square pink boxes. One extra class beats it. */
.mcc .mcc-pv-calday-btn{position:relative; width:42px; height:42px; padding:0; border-radius:50%; border:1px solid transparent; background:none; box-shadow:none; font:inherit; font-size:15px; line-height:1; color:var(--muted); cursor:default;}
.mcc .mcc-pv-calday-btn:disabled{opacity:1; color:var(--muted); background:none; border-color:transparent;}
.mcc .mcc-pv-calday-btn.has{background:#fcf5ec; color:var(--burgundy); font-weight:600; cursor:pointer;}
.mcc .mcc-pv-calday-btn.has:hover{border-color:var(--burgundy); background:#fcf5ec;}
.mcc .mcc-pv-calday-btn.on,.mcc .mcc-pv-calday-btn.on:hover{background:var(--burgundy); border-color:var(--burgundy); color:#fff;}
.mcc .mcc-pv-calnav{width:44px; height:44px; padding:0; border-radius:8px; border:1px solid var(--hairline); background:none; box-shadow:none; color:var(--burgundy); font-size:22px; line-height:1;}
.mcc .mcc-pv-calnav:hover{background:#fcf5ec; color:var(--burgundy);}
.mcc .mcc-pv-calnav:disabled{opacity:.35; background:none;}
.mcc .mcc-pv-choice{border:1px solid var(--warm-grey); background:#fff; box-shadow:none; color:var(--ink); padding:10px 16px; line-height:1.3; display:inline-flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; white-space:normal; max-width:100%;}
/* The lesson name on its own line, its length and size under it (Dan, 2026-10-15: "looks crowded"). */
.mcc .mcc-pv-choice .mcc-chip-time{display:block; font-size:15px;}
.mcc .mcc-pv-choice .mcc-chip-day{display:block;}
.mcc .mcc-pv-choice:hover{border-color:var(--burgundy); background:#fff;}
.mcc .mcc-pv-choice.on{border-color:var(--burgundy); box-shadow:inset 0 0 0 1px var(--burgundy);}

/* Month view on the Single tab (2.7.0, Dan 2026-09-23): the calendar in the
   left third, the picked day's classes in the right two thirds. Cells and
   arrows reuse the private tab's .mcc-pv-cal* rules. The week strip stays
   in the markup for the no-JS page and hides once the month is up. */
.mcc-ds-layout{display:grid; grid-template-columns:1fr; gap:22px; align-items:start;}
@media (min-width:900px){ .mcc-ds-layout{grid-template-columns:minmax(280px,1fr) 2fr;} }
.mcc-ds-cal{background:#fff; border:1px solid var(--hairline); border-radius:8px; padding:16px;}
.mcc-ds-main{min-width:0;}
.mcc-month .mcc-ds-strip{display:none;}

/* ==========================================================================
 * SEMESTER: ASK TO JOIN (2.13.0, Dan 2026-10-07). The sign-up process, the
 * age and day pills, the program cards with "or" between their options, and
 * the "I'm interested" dialog. Mirrors the mockup Dan approved.
 * ========================================================================== */
.mcc-si-how{margin:18px 0 6px; text-align:center;}
.mcc-si-eyebrow{font-family:var(--label); text-transform:uppercase; letter-spacing:.32em; font-size:11px; font-weight:600; color:var(--burgundy);}
.mcc-si-steps{list-style:none; margin:16px auto 0; padding:0; max-width:880px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:relative;}
.mcc-si-steps::before{content:""; position:absolute; top:29px; left:16.66%; right:16.66%; border-top:1px solid var(--peach);}
.mcc-si-steps li{display:grid; justify-items:center; gap:10px; padding:0 14px; position:relative;}
.mcc-si-n{font-family:var(--display); font-style:italic; font-weight:500; font-size:38px; line-height:1; color:var(--burgundy); width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:var(--alabaster); border:1px solid var(--peach);}
.mcc-si-t{font-family:var(--display); font-size:22px; font-weight:500; line-height:1.2; color:var(--ink); text-wrap:balance; max-width:16em;}

.mcc-si-filters{display:grid; gap:10px; margin:24px 0 6px; padding:14px 16px; background:var(--white); border:1px solid var(--hairline); border-radius:4px;}
.mcc-si-frow{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.mcc-si-flabel{font-family:var(--label); text-transform:uppercase; letter-spacing:.2em; font-size:10px; color:var(--muted); min-width:3.5rem;}
.mcc .mcc-si-chip{font-family:var(--label); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--ink); background:transparent; border:1px solid var(--warm-grey); border-radius:40px; padding:8px 14px; cursor:pointer; line-height:1.2;}
.mcc .mcc-si-chip:hover{border-color:var(--burgundy);}
.mcc .mcc-si-chip[aria-pressed="true"]{background:var(--burgundy); border-color:var(--burgundy); color:var(--cream);}
.mcc-si-fbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted);}
.mcc .mcc-si-reset{font-family:var(--label); text-transform:uppercase; letter-spacing:.16em; font-size:10.5px; color:var(--muted); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
.mcc-si-reset[hidden],.mcc-si-none[hidden],.mcc-si-track[hidden],.mcc-si-pg[hidden],.mcc-si-opt[hidden],.mcc-si-or[hidden]{display:none;}
.mcc-si-none{margin:28px 0; padding:22px; text-align:center; background:var(--white); border:1px dashed var(--warm-grey); border-radius:4px; color:var(--muted);}

.mcc-si-pg{display:grid; gap:12px;}
.mcc-si-head{display:flex; gap:12px 20px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;}
.mcc-si-title{display:grid; gap:4px; min-width:0; flex:1 1 320px;}
.mcc-si-title .mcc-gate{width:fit-content;}
.mcc-si-desc{max-width:none;}
.mcc-si-choose{font-family:var(--label); text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:600; color:var(--burgundy);}
.mcc-si-opts{list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline);}
.mcc-si-opt{display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:4px 16px; align-items:baseline; padding:10px 0;}
.mcc-si-or{display:flex; align-items:center; gap:10px; font-family:var(--label); text-transform:uppercase; letter-spacing:.24em; font-size:10.5px; color:var(--muted); padding:2px 0;}
.mcc-si-or::before,.mcc-si-or::after{content:""; flex:1; border-top:1px solid var(--hairline);}
.mcc-si-day{font-family:var(--label); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--burgundy);}
.mcc-si-every{display:block; font-family:var(--body); text-transform:none; letter-spacing:0; font-weight:500; font-size:12px; color:var(--muted);}
.mcc-si-segs{display:grid; gap:2px; min-width:0; font-size:14px;}
.mcc-si-segs span{color:var(--muted);}
.mcc-si-left{font-family:var(--label); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums;}

.mcc-si-scrim{position:fixed; inset:0; background:rgba(14,14,14,.45); display:grid; place-items:center; padding:16px; z-index:9999;}
.mcc-si-scrim[hidden]{display:none;}
.mcc-si-dlg{position:relative; background:var(--white); border-radius:6px; max-width:560px; width:100%; max-height:calc(100% - 32px); overflow:auto; padding:22px; display:grid; gap:14px; text-align:left;}
.mcc .mcc-si-x{position:absolute; top:10px; right:12px; background:none; border:0; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; padding:4px;}
.mcc-si-form{display:grid; gap:14px;}
.mcc-si-dtitle{font-family:var(--display); font-weight:600; font-size:26px; margin:0; line-height:1.15; padding-right:28px;}
.mcc-si-dsub{margin:0; color:var(--muted); font-size:14px;}
.mcc-si-callout{margin:0; background:var(--cream); border:1px solid var(--pale-peach); border-radius:4px; padding:10px 12px; font-size:13.5px;}
.mcc-si-callout[hidden]{display:none;}
.mcc-si-fs{border:0; margin:0; padding:0; display:grid; gap:10px; min-width:0;}
.mcc-si-legend{font-family:var(--label); text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:600; color:var(--burgundy); padding:0; margin-bottom:6px;}
.mcc-si-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px;}
.mcc-si-f{display:grid; gap:4px; font-size:13px; font-weight:600;}
.mcc-si-f input,.mcc-si-f textarea{font:inherit; font-weight:400; border:1px solid var(--warm-grey); border-radius:4px; padding:9px 10px; background:var(--white); color:var(--ink); width:100%; box-sizing:border-box;}
/* The class choices (2.17.3): the brand's box, and the whole row is the
   target. Native blue checkboxes in rows packed to ~24px were a miss on a
   phone; each row is now a bordered label of at least 44px around its input,
   so a tap anywhere on it ticks the box. Radios ("Which one?") share it. */
.mcc-si-choices{display:grid; gap:8px;}
.mcc .mcc-si-check{display:flex; gap:12px; align-items:center; min-height:44px; box-sizing:border-box; padding:10px 14px; border:1px solid var(--warm-grey); border-radius:4px; background:var(--white); font-size:14px; font-weight:400; line-height:1.35; color:var(--ink); cursor:pointer;}
/* Hover only where there is a pointer that hovers: iOS keeps :hover on the
   last row tapped, which left an unticked row looking chosen (2.17.4). */
@media (hover:hover){ .mcc .mcc-si-check:hover{border-color:var(--burgundy);} }
.mcc .mcc-si-check:has(input:checked){border-color:var(--burgundy); background:var(--cream);}
.mcc .mcc-si-check:has(input:focus-visible){border-color:var(--burgundy);}
.mcc .mcc-si-check input{flex:none; width:20px; height:20px; margin:0; accent-color:var(--burgundy); cursor:pointer;}
.mcc .mcc-si-check input:focus-visible{outline:2px solid var(--burgundy); outline-offset:2px;}
.mcc-si-err{margin:0; color:#9b2c2c; font-size:14px;}
.mcc-si-err[hidden],.mcc-si-done[hidden],.mcc-si-form[hidden]{display:none;}
.mcc .mcc-si-send{width:100%;}
.mcc-si-done{text-align:center; display:grid; gap:10px; padding:10px 0;}
.mcc-si-done b{font-family:var(--display); font-size:28px; font-weight:600; color:var(--burgundy);}
.mcc .mcc-si-chip:focus-visible,.mcc .mcc-si-reset:focus-visible,.mcc .mcc-si-x:focus-visible{outline:2px solid var(--burgundy); outline-offset:2px;}

@media (max-width:640px){
	.mcc-si-steps{grid-template-columns:1fr; gap:18px; max-width:340px;}
	.mcc-si-steps::before{top:29px; bottom:29px; left:29px; right:auto; border-top:0; border-left:1px solid var(--peach);}
	.mcc-si-steps li{grid-template-columns:58px 1fr; justify-items:start; align-items:center; text-align:left; padding:0; gap:16px;}
	.mcc-si-opt{grid-template-columns:1fr;}
	.mcc .mcc-si-ask{width:100%;}
}

/* The older semester cards' grid areas and two-column list do not apply to
   these: one full-width card per program, its parts stacked (2.13.0). */
.mcc .mcc-si-track .mcc-pglist{grid-template-columns:1fr; gap:16px;}
.mcc .mcc-si-pg{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:20px 22px;}
.mcc .mcc-si-pg .mcc-pg-name,.mcc .mcc-si-pg .mcc-pg-facts,.mcc .mcc-si-pg .mcc-pg-desc,.mcc .mcc-si-pg .mcc-gate{grid-area:auto; margin:0;}
.mcc .mcc-si-pg .mcc-pg-desc{max-width:none; font-size:14px;}

/* 2.14.0 (Dan, 2026-10-08): two cards a row, a short description with
   "learn more", the week as one line per option, I'm interested at the foot.
   The popup carries the whole description and every class. */
@media (min-width:900px){
	.mcc .mcc-si-track .mcc-pglist{grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;}
}
.mcc .mcc-si-pg{display:flex; flex-direction:column; gap:12px;}
.mcc .mcc-si-pg .mcc-si-opt{grid-template-columns:1fr; gap:2px; padding:8px 0;}
.mcc .mcc-si-pg .mcc-si-desc p{margin:0;}
.mcc-si-foot{margin-top:auto; padding-top:4px;}
/* 2.15.2 (Dan, 2026-10-08: "robin want's to show the class schedule, not just
   the days the classes are on"): every class on the card, one line each, the
   times in their own column so the week reads down. */
.mcc .mcc-si-segs{gap:3px;}
.mcc .mcc-si-seg{display:grid; grid-template-columns:6.9em minmax(0,1fr); gap:0 10px; align-items:baseline; font-size:13.5px; line-height:1.4;}
.mcc .mcc-si-segs .mcc-si-when{font-weight:600; color:var(--burgundy); white-space:nowrap; font-variant-numeric:tabular-nums;}
.mcc .mcc-si-segs .mcc-si-what{color:inherit; min-width:0;}
.mcc .mcc-si-segs .mcc-si-tail{color:var(--muted);}
.mcc .mcc-si-segs .mcc-si-left{margin-top:4px;}
/* 2.15.2 (Dan, 2026-10-08: "change the burgundy border of the cards to MC peach"):
   the Ballet Academy cards only; the shared .mcc-pg drop-in cards keep burgundy. */
.mcc .mcc-si-pg{border-top-color:var(--peach);}
/* 2.15.1 (Dan, 2026-10-08): the semester's price on its card, under its facts;
   when its options cost different amounts, each option says its own. */
.mcc .mcc-si-pg .mcc-si-price{grid-area:auto; text-align:left; white-space:normal; margin:2px 0 0; font-size:17px;}
.mcc .mcc-si-pg .mcc-si-price span{font-family:var(--body); font-size:12.5px; color:var(--muted);}
.mcc .mcc-si-oprice{display:block; font-family:var(--label); font-size:13px; color:var(--burgundy);}
.mcc .mcc-si-iprice{font-family:var(--label); color:var(--burgundy);}
.mcc .mcc-si-more{background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--burgundy); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
.mcc .mcc-si-more:focus-visible,.mcc .mcc-si-iask:focus-visible{outline:2px solid var(--burgundy); outline-offset:2px;}
.mcc-si-idlg{max-width:680px; grid-template-columns:minmax(0,1fr);}
/* One column, top to bottom: the page's older card grid areas must not
   reach into the popup (they split it in two on staging). */
.mcc .mcc-si-idlg > *,.mcc .mcc-si-idlg .mcc-gate{grid-area:auto; grid-column:1 / -1;}
.mcc-si-ifacts{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:var(--muted);}
.mcc-si-ifacts .mcc-gate{width:fit-content;}
.mcc-si-ibody{font-size:14.5px; line-height:1.6; color:#57534b;}
.mcc-si-ibody[hidden]{display:none;}
.mcc-si-ibody p{margin:0 0 10px;}
.mcc-si-isched{display:grid; gap:6px;}
.mcc .mcc-si-iask{width:100%;}
@media (max-width:640px){
	.mcc-si-isched .mcc-si-opt{grid-template-columns:1fr;}
}
/* "Next open" on a lesson card (2.17.0): the first day with a free time. */
.mcc-pv-nextopen{display:block; margin-top:4px; min-height:1.3em; font-size:12px; color:var(--burgundy);}
.mcc-pv-nextopen[hidden]{display:block; visibility:hidden;}