/* ═══ THE CELTIC CROSS — page styles (2026-09-16). Everything scoped to #ccPanel or .cc-page. ═══ */
/* the ten lines */
#ccPanel .cc-lines { list-style: none; margin: 0 auto 1.6rem; padding: 0; max-width: 760px; counter-reset: cc; }
#ccPanel .cc-lines li { counter-increment: cc; display: grid; grid-template-columns: 2.2rem 9.5rem 1fr; gap: .4rem .9rem; align-items: baseline; padding: .7rem .4rem; border-bottom: 1px solid rgba(184,145,80,.35); }
#ccPanel .cc-lines li::before { content: counter(cc, upper-roman); font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: .8rem; color: #B89150; }
/* the frame is the dark aubergine stage background (#2A1428) all the way down — every colour below is the cream/gold register, never the dark-ink parchment colours */
#ccPanel .cc-line-pos { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #D4AC68; }
#ccPanel .cc-line-card { display: block; font-family: 'EB Garamond', serif; font-weight: 700; font-size: 1.12rem; color: #F5E6D2; }
#ccPanel .cc-lines .cc-line-body { display: block; }
#ccPanel .cc-line-body { font-family: 'EB Garamond', serif; font-size: 1.08rem; line-height: 1.5; color: rgba(245,230,210,.9); }
#ccPanel .cc-summary { max-width: 62ch; margin: 0 auto 2rem; text-align: center; }
#ccPanel .cc-summary-title { font-family: 'Italianno', cursive; font-weight: 400; font-size: 2.6rem; line-height: 1; color: #8E6E3A; margin: .6rem 0 .4rem; }
#ccPanel .cc-summary-p { font-family: 'EB Garamond', serif; font-size: 1.2rem; line-height: 1.6; color: #F5E6D2; margin: 0; }
/* phones: the ten cards with loops (hidden on desktop, where the stage shows them) */
#ccPanel .cc-phone-cards { display: none; }
@media (max-width: 900px) {
  #ccPanel.is-revealed .cc-phone-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem .8rem; max-width: 520px; margin: 0 auto 2rem; }
  #ccPanel .cc-phone-card { text-align: center; }
  #ccPanel .cc-phone-card .cc-line-pos { display: block; margin-bottom: .35rem; }
  #ccPanel .cc-phone-card .vc-art-wrap { position: relative; border: 1px solid #B89150; box-shadow: 0 10px 26px -14px rgba(45,31,56,.8); }
  #ccPanel .cc-phone-card img { display: block; width: 100%; height: auto; }
  #ccPanel .cc-phone-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #ccPanel .cc-phone-card video:not([src]) { display: none; }
  #ccPanel .cc-phone-card .cc-line-card { margin-top: .4rem; font-size: 1rem; }
  #ccPanel .cc-lines li { grid-template-columns: 1.6rem 1fr; }
  #ccPanel .cc-lines .cc-line-body { grid-column: 2; }
}
/* the full reading */
#ccPanel .cc-reading-wrap { max-width: 760px; margin: 0 auto 2rem; }
#ccPanel .cc-reading-status { text-align: center; font-family: 'EB Garamond', serif; font-style: italic; font-size: 1.05rem; color: #D4AC68; min-height: 1.4em; margin: .6rem 0 1rem; }
#ccPanel .cc-reading-status.is-live::after { content: ''; display: inline-block; width: .5em; height: .5em; margin-left: .4em; border-radius: 50%; background: #D4AC68; animation: ccPulse 1.2s ease-in-out infinite; }
@keyframes ccPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
#ccPanel .cc-reading { font-family: 'EB Garamond', serif; font-size: 1.18rem; line-height: 1.65; color: #F5E6D2; }
#ccPanel .cc-reading .cc-head { text-align: center; margin: 0 0 1.4rem; }
#ccPanel .cc-reading .cc-head-title { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: #D4AC68; }
#ccPanel .cc-reading .cc-head-for { font-family: 'EB Garamond', serif; font-weight: 600; font-size: 1.1rem; color: #F0D89A; margin-top: .35rem; }
#ccPanel .cc-reading .cc-head-q { font-family: 'EB Garamond', serif; font-style: italic; font-size: 1.3rem; line-height: 1.35; color: #F5E6D2; margin-top: .4rem; }
#ccPanel .cc-reading .cc-cards { display: none; } /* the stage above IS the cross; the stills are for My Readings + the PDF */
#ccPanel .cc-reading h2 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 1.35rem; line-height: 1.25; color: #F0D89A; margin: 2rem 0 .7rem; text-align: center; }
#ccPanel .cc-reading h2::after { content: '❦'; display: block; font-size: 1rem; color: #D4AC68; margin-top: .35rem; }
#ccPanel .cc-reading p { margin: 0 0 1rem; }
#ccPanel .cc-reading em { color: #F0D89A; }
#ccPanel .cc-reading .cc-plate { margin: 0 0 1.4rem; padding: 1rem 1.2rem; border: 1px solid rgba(212,172,104,.45); background: rgba(212,172,104,.10); }
#ccPanel .cc-reading .cc-plate-title { font-size: 1rem; margin: 0 0 .6rem; }
#ccPanel .cc-reading .cc-plate-title::after { display: none; }
#ccPanel .cc-reading .cc-plate-list { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.4rem; font-size: 1.1rem; color: #F5E6D2; }
#ccPanel .cc-reading .cc-plate-pos { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #D4AC68; margin-right: .4rem; }
/* follow-ups */
#ccPanel .cc-ask { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(212,172,104,.45); }
#ccPanel .cc-ask-title { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 1.1rem; color: #F0D89A; margin: 0 0 .2rem; text-align: center; }
#ccPanel .cc-ask-sub { text-align: center; font-family: 'EB Garamond', serif; font-style: italic; color: #D4AC68; margin: 0 0 1rem; }
#ccPanel .cc-ask-list { list-style: none; margin: 0 0 1rem; padding: 0; }
#ccPanel .cc-ask-list li { margin: 0 0 1.1rem; }
#ccPanel .cc-ask-q { font-family: 'EB Garamond', serif; font-weight: 700; font-style: italic; color: #F5E6D2; margin: 0 0 .3rem; }
#ccPanel .cc-ask-a { color: rgba(245,230,210,.9); }
#ccPanel .cc-ask-a p { margin: 0 0 .6rem; }
#ccPanel .cc-ask-form { display: grid; gap: .7rem; }
#ccPanel .cc-ask-form .tc3-question-input { width: 100%; }
#ccPanel .cc-ask-form[hidden] { display: none; }
#ccPanel .cc-again-wrap { text-align: center; margin: 1.5rem 0 .5rem; }
/* "Lay a new cross" sits on the dark frame — the shared .btn-see is wine-on-vellum and vanished there (Michael 9/16): cream + gold */
#ccPanel .cc-again-wrap .btn-see { color: #F5E6D2; border-color: rgba(212,172,104,.75); background: rgba(212,172,104,.10); box-shadow: 0 0 24px rgba(212,172,104,.12); }
#ccPanel .cc-again-wrap .btn-see .btn-see-icon { color: #D4AC68; }
#ccPanel .cc-again-wrap .btn-see:hover, #ccPanel .cc-again-wrap .btn-see:focus-visible { color: #2D1F38; background: #D4AC68; border-color: #D4AC68; }
#ccPanel .cc-again-wrap .btn-see:hover .btn-see-icon { color: #2D1F38; }
/* the question is REQUIRED (Michael 9/16): the badge says so, Shuffle waits, a note under the box explains */
#ccPanel.has-stage .tc3-question-wrap::before { content: 'Your question · required'; }
#ccPanel.has-stage .cc-question-note { display: none; }
#ccPanel .cc-question-note { margin: .55rem 0 0; text-align: center; font-family: 'EB Garamond', serif; font-style: italic; font-size: 1.02rem; color: #D4AC68; transition: opacity .3s ease; }
#ccPanel.has-question .cc-question-note { opacity: 0; }
#ccPanel:not(.has-stage) .cc-question-note { color: #8E6E3A; }
#ccPanel.has-stage .tstage-shuffle:disabled, #ccPanel.has-stage .tstage-shuffle[aria-disabled="true"] { opacity: .5; cursor: not-allowed; filter: saturate(.6); }
#ccPanel.has-stage .tstage-shuffle:disabled:hover { transform: translateX(-50%); }
/* ── THE HERO MEDALLIONS (Michael 9/16: animated, and better) ───────────────────────────────────────────
   Left, the cross lays itself: six cards drop in one beat apart in laying order, hold, breathe out, lay again (12 s).
   Right, the staff: a spark climbs the hairline and lights each card bottom → top, the outcome flaring last (8 s).
   Reduced motion: both stand finished. */
