/* Courses page — loaded only on /courses/. Builds on the tokens, pills and hero buttons in style.css. */

.cs-section-title{font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-.8px;line-height:1.45;text-wrap:balance}

/* Hero: a compact introduction with real numbers, and one ticket per language that has open classes */
.cs-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(34px,4.4vw,62px) clamp(40px,4.8vw,70px);background:linear-gradient(178deg,var(--cream) 0%,#f8f2ea 60%,var(--paper) 100%)}
.cs-hero::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#e2d5c4 1.2px,transparent 1.2px);background-size:26px 26px;mask-image:radial-gradient(ellipse 50% 70% at 22% 50%,#000 10%,transparent 70%);opacity:.7}
.cs-hero-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,60px);align-items:center}
.cs-hero-copy{min-width:0}
.cs-eyebrow{display:inline-flex;align-items:center;gap:11px;padding:7px 17px 7px 14px;border-radius:999px;background:#ffffffcc;border:1px solid var(--line);font-size:14px;color:var(--muted)}
.cs-eyebrow .eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px #db2c271f}
.cs-hero h1{margin:18px 0 14px;font-size:clamp(33px,4vw,54px);font-weight:800;line-height:1.4;letter-spacing:-1.6px}
.cs-hero h1 span{display:block}
.cs-title-accent{color:var(--brand)}
.cs-lead{font-size:clamp(15.5px,1.2vw,17px);color:var(--muted);line-height:2.05;max-width:520px}
.cs-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cs-stats li{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.cs-stats b{display:grid;place-items:center;min-width:38px;height:38px;padding-inline:8px;border-radius:12px;background:var(--blush);color:var(--brand);font-family:var(--font-num);font-size:19px;font-weight:800;line-height:1}
.cs-stats span{font-size:14.5px;color:var(--ink-2)}
.cs-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.cs-actions .hero-cta{min-height:56px;padding:13px 26px}

.cs-stage{position:relative;min-width:0;min-height:clamp(290px,27vw,370px);display:grid;place-items:center}
.cs-ring{position:absolute;width:min(360px,86%);aspect-ratio:1;border-radius:50%;border:1.5px dashed #e3cfbf}
.cs-spark{position:absolute;top:6%;inset-inline-end:16%;width:24px;height:24px;background:var(--brand);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.cs-dot{position:absolute;border-radius:50%}
.cs-dot-1{width:14px;height:14px;bottom:12%;inset-inline-end:10%;background:var(--pink)}
.cs-dot-2{width:10px;height:10px;top:18%;inset-inline-start:10%;background:#e9c46a}
.cs-ticket{--accent:#5a5450;position:absolute;display:grid;grid-template-columns:54px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:8px;align-items:center;width:min(290px,78%);padding:14px 16px 14px 18px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 50px #22201e12,0 4px 12px #22201e08}
.cs-ticket-1{top:4%;inset-inline-start:4%;rotate:3deg;z-index:3}
.cs-ticket-2{top:36%;inset-inline-end:0;rotate:-4deg;z-index:2}
.cs-ticket-3{bottom:2%;inset-inline-start:10%;rotate:2deg;z-index:1}
.cs-ticket-mark{grid-row:1/3;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:color-mix(in srgb,var(--accent) 13%,#fff);color:var(--accent)}
.cs-ticket-mark svg{width:32px;height:32px;stroke-width:1.5}
.cs-ticket-copy{display:grid;line-height:1.5;min-width:0}
.cs-ticket-copy b{font-family:"Talkino English",sans-serif;font-size:18px;font-weight:800;color:var(--accent);text-align:start}
.cs-ticket-copy span{font-size:14px;color:var(--muted)}
.cs-ticket-count{justify-self:start;padding:3px 11px;border-radius:999px;background:var(--cream);font-size:13px;font-weight:600;color:var(--ink-2)}

@media (prefers-reduced-motion:no-preference){
  .cs-rise{animation:cs-rise .7s var(--ease) both}
  .cs-hero h1.cs-rise{animation-delay:.07s}
  .cs-lead.cs-rise{animation-delay:.14s}
  .cs-stats.cs-rise{animation-delay:.2s}
  .cs-actions.cs-rise{animation-delay:.26s}
  .cs-ticket{animation:cs-ticket-in .8s calc(.2s + var(--i) * .14s) var(--ease) both,cs-float 8s calc(1.2s + var(--i) * .9s) ease-in-out infinite}
  .cs-ring{animation:art-spin 70s linear infinite}
}
@keyframes cs-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cs-ticket-in{from{opacity:0;transform:translateY(26px) scale(.95)}to{opacity:1;transform:none}}
@keyframes cs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* List: heading, filters, results */
.cs-list{padding-block:clamp(44px,5vw,70px) clamp(50px,5.6vw,80px);scroll-margin-top:90px}
.cs-list-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 24px;margin-bottom:22px}
.cs-list-head p{font-size:15px;color:var(--muted);max-width:460px}

.cs-filters{display:grid;padding:6px clamp(16px,2.2vw,28px) 0;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px #22201e08;margin-bottom:22px}
.cs-filter{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:14px;padding-block:14px;border-bottom:1px dashed var(--line)}
.cs-filter-label{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:var(--ink-2)}
.cs-filter-label .icon{width:19px;height:19px;padding:7px;box-sizing:content-box;border-radius:11px;background:var(--cream);color:var(--brand)}
.cs-options{display:flex;flex-wrap:wrap;gap:8px}
.cs-option{position:relative;display:inline-flex}
.cs-option input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cs-option>span{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:7px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-size:14.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:background var(--fast),border-color var(--fast),color var(--fast),transform var(--fast)}
.cs-option small{display:grid;place-items:center;min-width:22px;height:22px;padding-inline:6px;border-radius:999px;background:var(--sand);font-family:var(--font-num);font-size:12.5px;font-weight:700;line-height:1;color:var(--muted)}
.cs-swatch{width:10px;height:10px;border-radius:50%;background:var(--accent,#5a5450)}
.cs-option:hover>span{border-color:#d3c4b1}
.cs-option:active>span{transform:scale(.97)}
.cs-option input:focus-visible+span{outline:3px solid var(--brand);outline-offset:3px}
.cs-option input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.cs-option input:checked+span small{background:#ffffff26;color:#fff}
.cs-option input:disabled{cursor:not-allowed}
.cs-option input:disabled+span{opacity:.42}
.cs-filters-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding-block:14px}
.cs-filters-foot p{font-size:15.5px;font-weight:700;margin-inline-end:auto}
.has-js .cs-apply{display:none}
.cs-apply{min-height:44px}
.cs-reset{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--brand);font-weight:600}
.cs-reset .icon{width:16px;height:16px}
.cs-reset:hover{text-decoration:underline;text-underline-offset:5px}

/* Course cards */
.cs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.cs-card{--accent:#5a5450;display:flex;flex-direction:column;min-width:0;border-radius:24px;background:#fff;border:1px solid var(--line);overflow:hidden;scroll-margin-top:110px;transition:border-color var(--fast),transform var(--fast),box-shadow var(--fast)}
.cs-card:hover{border-color:#d8cbb9;transform:translateY(-3px);box-shadow:0 20px 40px #22201e10}
.cs-card:target{border-color:var(--brand);box-shadow:0 0 0 3px #db2c2722}
.cs-card[hidden]{display:none}
.cs-media{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 11%,#fff);overflow:hidden}
.cs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs-media-mark{display:grid;place-items:center;width:38%;height:62%;color:var(--accent)}
.cs-media-mark svg{width:100%;height:100%;stroke-width:1.2}
.cs-lang,.cs-seats{position:absolute;top:12px;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700;line-height:1.8}
.cs-lang{inset-inline-start:12px;background:#fffffff0;color:var(--ink);box-shadow:0 4px 12px #22201e12}
.cs-seats{inset-inline-end:12px}
.cs-seats.is-open{background:#edf6f0;color:#2c6446}
.cs-seats.is-few{background:#fff4e0;color:#8a5a12}
.cs-seats.is-full{background:#f0ebe4;color:var(--muted)}
.cs-body{display:flex;flex-direction:column;gap:12px;flex:1;padding:18px 20px 20px}
.cs-tags{display:flex;flex-wrap:wrap;gap:6px}
.cs-tag{padding:2px 11px;border-radius:999px;background:var(--cream);font-size:13px;font-weight:600;color:var(--muted)}
.cs-tag.is-tier{background:color-mix(in srgb,var(--accent) 14%,#fff);color:color-mix(in srgb,var(--accent) 80%,#000)}
.cs-body h3{font-size:19px;font-weight:800;line-height:1.55}
.cs-facts{display:grid;gap:9px}
.cs-facts li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:14.5px;font-weight:600;line-height:1.75}
.cs-facts .icon{width:19px;height:19px;margin-top:3px;color:var(--soft)}
.cs-facts small{display:block;font-size:13px;font-weight:500;color:var(--soft);line-height:1.6}
.cs-cta{display:grid;gap:8px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line)}
.cs-buy{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cs-buy .pill{width:auto;min-height:48px;padding-inline:24px;flex:none}
.cs-cta>.pill{width:100%;min-height:50px}
.cs-note{font-size:13px;color:var(--soft);line-height:1.8;text-align:center}
.cs-mine{display:flex;align-items:center;justify-content:center;gap:8px;font-size:14.5px;font-weight:700;color:#2c6446}
.cs-mine .icon{width:19px;height:19px}

.cs-empty{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 22px;align-items:center;padding:24px clamp(18px,2.4vw,30px);border-radius:24px;background:#fff;border:1px dashed #d8cab8}
.cs-empty-mark{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:var(--cream);color:var(--brand)}
.cs-empty-mark .icon{width:26px;height:26px}
.cs-empty h3{font-size:18px;font-weight:800}
.cs-empty p{font-size:15px;color:var(--muted)}
.cs-empty-actions{display:flex;flex-wrap:wrap;gap:10px}
.cs-empty-actions .pill{min-height:48px}

.cs-soon{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px;padding:14px 18px;border-radius:20px;background:var(--cream)}
.cs-soon-label{padding:3px 12px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:700}
.cs-soon ul{display:flex;flex-wrap:wrap;gap:8px}
.cs-soon li{--accent:#5a5450;display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 6px;border-radius:999px;background:#fff;font-size:14.5px;font-weight:700}
.cs-soon-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--accent) 13%,#fff);color:var(--accent)}
.cs-soon-mark svg{width:19px;height:19px;stroke-width:1.6}
.cs-soon p{font-size:14.5px;color:var(--muted)}
.cs-soon a{color:var(--brand);font-weight:700}

/* Start path. Static by default: four marks joined by soft lines. courses.js may play a one-time
   hop over it — a small ball that crouches, jumps and lands on each step in turn. */
.cs-path{padding-block:clamp(50px,5.6vw,80px);background:#fff;border-block:1px solid var(--line);overflow:hidden}
.cs-path .cs-section-title,.cs-path-lead{text-align:center}
.cs-path-lead{margin-top:6px;color:var(--muted);font-size:15.5px}
.cs-route{--gap:clamp(14px,1.8vw,22px);position:relative;margin-top:clamp(34px,3.6vw,50px)}
.cs-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.cs-step{position:relative;display:grid;justify-items:center;align-content:start;gap:8px;text-align:center;padding-inline:6px}
.cs-step-copy{display:grid;justify-items:center;gap:8px;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.cs-step-line{position:absolute;top:26px;inset-inline-start:calc(50% + 40px);width:calc(100% + var(--gap) - 80px);height:4px;border-radius:4px;background:repeating-linear-gradient(90deg,#eadccd 0 7px,transparent 7px 13px);overflow:hidden}
.cs-step-line::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to left,#f3b8b3,#e8716b);transform-origin:right center;transition:transform .9s cubic-bezier(.4,0,.2,1)}
.cs-step-mark{position:relative;display:grid;place-items:center;width:56px;height:56px;margin-bottom:6px;border-radius:50%;background:#fff;border:2px solid var(--brand);color:var(--brand);font-family:var(--font-num);font-size:22px;font-weight:800;line-height:1;box-shadow:0 0 0 8px #fff;transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.cs-step-mark .icon{width:24px;height:24px;stroke-width:2.2}
.cs-step:last-child .cs-step-mark{background:var(--brand);color:#fff}
.cs-step.is-done .cs-step-mark{background:#edf6f0;border-color:#9fcdb0;color:#2c6446}
.cs-steps h3{font-size:17.5px;font-weight:800}
.cs-steps p{font-size:14.5px;color:var(--muted);line-height:2;max-width:260px}
.cs-step-link{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:14.5px;font-weight:700;color:var(--brand)}
.cs-step-link .icon{width:17px;height:17px;transition:transform var(--fast)}
.cs-step-link:hover .icon{transform:translateX(-4px)}
.cs-step-state{margin-top:2px;padding:2px 12px;border-radius:999px;background:#edf6f0;color:#2c6446;font-size:13.5px;font-weight:700}

/* The hop. Only while .is-armed (set by courses.js, never under reduced motion) do steps wait unlit. */
/* Three layers so the motion stays smooth: the outer one travels straight between perches, the
   middle one rises and falls (easing out on the way up, in on the way down), the inner one squashes. */
.cs-ball{position:absolute;top:0;left:0;z-index:5;width:18px;height:18px;pointer-events:none;will-change:transform}
.cs-ball-arc{display:block;width:100%;height:100%;will-change:transform}
.cs-ball-body{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7a73,var(--brand) 60%,#b9231f);box-shadow:0 4px 10px #db2c2740;transform-origin:50% 100%;will-change:transform}
.cs-route.is-armed .cs-step:not(.is-lit) .cs-step-mark{background:var(--paper);border-color:#e8dbcf;color:#c2b6aa}
.cs-route.is-armed .cs-step:not(.is-lit) .cs-step-copy{opacity:.38;transform:translateY(6px)}
.cs-route.is-armed .cs-step-line::after{transform:scaleX(0)}
.cs-route.is-armed .cs-step.is-line-lit .cs-step-line::after{transform:none}
.cs-step.is-lit .cs-step-mark{animation:cs-land .55s var(--ease)}
.cs-route.is-armed .cs-step.is-lit .cs-step-mark{box-shadow:0 0 0 8px #fff,0 0 0 12px #db2c2714}
@keyframes cs-land{0%{transform:none}28%{transform:translateY(5px) scale(1.08,.9)}58%{transform:translateY(-3px) scale(.97,1.03)}100%{transform:none}}

/* The finish: a few crumbs of confetti and a small note, both once and brief */
.cs-cheer{position:absolute;inset:0;pointer-events:none}
.cs-cheer i{position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px;border-radius:2px;background:var(--c,#e9c46a);opacity:0}
.cs-cheer i:nth-child(1){--c:#e9c46a;--x:-38px;--y:-34px}
.cs-cheer i:nth-child(2){--c:var(--pink);--x:-12px;--y:-50px;border-radius:50%}
.cs-cheer i:nth-child(3){--c:#9fcdb0;--x:18px;--y:-46px}
.cs-cheer i:nth-child(4){--c:var(--brand);--x:40px;--y:-26px;border-radius:50%}
.cs-cheer i:nth-child(5){--c:#8fb3d9;--x:44px;--y:6px}
.cs-cheer i:nth-child(6){--c:#e9c46a;--x:-44px;--y:4px;border-radius:50%}
.cs-route.is-finished .cs-cheer i{animation:cs-confetti 1s cubic-bezier(.2,.7,.3,1) both}
.cs-route.is-finished .cs-cheer i:nth-child(even){animation-delay:.06s}
.cs-route.is-finished .cs-step:last-child .cs-step-mark{box-shadow:0 0 0 8px #fff,0 0 0 13px #db2c271f}
@keyframes cs-confetti{0%{opacity:0;transform:scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(160deg) scale(1)}}

/* FAQ */
.cs-faq{padding-block:clamp(50px,5.6vw,80px) clamp(30px,3.4vw,46px)}
.cs-faq-inner{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(22px,4vw,60px);max-width:1060px;align-items:start}
.cs-faq-list{display:grid;gap:10px}
.cs-faq details{border:1px solid var(--line);border-radius:18px;background:#fff;transition:border-color var(--fast)}
.cs-faq details[open]{border-color:#e2cfc4}
.cs-faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 20px;font-weight:700;font-size:16px;cursor:pointer;list-style:none}
.cs-faq summary::-webkit-details-marker{display:none}
.cs-faq summary .icon{width:20px;height:20px;color:var(--soft);transition:transform var(--fast);flex:none}
.cs-faq details[open] summary .icon{transform:rotate(180deg)}
.cs-faq details p{padding:0 20px 18px;color:var(--muted);line-height:2.05;font-size:15px}
.cs-faq details a{color:var(--brand);font-weight:700}

/* Closing band: the page's one dark stretch */
.cs-closing{padding-block:clamp(26px,3vw,40px) clamp(64px,7vw,100px)}
.cs-closing-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;max-width:1060px;margin-inline:auto;padding:clamp(26px,3.2vw,42px) clamp(24px,3.6vw,50px);border-radius:30px;background:var(--night);color:#fff;overflow:hidden}
.cs-closing-card::before{content:'';position:absolute;width:340px;aspect-ratio:1;inset-inline-end:-80px;top:-160px;border-radius:50%;border:1.5px dashed #ffffff22}
.cs-closing-copy{position:relative;display:grid;gap:10px}
.cs-closing h2{font-size:clamp(24px,2.4vw,31px);font-weight:800;letter-spacing:-.6px}
.cs-closing p{color:var(--night-text);font-size:15.5px;max-width:520px}
.cs-closing-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.cs-pill-ghost{color:#fff;border-color:#ffffff40}
.cs-pill-ghost:hover{border-color:#fff}
.cs-closing-mascot{position:relative;display:block;width:clamp(190px,18vw,240px);padding:12px 12px 4px;border-radius:30px;background:#fff;rotate:-4deg;box-shadow:0 0 0 8px #ffffff14}
.cs-closing-mascot .mascot-window img{transform:translateY(-3%)}
@media (prefers-reduced-motion:no-preference){.cs-closing-mascot{animation:cs-float 7s ease-in-out infinite}}

/* Responsive */
@media (max-width:1080px){
  .cs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .cs-hero-inner{grid-template-columns:1fr}
  .cs-hero-copy{text-align:center;display:grid;justify-items:center}
  .cs-lead{margin-inline:auto}
  .cs-stats,.cs-actions{justify-content:center}
  .cs-stage{width:min(440px,100%);margin-inline:auto;min-height:280px}
  /* The path turns vertical: marks on the start side, copy beside them, lines running down */
  .cs-route{--gap:26px;max-width:560px;margin-inline:auto}
  .cs-steps{grid-template-columns:1fr}
  .cs-step{grid-template-columns:56px minmax(0,1fr);justify-items:start;text-align:start;gap:18px;padding-inline:0}
  .cs-step-copy{justify-items:start;gap:4px;padding-top:6px}
  .cs-step-mark{margin-bottom:0}
  .cs-step-line{top:66px;inset-inline-start:26px;width:4px;height:calc(100% + var(--gap) - 76px);background:repeating-linear-gradient(180deg,#eadccd 0 7px,transparent 7px 13px)}
  .cs-step-line::after{background:linear-gradient(to bottom,#e8716b,#f3b8b3);transform-origin:center top}
  .cs-route.is-armed .cs-step-line::after{transform:scaleY(0)}
  .cs-route.is-armed .cs-step.is-line-lit .cs-step-line::after{transform:none}
  .cs-faq-inner{grid-template-columns:1fr}
  .cs-faq .cs-section-title{text-align:center}
  .cs-empty{grid-template-columns:auto minmax(0,1fr)}
  .cs-empty-actions{grid-column:1/-1}
}
@media (max-width:700px){
  .cs-grid{grid-template-columns:1fr}
  .cs-filters{padding:2px 14px 0}
  .cs-filter{grid-template-columns:1fr;gap:10px;padding-block:12px}
  .cs-options{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-14px;padding:2px 14px}
  .cs-option>span{min-height:40px;padding:6px 13px;font-size:14px}
  .cs-closing-card{grid-template-columns:1fr;text-align:center}
  .cs-closing p{margin-inline:auto}
  .cs-closing-actions{justify-content:center}
  .cs-closing-mascot{justify-self:center;width:150px}
}
@media (max-width:560px){
  .cs-hero{padding-top:24px}
  .cs-actions{width:100%;gap:10px}
  .cs-actions .hero-cta{flex:1 1 0;min-width:0;min-height:52px;padding:12px;font-size:14.5px;gap:8px}
  .cs-stats li{padding:6px 12px 6px 8px}
  .cs-stats b{min-width:34px;height:34px;font-size:17px}
  .cs-stage{display:none} /* the list is the point on a phone; the stats above already carry the numbers */
  .cs-ticket-mark{width:46px;height:46px}
  .cs-empty{grid-template-columns:1fr;text-align:center;justify-items:center}
  .cs-empty-actions{justify-content:center}
  .cs-closing-actions .pill{flex:1 1 0;min-width:0;padding-inline:12px}
}

.cs-price{display:grid;line-height:1.5}
.cs-price small{font-size:12.5px;color:var(--soft)}
.cs-price b{font-family:var(--font-num);font-size:18px;font-weight:800;letter-spacing:.3px}
.cs-price b i{font-family:var(--font);font-style:normal;font-size:13px;font-weight:600;color:var(--muted)}
.cs-price-empty{font-family:var(--font);font-size:15px;font-weight:700;color:var(--ink-2)}
.cs-buy.is-call .pill{flex:1}
.cs-buy.is-call .pill .icon{width:18px;height:18px}