/* OFFER PAGE only (13 Oct 2026): the done screen's app buttons as the main buttons, under the
   heading, the same height and type as the form's Continue (.actions .btn in style.css). */
.app-get{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0 24px}
.app-get .btn{height:58px;font-size:16px}

/* 16 Oct 2026, the trial pages for every studio. The timetable is view-only on the offer pages
   (Book's sign-in drawer would make the lead a GHL contact): the Book buttons go, and the row's
   last column with them. */
#dayPanel .row .btn-sm{display:none}
@media (min-width:721px){ #dayPanel .row{grid-template-columns:104px 210px minmax(0,1fr) auto} #dayPanel .row-note{padding-right:12px} }

/* HQ's page: the studio picker, the same box as every other field (no 3D control, no glow) */
.box select{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:none;padding:0 44px 0 18px;font:inherit;font-size:18px;color:var(--white);
  -webkit-appearance:none;appearance:none;cursor:pointer}
.box select option,.box select optgroup{background:var(--midblack);color:var(--white)}
.field.pick .box::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim);transform:rotate(45deg);pointer-events:none}
.field.pick .box:has(select:invalid),.field.pick select.is-empty{color:var(--dim)}
.booked .cls{margin:0 0 6px}

/* Neutral Bay's program cards open in place (16 Oct, Macca), from the redesign home's locked section
   (toronto-coming-soon/site/style.css .sq/.pd), on the locked AB cards. open.js adds them. */
.op-card{cursor:pointer}
.op-card .ux{position:relative;padding-right:84px}
.op-card .op-btn{position:absolute;right:26px;top:16px}
@media (max-width:900px){ .op-card .ux{padding-right:72px} .op-card .op-btn{right:20px;top:14px} }
.pd-no{display:none}   /* the website's own numbering (Perform 01); this page orders Move first */
.sq{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:4px;border:1px solid var(--line);background:none;color:var(--white);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.sq svg{width:14px;height:14px}
.sq-x .v{transition:opacity .2s ease}
.op-card:hover .sq,.op-btn:focus-visible,.op-card.is-on .sq{background:var(--white);border-color:var(--white);color:var(--midblack)}
.op-card.is-on .sq-x .v{opacity:0}
.op-btn:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.u-cards .pd{grid-column:1/-1;order:4;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.u-cards .pd.is-open{grid-template-rows:1fr}
.pd-in{overflow:hidden;min-height:0}
.pd-body{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px;padding:64px 0 40px;opacity:0;transition:opacity .3s ease}
.pd.is-open .pd-body{opacity:1;transition-delay:.12s}
.pd-head p{margin:0}
.pd-no{color:var(--beige);font-size:12px;text-transform:uppercase}
.pd-name{margin:14px 0 0;font-size:40px;line-height:.95;color:var(--white)}
.pd-about{margin-top:18px!important;font-size:19px;line-height:1.45;color:var(--white);padding-right:72px}
.pd-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line2)}
.pd-rows li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:20px 0;border-top:1px solid var(--line2)}
.pd-rows li .k{padding-top:4px;font-size:12px;color:var(--beige)}
.pd-rows li span:last-child{font-size:17px;line-height:1.5;color:var(--grey)}
.pd-close{position:absolute;top:64px;right:0}
.pd-close svg{width:12px;height:12px}
@media (hover:none){ .op-card:hover .sq{background:none;border-color:var(--line);color:var(--white)} .op-card.is-on .sq{background:var(--white);border-color:var(--white);color:var(--midblack)} }
@media (max-width:1024px){ .pd-body{gap:48px} }
@media (max-width:900px){
  .u-cards .pd{order:0}
  .pd-body{grid-template-columns:1fr;gap:20px;padding:28px 20px 12px}
  .pd-head .pd-no,.pd-head .pd-name{display:none}   /* on a phone the panel sits under its own card, which already names it */
  .pd-about{margin-top:0!important;padding-right:48px;font-size:17px}
  .pd-close{top:28px;right:20px}
  .pd-rows li{grid-template-columns:1fr;gap:6px}
}
/* the close button gets its own gutter: nothing runs under it (Macca, 16 Oct: "the text is kind of going over it") */
.pd-main{padding-right:64px}
.pd-close{top:64px}
@media (max-width:900px){ .pd-main{padding-right:0} .pd-close{top:28px} .pd-about{padding-right:56px} }