/* Sports Club OS product demos: the player's chrome, device frames and pointer.
   Colours and type are the marketing site's own (style.css :root). */

/* The feature explorer in this copy: a narrower tab column gives the demo room. */
@media (min-width: 1151px) {
  .system-layout { grid-template-columns: minmax(230px, 270px) minmax(0, 1fr); gap: 40px; }
}
/* Between tablet and laptop the tabs go above the panel (as style.css does under 900px). */
@media (min-width: 901px) and (max-width: 1150px) {
  .system-layout { grid-template-columns: 1fr; gap: 26px; }
  .feature-tabs { display: flex; overflow-x: auto; padding-top: 0; gap: 15px; }
  .feature-tabs button { white-space: nowrap; width: auto; flex-shrink: 0; padding: 12px 10px; }
  .feature-tabs button b { display: none; }
}

.has-cd .feature-tags, .has-cd .feature-note { display: none !important; }
.cd { --cd-ink: #1b1a17; --cd-muted: #7a7466; --cd-line: #d8d1bf; --cd-yellow: #f7c23b; }
.cd[hidden] { display: none; }

/* ---------- the parts row: where you are, and a way to jump ---------- */
.cd-parts { position: relative; display: grid; grid-template-columns: repeat(var(--cd-n, 4), minmax(0, 1fr)); gap: 16px; padding: 0 36px 18px; }
.cd-part { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 4px 0 0; border: 0; background: none; text-align: left; font-size: 12.5px; line-height: 1.2; color: var(--cd-muted); cursor: pointer; transition: color .2s; }
.cd-part:hover { color: var(--cd-ink); }
.cd-part[aria-current="step"] { color: var(--cd-ink); font-weight: 650; }
.cd-part:focus-visible { outline: 2px solid #936700; outline-offset: 4px; border-radius: 2px; }
/* Each label is padded like a tag, its box flush with the left of its track (the text inset inside it); the current one sits on the yellow
   pill (.cd-pill: black on #F7C23B, the logo's "OS" tag, radius in the same proportion: 12 of 46), which slides
   to the new part in 0.2 s. Other labels show a faint tag on hover. */
.cd-part-label { align-self: flex-start; max-width: 100%; padding: 3px 8px; border-radius: 6px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; transition: background-color .2s; }
/* A long label (Live Dashboards, Displays and Wallboards) takes two lines rather than being cut off; the tracks stay in
   one line under the tallest. A part may carry a short form of its label (`short`), shown on a phone in its place. */
.cd-part-label .cd-l { white-space: normal; text-wrap: balance; }
.cd-l-short { display: none; }
.cd-part .cd-track { margin-top: auto; }
.cd-part:not([aria-current]):hover .cd-part-label { background: rgba(27, 26, 23, .06); }
.cd-pill { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 6px; background: var(--cd-yellow); pointer-events: none; opacity: 0; }
.cd-pill.is-on { opacity: 1; }
.cd-pill.is-anim { transition: transform .2s cubic-bezier(.2, .7, .2, 1), width .2s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .cd-pill.is-anim { transition: none; } }
.cd-part small { font-size: 7.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8b7746; background: #e9dfc2; padding: 2px 5px; border-radius: 3px; }
.cd-track { position: relative; height: 2px; border-radius: 2px; background: var(--cd-line); overflow: hidden; }
.cd-track i { position: absolute; inset: 0; background: var(--cd-ink); transform-origin: left center; transform: scaleX(0); }
.cd-part.is-done .cd-track i { background: #a59c86; }

/* ---------- the stage ---------- */
.cd-stage { position: relative; margin: 0 36px; border-radius: 12px; overflow: hidden; aspect-ratio: 900 / 520;
  background: radial-gradient(120% 90% at 100% 100%, #f6dc8f 0, rgba(246, 220, 143, 0) 55%), linear-gradient(180deg, #f8f6f0, #f1ece0);
  box-shadow: inset 0 0 0 1px rgba(27, 26, 23, .07); }
.cd[data-mode="narrow"] .cd-stage { width: min(400px, calc(100% - 44px)); margin-left: auto; margin-right: auto; }
.cd-wait { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cd-wait i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(27, 26, 23, .15); border-top-color: #1b1a17; animation: cd-spin .8s linear infinite; }
.cd.is-waiting .cd-wait { opacity: 1; transition-delay: .4s; }
.cd.is-waiting .cd-canvas { opacity: .35; transition: opacity .3s .4s; }
@keyframes cd-spin { to { transform: rotate(360deg); } }
.cd-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.cd-instant, .cd-instant * { transition: none !important; animation: none !important; }

/* ---------- caption and controls ---------- */
.cd-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 36px 0; min-height: 56px; }
.cd-caption { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cd-caption[hidden] { display: none; }
.cd-caption.is-new { animation: cd-rise .45s cubic-bezier(.2, .7, .2, 1); }
.cd-num { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cd-yellow); font-size: 11px; font-weight: 700; color: var(--cd-ink); }
.cd-num[hidden] { display: none; }
.cd-say { margin: 0; font-size: 14px; line-height: 1.4; color: var(--cd-muted); }
.cd-say b { color: var(--cd-ink); font-weight: 650; }
.cd-steps { margin: 0; padding: 0 0 0 20px; font-size: 13px; line-height: 1.5; color: var(--cd-muted); display: grid; gap: 4px; }
.cd-steps[hidden] { display: none; }
.cd-steps b { color: var(--cd-ink); font-weight: 650; }
.cd-controls { flex: none; display: flex; align-items: center; gap: 6px; }
.cd-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 17px; background: none; font-size: 12.5px; font-weight: 600; color: var(--cd-ink); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.cd-btn[hidden] { display: none; }
.cd-btn svg { width: 14px; height: 14px; flex: none; }
.cd-play { border-color: var(--cd-line); background: rgba(255, 255, 255, .55); }
.cd-btn:hover { background: #fff; border-color: #cfc6b0; }
.cd-next { background: var(--cd-ink); color: #fff; }
.cd-next:hover { background: #33312b; border-color: transparent; }
@keyframes cd-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- device frames ---------- */
.dv { position: absolute; }
.dv-browser { background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(27, 26, 23, .09), 0 2px 4px rgba(27, 26, 23, .04), 0 22px 44px -18px rgba(60, 46, 10, .35); }
.dv-bar { position: relative; height: 30px; display: flex; align-items: center; justify-content: center; background: #f4f2ec; border-bottom: 1px solid #e6e1d5; }
.dv-dots { position: absolute; left: 12px; top: 11px; display: flex; gap: 5px; }
.dv-dots i { width: 8px; height: 8px; border-radius: 50%; background: #dcd7cb; }
.dv-url { display: flex; align-items: center; justify-content: center; gap: 6px; width: 46%; height: 19px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #e8e3d7; font: 500 9.5px/1 Geist, Arial, sans-serif; color: #6e6a60; }
.dv-url svg { width: 7px; height: 9px; color: #9a958a; }
.dv-view { position: absolute; top: 30px; left: 0; right: 0; bottom: 0; overflow: hidden; clip-path: inset(0 round 0 0 10px 10px); }


/* ---------- pointer, rings and taps ---------- */
.cd-fx { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.cd-pointer { position: absolute; z-index: 31; left: -3px; top: -2px; width: 17px; height: 21px; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 2.5px rgba(27, 26, 23, .3)); transition: opacity .3s; }
.cd-pointer.is-on { opacity: 1; }
.cd-pointer path { transform-origin: 3px 3px; transition: transform .12s ease; }
.cd-pointer.is-down path { transform: scale(.84); }
.cd-ring { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; --p: 0;
  transform: scale(calc(.35 + var(--p) * 1.05)); opacity: calc(.75 - var(--p) * .75); }
.cd-ring { border: 2px solid #f7c23b; }

/* ---------- a part that has no scene yet ---------- */
.cd-still { position: absolute; inset: 0; display: grid; place-items: center; font-family: Geist, Arial, sans-serif; }
.cd-still-card { width: 470px; padding: 34px 36px 32px; border-radius: 14px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px rgba(27, 26, 23, .07), 0 22px 44px -22px rgba(60, 46, 10, .35); }
.cd-still-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: #7a7466; }
.cd-still-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #f7c23b; box-shadow: 0 0 0 3px rgba(247, 194, 59, .25); }
.cd-still h4 { margin: 14px 0 10px; font-size: 30px; line-height: 1.1; letter-spacing: -.04em; font-weight: 600; color: #1b1a17; }
.cd-still p { margin: 0; font-size: 14px; line-height: 1.6; color: #68675f; }
.cd-still ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.cd-still li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #1b1a17; }
.cd-still li::before { content: ''; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #1b1a17 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23f7c23b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.cd-canvas[data-mode="narrow"] .cd-still-card { width: 300px; padding: 26px 24px 24px; }
.cd-canvas[data-mode="narrow"] .cd-still h4 { font-size: 25px; }

/* ---------- smaller screens ---------- */
@media (max-width: 650px) {
  /* Each part at least as wide as its own label (Renewals & Invoicing is the longest), the room left shared out. */
  .cd-parts { padding: 0 22px 14px; gap: 8px; grid-template-columns: repeat(var(--cd-n, 4), minmax(max-content, 1fr)); }
  .cd-part { font-size: 11px; gap: 6px; }
  .cd-part-label { padding: 2px 6px; border-radius: 5px; }
  .cd-pill { border-radius: 5px; }
  .cd-part small { display: none; }
  .cd-part-label:has(.cd-l-short) .cd-l { display: none; }
  .cd-l-short { display: inline; white-space: nowrap; }
  .cd-part-label .cd-l { white-space: nowrap; }
  .cd-stage { margin: 0 22px; border-radius: 10px; }
  .cd-foot { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 22px 0; }
  .cd-caption { align-items: flex-start; min-height: 42px; }
  .cd-say { font-size: 13px; }
  .cd-controls { justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .cd-caption.is-new { animation: none; }
  .cd-pointer, .cd-pointer path { transition: none; }
}

/* ---------- the panel's heading and description, when a part has its own (mount.js) ---------- */
.has-cd #feature-title, .has-cd #feature-description { transition: opacity .2s ease; }
.has-cd .cd-copy-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .has-cd #feature-title, .has-cd #feature-description { transition: none; } }