.cc-page .cc-medallion svg { width: 100%; height: 100%; overflow: visible; }
.cc-page .cc-medallion .cc-med-card, .cc-page .cc-medallion .cc-med-scard { transform-box: fill-box; transform-origin: center; }
.cc-page .cc-medallion--cross .cc-med-card { opacity: 0; animation: ccMedLay 12s cubic-bezier(.2,.8,.2,1) infinite; }
.cc-page .cc-medallion--cross .cc-med-c1 { animation-delay: 0s; }
.cc-page .cc-medallion--cross .cc-med-c2 { animation-delay: .9s; }
.cc-page .cc-medallion--cross .cc-med-c3 { animation-delay: 1.8s; }
.cc-page .cc-medallion--cross .cc-med-c4 { animation-delay: 2.7s; }
.cc-page .cc-medallion--cross .cc-med-c5 { animation-delay: 3.6s; }
.cc-page .cc-medallion--cross .cc-med-c6 { animation-delay: 4.5s; }
@keyframes ccMedLay {
  0%        { opacity: 0; transform: translateY(-9px) scale(1.25); filter: drop-shadow(0 0 0 rgba(212,172,104,0)); }
  6%        { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 0 3px rgba(212,172,104,.75)); }
  10%, 72%  { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 1px 1px rgba(20,8,16,.35)); }
  80%, 100% { opacity: 0; transform: translateY(0) scale(.92); filter: drop-shadow(0 0 0 rgba(212,172,104,0)); }
}
.cc-page .cc-medallion--cross .cc-med-glow { opacity: 0; animation: ccMedGlow 12s ease-in-out infinite; }
@keyframes ccMedGlow { 0%, 38% { opacity: 0; } 50%, 68% { opacity: 1; } 80%, 100% { opacity: 0; } }
.cc-page .cc-medallion--staff .cc-med-lit, .cc-page .cc-medallion--staff .cc-med-pip { opacity: .25; animation: ccMedLight 8s ease-in-out infinite; }
.cc-page .cc-medallion--staff .cc-med-s1 .cc-med-lit, .cc-page .cc-medallion--staff .cc-med-s1 .cc-med-pip { animation-delay: .8s; }
.cc-page .cc-medallion--staff .cc-med-s2 .cc-med-lit, .cc-page .cc-medallion--staff .cc-med-s2 .cc-med-pip { animation-delay: 1.7s; }
.cc-page .cc-medallion--staff .cc-med-s3 .cc-med-lit, .cc-page .cc-medallion--staff .cc-med-s3 .cc-med-pip { animation-delay: 2.6s; }
.cc-page .cc-medallion--staff .cc-med-s4 .cc-med-lit, .cc-page .cc-medallion--staff .cc-med-s4 .cc-med-pip { animation-delay: 3.5s; }
@keyframes ccMedLight { 0% { opacity: .25; } 6%, 70% { opacity: 1; } 84%, 100% { opacity: .25; } }
.cc-page .cc-medallion--staff .cc-med-s4 { animation: ccMedFlare 8s ease-in-out infinite; }
@keyframes ccMedFlare { 0%, 42% { filter: drop-shadow(0 0 0 rgba(212,172,104,0)); transform: scale(1); } 48%, 68% { filter: drop-shadow(0 0 4px rgba(212,172,104,.9)); transform: scale(1.12); } 84%, 100% { filter: drop-shadow(0 0 0 rgba(212,172,104,0)); transform: scale(1); } }
.cc-page .cc-medallion--staff .cc-med-staff-lit { stroke-dasharray: 48; stroke-dashoffset: 48; opacity: .9; animation: ccMedStaff 8s ease-in-out infinite; }
@keyframes ccMedStaff { 0%, 8% { stroke-dashoffset: 48; opacity: .9; } 46%, 70% { stroke-dashoffset: 0; opacity: .9; } 84%, 100% { stroke-dashoffset: 0; opacity: 0; } }
.cc-page .cc-medallion--staff .cc-med-spark { animation: ccMedSpark 8s ease-in-out infinite; }
@keyframes ccMedSpark { 0%, 8% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 46% { transform: translateY(-48px); opacity: 1; } 56%, 100% { transform: translateY(-48px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cc-page .cc-medallion--cross .cc-med-card, .cc-page .cc-medallion--cross .cc-med-glow, .cc-page .cc-medallion--staff .cc-med-lit, .cc-page .cc-medallion--staff .cc-med-pip,
  .cc-page .cc-medallion--staff .cc-med-s4, .cc-page .cc-medallion--staff .cc-med-staff-lit, .cc-page .cc-medallion--staff .cc-med-spark { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .cc-page .cc-medallion--staff .cc-med-spark { opacity: 0; }
}
/* screen-reader-only text (labels, live-region status lines) */
#ccPanel .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
/* the honeypot field (bots only — never shown) */
#ccPanel .cc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* THE OFFER — the sealed-letter register (positioning lives in tarot-stage.css) */
#ccPanel .cc-offer-inner { position: relative; padding: 1.5rem 1.8rem 1.4rem; background: linear-gradient(180deg, #FDF5E3, #F5E7CB); border: 1px solid #B89150; border-radius: 4px; box-shadow: 0 30px 70px -22px rgba(0,0,0,.75), inset 0 0 0 4px rgba(253,245,227,.7), inset 0 0 0 5px rgba(184,145,80,.45), 0 0 60px rgba(212,172,104,.25); text-align: center; }
#ccPanel .cc-offer-title { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.25; color: #2D1F38; margin: .35rem 0 .5rem; }
#ccPanel .cc-offer-title em { font-family: 'Italianno', cursive; font-style: normal; font-weight: 400; font-size: 1.7em; color: #6B1F2C; line-height: .8; }
#ccPanel .cc-offer-deck { font-family: 'EB Garamond', serif; font-size: 1.08rem; line-height: 1.5; color: #4A3556; margin: 0 auto .95rem; max-width: 46ch; }
#ccPanel .cc-offer-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem 1.2rem; }
#ccPanel .cc-offer-cta { display: inline-flex; align-items: center; gap: .55rem; }
#ccPanel .cc-offer-price { font-variant-numeric: tabular-nums; }
#ccPanel .cc-offer-later { background: none; border: 0; cursor: pointer; font-family: 'EB Garamond', serif; font-style: italic; font-size: 1rem; color: #8E6E3A; text-decoration: underline; text-decoration-color: rgba(184,145,80,.6); text-underline-offset: 3px; }
#ccPanel .cc-offer-note { margin: .7rem 0 0; font-family: 'EB Garamond', serif; font-style: italic; font-size: .95rem; color: #6B1F2C; min-height: 1.2em; }
/* the slim gold bar under the band after "Not now" */
#ccPanel .cc-offer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.4rem; margin: 0 auto 1.4rem; padding: .7rem 1.2rem; max-width: 720px; border: 1px solid #B89150; background: linear-gradient(180deg, #F0D89A, #D4AC68); color: #3A1F38; box-shadow: 0 8px 22px -12px rgba(212,172,104,.9); }
#ccPanel .cc-offer-bar[hidden] { display: none; }
#ccPanel .cc-offer-bar-text { font-family: 'EB Garamond', serif; font-style: italic; font-size: 1.05rem; }
#ccPanel .cc-offer-bar-btn { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #F6EAD0; background: linear-gradient(180deg, #6B1F2C 0%, #4A1620 100%); border: 0; padding: .6rem 1.1rem; cursor: pointer; }
@media (max-width: 700px) {
  #ccPanel .cc-offer-inner { padding: 1.1rem 1rem 1rem; }
}

/* ── SEE IT BEFORE YOU BUY — four real pages from a sample cross (Michael 9/16; the Matrix page's pattern) ── */
.cc-page .cc-sample { padding: 3.2rem 0 1.6rem; }
.cc-page .cc-sample-head { text-align: center; margin-bottom: 1.6rem; }
.cc-page .cc-sample-title { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing: .04em; color: #6B1F2C; line-height: 1.2; }
.cc-page .cc-sample-script { font-family: 'Italianno', cursive; font-size: clamp(1.7rem, 3.4vw, 2.3rem); line-height: 1.1; color: #8E6E3A; margin-top: .15rem; }
.cc-page .cc-sample-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.cc-page .cc-sample-fig { display: block; text-decoration: none; background: #FBF3DC; border: 1px solid #B89150; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 22px rgba(74,22,32,.14); transition: transform .15s ease, box-shadow .15s ease; }
.cc-page .cc-sample-fig:hover, .cc-page .cc-sample-fig:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(74,22,32,.22); outline: none; }
.cc-page .cc-sample-fig:focus-visible { box-shadow: 0 0 0 3px rgba(184,145,80,.6), 0 12px 30px rgba(74,22,32,.22); }
.cc-page .cc-sample-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
.cc-page .cc-sample-cap { display: block; padding: .6rem .7rem .7rem; font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 1.05rem; line-height: 1.3; color: #6B1F2C; text-align: center; }
.cc-page .cc-sample-pages { text-align: center; margin: 1.8rem auto 0; }
.cc-page .cc-sample-pages-n { display: block; font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.1; letter-spacing: .04em; color: #6B1F2C; }
.cc-page .cc-sample-pages-sub { display: block; margin: .5rem auto 0; max-width: 46ch; font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 1.2rem; line-height: 1.45; color: #75592A; }
.cc-page .cc-sample-note { font-family: 'EB Garamond', Georgia, serif; font-size: 1.2rem; line-height: 1.6; color: #4A3B52; text-align: center; max-width: 62ch; margin: 1.4rem auto 0; }
.cc-page .cc-sample-how { font-family: 'EB Garamond', Georgia, serif; font-weight: 600; font-size: 1.15rem; line-height: 1.5; color: #6B1F2C; text-align: center; max-width: 56ch; margin: .8rem auto 0; }
@media (max-width: 760px) { .cc-page .cc-sample-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; } .cc-page .cc-sample { padding-top: 2.4rem; } .cc-page .cc-sample-cap { font-size: .92rem; line-height: 1.25; padding: .5rem .5rem .6rem; } .cc-page .cc-sample-pages-n { font-size: 1.7rem; } .cc-page .cc-sample-pages-sub, .cc-page .cc-sample-note, .cc-page .cc-sample-how { font-size: 1.05rem; } }
/* the lightbox: the page image at full size, scrollable, with the caption pinned below */
body.cc-lb-open { overflow: hidden; }
.cc-page .cc-lb { position: fixed; inset: 0; z-index: 100001; /* above the sticky site header, which intercepted the close button on phones */ background: rgba(20, 8, 16, .92); opacity: 0; transition: opacity .2s ease; display: flex; align-items: center; justify-content: center; padding: 3.2rem .6rem 2.2rem; }
.cc-page .cc-lb[hidden] { display: none; }
.cc-page .cc-lb.is-on { opacity: 1; }
.cc-page .cc-lb-fig { margin: 0; display: flex; flex-direction: column; width: min(96vw, 820px); height: calc(100vh - 5.4rem); overflow: hidden; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); background: #FBF3DC; }
.cc-page .cc-lb-img-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: #FBF3DC; }
.cc-page .cc-lb-img-wrap img { display: block; width: 100%; height: auto; }
.cc-page .cc-lb-fig figcaption { flex: 0 0 auto; padding: .55rem .9rem; background: rgba(251,243,220,.96); border-top: 1px solid #B89150; font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 1.05rem; color: #6B1F2C; text-align: center; }
.cc-page .cc-lb-x { position: absolute; top: .55rem; right: .7rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid #B89150; background: #FBF3DC; color: #6B1F2C; font-size: 1.9rem; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }
.cc-page .cc-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 3.4rem; border: 1px solid #B89150; background: rgba(251,243,220,.92); color: #6B1F2C; font-size: 2.2rem; line-height: 1; cursor: pointer; z-index: 2; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.cc-page .cc-lb-prev { left: .6rem; }
.cc-page .cc-lb-next { right: .6rem; }
.cc-page .cc-lb-dots { position: absolute; bottom: .7rem; left: 0; right: 0; display: flex; justify-content: center; gap: .45rem; }
.cc-page .cc-lb-dot { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(251,243,220,.35); }
.cc-page .cc-lb-dot.is-on { background: #D4AC68; }
@media (max-width: 640px) {
  .cc-page .cc-lb { padding: 3rem .4rem 2rem; }
  .cc-page .cc-lb-nav { width: 2.1rem; height: 2.8rem; font-size: 1.8rem; opacity: .85; }
  .cc-page .cc-lb-prev { left: .3rem; }
  .cc-page .cc-lb-next { right: .3rem; }
  .cc-page .cc-lb-fig { height: calc(100vh - 5rem); width: 98vw; }
}

/* the members' page: the month's ten readings as slots (the Chart Vault's wax dots, regilt for the dark hero) — 2026-09-16 */
.cc-slots { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: .9rem auto 0; }
.cc-slots-dots { display: flex; gap: 6px; }
.cc-slots-dot { width: 13px; height: 13px; border-radius: 50%; background: rgba(184,145,80,.12); border: 1px solid rgba(142,110,58,.55); box-shadow: inset 0 1px 2px rgba(45,31,56,.1); }
.cc-slots-dot.is-filled { background: linear-gradient(180deg, #E9CD92, #D4AC68); border-color: #8E6E3A; box-shadow: 0 0 8px rgba(212,172,104,.55); }
.cc-slots-count { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #6B1F2C; }
@media (max-width: 640px) { .cc-slots { gap: 8px; } .cc-slots-dot { width: 11px; height: 11px; } .cc-slots-count { font-size: .66rem; letter-spacing: .1em; } }