/* Course shop page (/courses/). Sits on fresh.css + course-page.css; the try-it widgets reuse suite-plus.css (.sp-*). */

.cs-head { max-width: 900px; margin: 0 auto clamp(30px, 4vw, 48px); text-align: center; }
.cs-head .display { margin-bottom: 14px; }
.cs-head .lede { margin: 0 auto; max-width: 56ch; font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.5; color: var(--ink-soft); }
.center-eyebrow { text-align: center; }

/* ---------- Hero ---------- */
.cs-hero .hero-title { margin-bottom: 14px; }
.cs-hero .not-tb { margin: 0 0 18px; }
.cs-hero .hero-lede { max-width: 30ch; margin: 0 0 26px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; font-weight: 600; color: var(--ink); }
.cs-hero .hero-ctas { margin-bottom: 22px; }
.cs-trust li { font-size: 14.5px; }
.cs-screen img { object-fit: cover; object-position: center 40%; }

/* ---------- Walkthrough video slot ---------- */
.cs-walk { background: linear-gradient(180deg, var(--paper) 0%, #FFF3D6 100%); }
.cs-video { position: relative; max-width: 1080px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: clamp(20px, 2.4vw, 32px); background: #2B1500; box-shadow: 0 50px 90px -40px rgba(90, 50, 0, .55), 0 0 0 1px rgba(43, 21, 0, .06); }
.cs-video img, .cs-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-video video[controls] { object-fit: contain; background: #000; }
.cs-video img { filter: saturate(1.05) brightness(.92); }
.cs-play { position: absolute; left: 50%; top: 50%; width: clamp(72px, 8vw, 104px); height: clamp(72px, 8vw, 104px); transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: var(--g-gold, linear-gradient(160deg, #FFE48A, #FFB300)); box-shadow: 0 8px 0 #C77A00, 0 30px 50px -16px rgba(43, 21, 0, .6); }
.cs-play svg { width: 42%; height: 42%; margin-left: 6%; fill: var(--ink); }

/* ---------- Journey ---------- */
.cs-journey { padding-bottom: clamp(40px, 5vw, 70px); background: linear-gradient(180deg, #FFF3D6 0%, #FCE3AE 100%); }


/* ---------- Testimonials ---------- */
.cs-voices { background: var(--paper); }
.cs-voices .voices { margin-top: clamp(30px, 4vw, 50px); }

/* ---------- AI Suite trial ---------- */
.cs-suite { --station: #1C8FE0; background: radial-gradient(60% 50% at 40% 58%, rgba(255, 201, 60, .28), transparent 70%), linear-gradient(180deg, #FFF6E2 0%, #FFE9BD 100%); }
.cs-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto clamp(22px, 3vw, 34px); }
.cs-key { --lip: color-mix(in srgb, var(--station) 30%, #EAD9B8); display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 18px 6px 7px; border: 0; border-radius: 16px; background: #fff; color: var(--ink); font: 700 15px var(--f-body); cursor: pointer; box-shadow: 0 4px 0 var(--lip), 0 12px 22px -12px rgba(83, 45, 9, .4); transition: transform .15s, box-shadow .15s, background .2s; }
.cs-key:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--lip), 0 16px 24px -12px rgba(83, 45, 9, .45); }
.cs-key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lip); transition-duration: .06s; }
.cs-key.is-active { --lip: color-mix(in srgb, var(--station) 70%, #000); background: var(--station); color: #fff; }
.cs-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--station); }
.cs-ico svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.cs-key.is-active .cs-ico, .cs-rpin.is-active .cs-ico { background: #fff; }
.cs-key.is-active .cs-ico svg, .cs-rpin.is-active .cs-ico svg { stroke: var(--station); }
/* Ramsa is the sun-gold room: gold fill and ink text, like the site's own 3D buttons */
.cs-key[data-room="ramsa"].is-active, .cs-rpin[data-room="ramsa"].is-active { --lip: #E39A00; background: linear-gradient(180deg, #FFDA6B, #FFC11F); color: var(--ink); }
.cs-key[data-room="ramsa"].is-active .cs-ico svg, .cs-rpin[data-room="ramsa"].is-active .cs-ico svg { stroke: #C27400; }
.cs-key:focus-visible, .cs-rpin:focus-visible { outline: 3px solid color-mix(in srgb, var(--station) 40%, #fff); outline-offset: 3px; }
.cs-key:focus:not(:focus-visible), .cs-rpin:focus:not(:focus-visible) { outline: 0; }

.cs-lab { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; max-width: 1240px; margin: 0 auto; }
.cs-room { position: relative; }
.cs-room > img { display: block; width: 100%; height: auto; border-radius: 28px; -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 62%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 40%, #000 62%, transparent 100%); }
.cs-room-pins { position: absolute; inset: 0; }
.cs-rpin { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 700 clamp(11.5px, 1vw, 14px)/1 var(--f-body); white-space: nowrap; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(83, 45, 9, .55); transition: transform .3s var(--spring), background .2s; }
.cs-rpin .cs-ico { width: 28px; height: 28px; border-radius: 50%; }
.cs-rpin .cs-ico svg { width: 15px; height: 15px; }
.cs-rpin:hover { transform: scale(1.08); }
.cs-rpin.is-active { background: var(--station); color: #fff; transform: scale(1.12); z-index: 2; }

.cs-info { min-width: 0; }
.cs-eye { margin: 0 0 8px; font: 700 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--station); }
.cs-info h3 { margin: 0; font: 800 clamp(24px, 2.2vw, 32px)/1.06 var(--f-disp); letter-spacing: -.04em; color: var(--ink); }
.cs-info > p:not(.cs-eye) { margin: 10px 0 18px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.cs-suite-cta { margin: clamp(30px, 4vw, 46px) 0 0; text-align: center; }

/* try-it additions on top of suite-plus.css */
.cs-info .sp-bub small { display: block; margin-bottom: 2px; font: 700 10.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.cs-mic { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; min-height: 48px; padding: 6px 18px 6px 8px; border: 0; border-radius: 999px; background: var(--station); color: #fff; font: 700 15px var(--f-body); cursor: pointer; box-shadow: 0 4px 0 color-mix(in srgb, var(--station) 70%, #000); }
.cs-mic-dot { width: 32px; height: 32px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C8FE0' stroke-width='2.3' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cs-mic.on .cs-mic-dot { animation: csRec 1s ease-in-out infinite; }
@keyframes csRec { 50% { transform: scale(.82); } }
.cs-score { margin-top: 14px; }
.cs-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cs-words span { display: grid; gap: 3px; padding: 8px 14px; border-radius: 14px; text-align: center; }
.cs-words b { font: 800 18px/1.1 var(--f-disp); letter-spacing: -.03em; }
.cs-words small { font: 700 12px var(--f-mono); }
.cs-words .ok { background: #2EC66D; color: #fff; }
.cs-words .slip { background: #FFE1E1; color: #B42318; }
.cs-typing::after { content: "▍"; margin-left: 1px; animation: csBlink .8s steps(1) infinite; }
@keyframes csBlink { 50% { opacity: 0; } }
.cs-answer { margin-top: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px -14px rgba(83, 45, 9, .4); }
.cs-answer b { display: block; font: 800 24px/1.15 var(--f-disp); letter-spacing: -.03em; color: var(--ink); }
.cs-answer i { display: block; margin-top: 4px; font: 700 21px/1.3 var(--f-ar); font-style: normal; color: #B26800; }
.cs-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: end; }
.cs-reel { position: relative; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: none; cursor: pointer; opacity: .6; transform: scale(.94); transition: opacity .25s, transform .35s var(--spring), box-shadow .25s; }
.cs-reel img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.cs-reel span { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 5px 8px; border-radius: 9px; background: rgba(255, 255, 255, .92); font: 700 12px/1.2 var(--f-body); color: var(--ink); }
.cs-reel.on { opacity: 1; transform: none; box-shadow: 0 0 0 3px var(--station), 0 18px 30px -14px rgba(43, 21, 0, .6); }

/* ---------- Money-back card ---------- */
.cs-refund { background: var(--paper); }
.cs-refund-card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 54px); align-items: center; max-width: 1000px; margin: 0 auto; padding: clamp(28px, 4vw, 52px); border-radius: 34px; background: linear-gradient(150deg, #FFFDF8 0%, #FFF1CC 100%); box-shadow: 0 40px 80px -40px rgba(90, 50, 0, .45), 0 0 0 1px rgba(43, 21, 0, .05); }
.cs-seal { display: grid; place-content: center; justify-items: center; width: clamp(130px, 15vw, 190px); aspect-ratio: 1; border-radius: 50%; background: var(--g-gold, linear-gradient(160deg, #FFE48A, #FFB300)); box-shadow: 0 0 0 10px rgba(255, 201, 60, .25), 0 24px 40px -18px rgba(220, 120, 0, .9); }
.cs-seal b { font: 800 clamp(54px, 6vw, 78px)/.9 var(--f-disp); letter-spacing: -.06em; }
.cs-seal span { margin-top: 4px; font: 700 13px var(--f-mono); letter-spacing: .2em; text-transform: uppercase; }
.cs-refund-copy h2 { margin: 0 0 10px; font: 800 clamp(28px, 3vw, 42px)/1.04 var(--f-disp); letter-spacing: -.045em; }
.cs-refund-copy > p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); }
.cs-terms { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.cs-terms li, .cs-summary li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 15.5px; line-height: 1.45; }
.cs-terms svg, .cs-summary svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; background: var(--g-gold, #FFC93C); }
.cs-terms a, .cs-fine a { color: #B25F00; font-weight: 700; }
.cs-fine { margin-top: 16px !important; font-size: 14px !important; }

/* ---------- Summary + final ---------- */
.cs-final-inner { align-items: center; }
.cs-summary { padding: clamp(24px, 3vw, 36px); border-radius: 30px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(43, 21, 0, .5); }
.cs-sum-eye { margin: 0 0 16px; font: 700 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #C26A00; }
.cs-summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cs-summary b { font-weight: 700; }
.cs-sum-price { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(43, 21, 0, .08); }
.cs-sum-price small { font: 700 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.cs-sum-price b { font: 800 clamp(30px, 3vw, 40px)/1 var(--f-disp); letter-spacing: -.04em; }
.cs-sum-price span { grid-column: 1 / -1; font-size: 14px; color: var(--ink-soft); }

/* ---------- Tablet / phone ---------- */
@media (max-width: 980px) {
  .cs-lab { grid-template-columns: 1fr; }
  .cs-info { max-width: 560px; margin: 0 auto; width: 100%; }
}
@media (max-width: 760px) {
  .cs-hero .hero-ctas .btn { width: 100%; justify-content: center; }
  .cs-keys { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-left: calc(-1 * var(--gutter, 16px)); margin-right: calc(-1 * var(--gutter, 16px)); padding: 4px var(--gutter, 16px) 10px; scrollbar-width: none; }
  .cs-keys::-webkit-scrollbar { display: none; }
  .cs-key { flex: none; font-size: 14px; }
  .cs-rpin span { display: none; }
  .cs-rpin { padding: 4px; }
  .cs-refund-card { grid-template-columns: 1fr; justify-items: start; }
  .cs-voices .voices { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-mic.on .cs-mic-dot, .cs-typing::after { animation: none !important; }
}

/* =====================================================================
   Design layer (10-04). Cream page, two sky bands (walkthrough, Suite),
   one orange finish. Every image sits in a clean rounded tile, like the
   homepage; nothing fades into the page.
   ===================================================================== */
body.cs-page { --cs-sky: #E2F2FF; --cs-sky-2: #F0F8FF; }
body.cs-page main { background: var(--paper); }
body.cs-page .cs-head { margin-bottom: clamp(28px, 3.4vw, 46px); }
body.cs-page .cs-head .eyebrow { margin-bottom: 12px; }

/* ---------- Hero: calm UAE coast behind the copy and laptop ---------- */
.cs-hero { min-height: min(calc(100svh - 72px), 900px); background:
  linear-gradient(90deg, rgba(255, 251, 242, .68) 0%, rgba(255, 251, 242, .42) 43%, rgba(255, 251, 242, 0) 68%),
  url('/images/course-shop/hero-coast-v1.webp') center / cover no-repeat;
  background-color: var(--paper); }
.cs-hero .hero-inner { padding-top: clamp(32px, 5vh, 64px); padding-bottom: clamp(48px, 7vh, 88px); }
.cs-hero .hero-checks svg { fill: var(--green); }
.cs-hero .hero-checks li { background: #fff; box-shadow: 0 6px 16px -10px rgba(90, 50, 0, .35); }
.cs-stage { position: relative; height: auto; min-height: clamp(380px, 46vw, 600px); justify-content: center; }
.cs-stage .laptop { position: relative; z-index: 2; width: 100%; }

/* ---------- Walkthrough: first sky band ---------- */
body.cs-page .cs-walk { background: linear-gradient(180deg, var(--cream) 0%, var(--cs-sky) 26%, var(--cs-sky-2) 74%, var(--paper) 100%); }
.cs-video { max-width: 1120px; box-shadow: 0 50px 90px -45px rgba(20, 70, 120, .55), 0 0 0 10px #fff; }

/* ---------- Plans: tight to the journey ---------- */
body.cs-page .cp-plans { background: var(--paper); padding-bottom: clamp(36px, 4vw, 56px); }
body.cs-page .cp-plans .wave-top { display: none; }
body.cs-page .cp-credit { margin-top: 40px; }


/* ---------- Testers: straight under the map ---------- */
body.cs-page .cs-voices { background: var(--paper); padding-top: clamp(56px, 6vw, 84px); padding-bottom: clamp(48px, 5vw, 72px); }
body.cs-page .cs-voices .voices { margin-top: clamp(28px, 3.4vw, 44px); }

/* ---------- AI Suite: second sky band, the room as a clean tile ---------- */
body.cs-page .cs-suite { background: linear-gradient(180deg, var(--paper) 0%, var(--cs-sky) 18%, var(--cs-sky-2) 80%, var(--paper) 100%); }
.cs-lab { align-items: stretch; }
.cs-room { align-self: center; }
.cs-room > img { border-radius: clamp(24px, 2.6vw, 34px); -webkit-mask-image: none; mask-image: none; box-shadow: 0 40px 80px -40px rgba(20, 70, 120, .55), 0 0 0 8px #fff; }
.cs-info { align-self: center; padding: clamp(22px, 2.4vw, 32px); border-radius: 30px; background: #fff; box-shadow: 0 30px 60px -36px rgba(20, 70, 120, .45); }
.cs-suite-cta { margin-top: clamp(28px, 3.4vw, 44px); }

/* ---------- Money-back beside the questions ---------- */
body.cs-page .cs-trustzone { background: var(--paper); }
.cs-trustzone .qa-list { margin: 0; }

/* ---------- Phone ---------- */
.cs-sticky { display: none; }
@media (max-width: 980px) {
  .cs-hero { min-height: 0; background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 34%, rgba(255, 251, 242, .88) 48%, rgba(255, 251, 242, 0) 68%),
    url('/images/course-shop/hero-coast-v1.webp') 72% bottom / auto 62% no-repeat;
    background-color: var(--paper); }
  .cs-stage { min-height: 0; padding: 30px 0 10px; }
}
@media (max-width: 760px) {
  .cs-info { padding: 18px; }
      .cs-sticky { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 20px; background: rgba(43, 21, 0, .92); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 40px -14px rgba(43, 21, 0, .6); transform: translateY(140%); transition: transform .45s var(--spring); }
  .cs-sticky.on { transform: none; }
  .cs-sticky small { display: block; font: 700 10.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
  .cs-sticky b { font: 800 20px/1.1 var(--f-disp); letter-spacing: -.03em; color: #FFC93C; }
}

body.cs-page .cp-plans .cs-head { max-width: 1100px; }

/* ---------- Suite: phone rooms (Saqr call, Shoof) ----------
   The call phone is the course's own (courses/foundation/call-room.css), at a smaller size:
   same art, same buzz, same gold rings. */
.cs-info.is-dev { background: none; box-shadow: none; padding-top: 0; padding-bottom: 0; text-align: center; }
.cs-info.is-dev > p:not(.cs-eye) { margin-left: auto; margin-right: auto; max-width: 34ch; }
.cs-dev { display: flex; justify-content: center; padding: 6px 0 4px; }
.cs-cphone, .cs-cam { position: relative; width: min(268px, 100%); aspect-ratio: 3 / 5; filter: drop-shadow(0 22px 26px rgba(111, 53, 0, .2)); }
.cs-ring { position: absolute; inset: 0; isolation: isolate; transform-origin: 50% 65%; }
.cs-ring[hidden] { display: none; }
.cs-ring::before, .cs-ring::after { content: ''; position: absolute; inset: 2.5% 7%; border: 2px solid #FFC11F; border-radius: 34px; pointer-events: none; z-index: -1; opacity: 0; }
.cs-ring::before { box-shadow: 0 0 24px 5px rgba(255, 190, 40, .31); }
.cs-ring::after { box-shadow: 0 0 16px 3px rgba(255, 190, 40, .25); }
.cs-ring.ready::before, .cs-ring.ready::after { animation: csRadiate 2.8s ease-out infinite; }
.cs-ring.ready::after { animation-delay: .25s; }
.cs-ring:has(.cs-ring-acts:hover), .cs-ring:focus-within { animation: none; }
@keyframes csRadiate { 0% { opacity: 0; transform: scale(.98); } 4% { opacity: .6; } 28%, 100% { opacity: 0; transform: scale(1.065); } }
.cs-ring-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.cs-ring-eye { position: absolute; top: 10%; left: 50%; translate: -50% 0; z-index: 1; display: inline-flex; align-items: center; margin: 0; padding: 6px 10px; border-radius: 20px; background: rgba(255, 250, 240, .92); white-space: nowrap; font: 700 8px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #9A5A00; }
.cs-sig { display: inline-flex; align-items: center; }
.cs-blink { color: #11A35A; margin-right: 5px; animation: csBlinkDot 1.2s steps(1) infinite; }
@keyframes csBlinkDot { 50% { opacity: .2; } }
.cs-sig { gap: 2px; height: 10px; margin-left: 5px; }
.cs-sig i { display: block; width: 2px; height: 7px; border-radius: 2px; background: #E88A00; animation: csSig 1.2s ease-in-out infinite; }
.cs-sig i:nth-child(2) { animation-delay: -.3s; height: 10px; }
.cs-sig i:nth-child(3) { animation-delay: -.6s; height: 8px; }
.cs-sig i:nth-child(4) { animation-delay: -.9s; height: 5px; }
@keyframes csSig { 0%, 100% { transform: scaleY(.35); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }
.cs-ring-panel { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); width: 80%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cs-ring-name { display: block; font: 800 25px/1.1 var(--f-disp); letter-spacing: -.04em; color: #2B1500; }
.cs-ring-panel small { display: block; max-width: 24ch; margin: 5px auto 0; font: 500 10.5px/1.45 var(--f-body); color: #745B43; }
.cs-ring-acts { display: flex; justify-content: center; gap: 40px; }
.cs-ring-acts > span { display: grid; justify-items: center; gap: 6px; }
.cs-ring-acts em { font: 700 8px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: #62462E; }
.cs-rbtn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .65); border-radius: 50%; color: #fff; cursor: pointer; box-shadow: 0 4px 0 rgba(90, 50, 0, .25), 0 8px 18px rgba(90, 50, 0, .14); transition: transform .2s, filter .2s; }
.cs-rbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cs-rbtn.decline { background: #E5484D; }
.cs-rbtn.accept { background: #11A35A; animation: csRingPulse 2.4s ease-out infinite; }
.cs-rbtn.accept svg { animation: csHandset 3.4s ease-in-out infinite; }
.cs-rbtn:hover { filter: brightness(1.12); transform: translateY(-2px); }
.cs-rbtn:active { transform: translateY(2px); filter: brightness(.96); }
@keyframes csRingPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(17, 163, 90, .15), 0 4px 0 #0B7A43; } 65% { box-shadow: 0 0 0 10px rgba(17, 163, 90, 0), 0 4px 0 #0B7A43; } }
@keyframes csHandset { 0%, 82%, 100% { transform: rotate(0); } 86%, 94% { transform: rotate(-12deg); } 90%, 98% { transform: rotate(8deg); } }

/* in the call, and the Shoof camera: the same gold device */
.cs-cphone.live, .cs-cam { border: 6px solid #EFAF23; border-radius: 34px; background: #FFF7E8; box-shadow: inset 0 0 0 2px #583819, 0 3px 0 #B87500; overflow: hidden; filter: drop-shadow(0 22px 26px rgba(111, 53, 0, .2)); }
.cs-incall { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 18px 7px 8px; text-align: left; }
.cs-incall[hidden] { display: none; }
.cs-incall::before, .cs-cam::before { content: ''; position: absolute; top: 7px; left: 50%; translate: -50% 0; width: 46px; height: 6px; border-radius: 20px; background: #583819; z-index: 6; }
.cs-chead { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px; }
.cs-chead img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: #FFE9A8; }
.cs-chead b { display: block; font: 800 15px/1.1 var(--f-disp); letter-spacing: -.03em; color: #2B1500; }
.cs-chead small { display: block; margin-top: 2px; font: 700 8.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #9A5A00; }
.cs-chead em { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: #FFEDBF; font: 700 10px/1 var(--f-mono); font-style: normal; color: #6F5035; }
.cs-ccam { position: relative; flex: none; height: 31%; border-radius: 18px; overflow: hidden; background: #FFEAC7; }
.cs-ccam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; animation: csPresence 5s ease-in-out infinite; }
.cs-incall.talking .cs-ccam img { animation-duration: 1.6s; }
@keyframes csPresence { 50% { transform: scale(1.014) translateY(-2px); } }
.cs-ccap { position: absolute; left: 50%; bottom: 7px; translate: -50% 0; max-width: 92%; padding: 5px 10px; border-radius: 999px; background: rgba(255, 250, 240, .93); font: 600 10px/1.2 var(--f-body); color: #69533E; white-space: nowrap; }
.cs-incall .sp-chat { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 8px 0 0; padding: 0 2px; gap: 6px; scrollbar-width: none; }
.cs-incall .sp-chat::-webkit-scrollbar { display: none; }
.cs-incall .sp-bub { max-width: 92%; padding: 8px 11px; border-radius: 14px; font-size: 12.5px; }
.cs-incall .sp-bub b { font-size: 13px; }
.cs-incall .sp-bub i { font-size: 12px; }
.cs-incall .sp-replies { flex: none; margin: 6px 0 0; gap: 5px; }
.cs-incall .sp-tile { min-height: 0; padding: 8px 10px; border-radius: 12px; font-size: 12px; }
.cs-incall .sp-note { flex: none; margin: 4px 0 0; font-size: 11px; text-align: center; }
.cs-incall .sp-note:empty { display: none; }

/* Shoof: a camera you want to press */
.cs-view { position: absolute; inset: 0; overflow: hidden; background: #FFF6E6; transition: inset .45s cubic-bezier(.2, .8, .2, 1), border-radius .45s, box-shadow .45s; }
.cs-view img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; animation: csHandheld 7s ease-in-out infinite; }
@keyframes csHandheld { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-1.6%, .8%) rotate(-.6deg); } 50% { transform: translate(.8%, -1.2%) rotate(.4deg); } 75% { transform: translate(1.4%, 1%) rotate(-.2deg); } }
.cs-focus { position: absolute; left: 16%; top: 24%; width: 68%; height: 50%; z-index: 2; animation: csHunt 2.2s ease-in-out infinite; transition: opacity .3s; }
.cs-focus i { position: absolute; width: 22px; height: 22px; border: 3px solid #fff; filter: drop-shadow(0 1px 3px rgba(43, 21, 0, .35)); }
.cs-focus i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 9px 0 0 0; }
.cs-focus i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 9px 0 0; }
.cs-focus i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 9px; }
.cs-focus i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 9px 0; }
@keyframes csHunt { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.07); } 55% { transform: scale(.97); } 70% { transform: scale(1.02); } }
.cs-flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
.cs-cam-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 16px 14px; background: linear-gradient(180deg, transparent, rgba(43, 21, 0, .45)); }
.cs-thumb { width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, .3) url("/images/course-shop/shoof-view-v2.webp") center / cover; border: 2px solid #fff; opacity: 0; transform: scale(.4); }
.cs-thumb.got { animation: csThumb .6s .25s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes csThumb { from { opacity: 0; transform: scale(.4) translate(60px, -60px); } to { opacity: 1; transform: none; } }
.cs-shutter { position: relative; width: 58px; height: 58px; padding: 0; border: 4px solid #fff; border-radius: 50%; background: none; cursor: pointer; animation: csCall 1.8s ease-out infinite; }
.cs-shutter i { position: absolute; inset: 4px; border-radius: 50%; background: #fff; transition: transform .12s; }
.cs-shutter:hover i { transform: scale(.92); }
.cs-shutter:active i { transform: scale(.8); }
@keyframes csCall { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
.cs-cam.shot .cs-flash { animation: csFlash .55s ease-out; }
@keyframes csFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.cs-cam.shot .cs-view { inset: 44px 14px 92px; border-radius: 16px; box-shadow: 0 0 0 4px #fff, 0 18px 30px -10px rgba(43, 21, 0, .5); }
.cs-cam.shot .cs-view img { animation-play-state: paused; }
.cs-cam.shot { background: #2B1500; }
.cs-cam.shot .cs-focus { opacity: 0; }
.cs-cam.shot .cs-shutter { animation: none; }
.cs-cam.shot .cs-shutter i { inset: 14px; border-radius: 6px; background: #FFC23D; }
.cs-tagw { position: absolute; left: 50%; top: 26%; z-index: 5; translate: -50% 0; display: grid; justify-items: center; gap: 1px; margin: 0; padding: 9px 18px 10px; border-radius: 16px; background: #fff; box-shadow: 0 16px 30px -12px rgba(43, 21, 0, .55); }
.cs-tagw::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: #fff; transform: rotate(45deg); border-radius: 0 0 3px 0; }
.cs-tagw b { font: 800 22px/1.1 var(--f-disp); letter-spacing: -.03em; color: #2B1500; }
.cs-tagw i { font: 700 19px/1.25 var(--f-ar); font-style: normal; color: #B26800; }
.cs-tagw small { font: 700 9.5px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #7A6048; }
.cs-tagw[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cs-ring::before, .cs-ring::after, .cs-rbtn.accept, .cs-rbtn.accept svg, .cs-sig i, .cs-blink, .cs-ccam img, .cs-view img, .cs-focus, .cs-shutter { animation: none !important; }
}

/* refund card in the FAQ: seal beside the words, one sentence, one link */
.cs-refund-copy > p a { color: #B25F00; font-weight: 700; white-space: nowrap; }
/* the live call screen takes the exact size of the phone body in the ringing art */
.cs-cphone.live { width: min(230px, 86%); aspect-ratio: 230 / 440; }
.cs-cam { width: min(230px, 86%); aspect-ratio: 230 / 440; }
.cs-view img { inset: -1.5%; width: 103%; height: 103%; }
.cs-focus { left: 12%; top: 22%; width: 76%; height: 52%; }
.cs-focus i { border-color: #FFC23D; filter: drop-shadow(0 0 1px rgba(43, 21, 0, .6)) drop-shadow(0 2px 4px rgba(43, 21, 0, .35)); }

/* ---------- Journey: the course's own animated city, edge to edge ----------
   Same art and motion as the course map (journey-objects.js): terrain plate, building
   sprites, swaying palms, bobbing tokens, turning wheel, waving flag. No frame, no tags. */
.cs-journey, body.cs-page .cs-journey { background: var(--paper); padding-bottom: 0; overflow: clip; }
.cs-city { position: relative; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); aspect-ratio: 1536 / 1184; margin-top: clamp(6px, 1.5vw, 20px); isolation: isolate; }
.cs-city-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 93%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 6%, #000 93%, transparent); }
.cs-city .jn-atmosphere { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cs-city .jn-independent-palm, .cs-city .jn-independent-token, .cs-city .jn-independent-flag, .cs-city .jn-token-shadow { position: absolute; pointer-events: none; }
.cs-city .jn-palm-object, .cs-city .jn-token-art, .cs-city .jn-cloth { width: 100%; height: 100%; display: block; overflow: visible; }
.cs-city .jn-palm-canopy { transform-box: view-box; }
.cs-city .jn-cloth { filter: drop-shadow(1px 2px 1px #67442222); }
.cs-city .jn-object-art { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cs-city .jn-glass-spark { opacity: 0; }
.cs-stop { position: absolute; z-index: 3; display: block; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cs-stop:focus-visible { outline: none; }
.cs-mount { position: absolute; inset: 0; display: block; transform-origin: 50% 85%; transition: transform .32s cubic-bezier(.2, .75, .2, 1), filter .32s ease; }
.cs-stop:hover, .cs-stop:focus-visible, .cs-stop.is-open { z-index: 6; }
.cs-stop:hover .cs-mount, .cs-stop:focus-visible .cs-mount { transform: translateY(-5px) scale(1.065); filter: drop-shadow(0 7px 4px #653b1435); }
.cs-stop.is-open .cs-mount { transform: translateY(-7px) scale(1.08); filter: drop-shadow(0 0 10px #FFD25Acc) drop-shadow(0 8px 5px #653b1440); }
.cs-stop:focus-visible .cs-mount { filter: drop-shadow(0 0 0 #1C8FE0) drop-shadow(0 0 6px #1C8FE0aa); }
@media (prefers-reduced-motion: no-preference) {
  .cs-city .jn-palm-canopy { animation: jn-fronds-sway 2.6s ease-in-out infinite; animation-delay: var(--delay); }
  .cs-city .jn-independent-token { animation: jn-token-bob 3.4s ease-in-out infinite; }
  .cs-city .jn-independent-token:nth-child(2n) { animation-delay: -1.7s; }
  .cs-city .jn-glass-spark { animation: jn-glass-twinkle 4.5s ease-in-out infinite; }
}
@keyframes jn-fronds-sway { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }
@keyframes jn-token-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes jn-glass-twinkle { 0%, 52%, 78%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 64% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .cs-mount { transition: none; } .cs-stop:hover .cs-mount, .cs-stop.is-open .cs-mount { transform: none; } }

/* the small summary card that opens next to a building */
.cs-lm-card { position: absolute; z-index: 9; width: min(272px, calc(100% - 20px)); display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 13px 16px 14px 13px; border-radius: 18px; background: #FFFDF7; color: var(--ink);
  box-shadow: 0 18px 40px -16px rgba(90, 45, 0, .45), 0 2px 6px rgba(90, 45, 0, .12);
  opacity: 0; transform: translateY(8px) scale(.6); transform-origin: var(--notch) 100%; transition: opacity .18s ease, transform .42s cubic-bezier(.34, 1.45, .64, 1); }
.cs-lm-card[data-dir="down"] { transform-origin: var(--notch) -10px; transform: translateY(-8px) scale(.6); }
.cs-lm-card.in { opacity: 1; transform: none; }
.cs-lm-card::after { content: ""; position: absolute; left: var(--notch); bottom: -6px; width: 14px; height: 14px; margin-left: -7px; background: inherit; border-radius: 3px; transform: rotate(45deg); }
.cs-lm-card[data-dir="down"]::after { bottom: auto; top: -6px; }
.cs-lm-n { margin: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(160deg, #FFE38C, #FFB72E); font: 800 15px/1 var(--f-disp); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(150, 80, 0, .25); }
.cs-lm-name { margin: 1px 0 0; font: 800 16.5px/1.15 var(--f-disp); letter-spacing: -.03em; }
.cs-lm-brief { margin: 5px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
@media (max-width: 600px) {
  .cs-lm-card { width: min(230px, calc(100% - 20px)); gap: 9px; padding: 10px 12px 11px 10px; border-radius: 15px; }
  .cs-lm-n { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; }
  .cs-lm-name { font-size: 14.5px; }
  .cs-lm-brief { font-size: 13px; }
}


/* ---------- Suite rooms, 10-04 pass: no labels, centred, same look as the course ---------- */
.cs-info > p:not(.cs-eye) { margin-bottom: 20px; }
/* Tkalam: the line, one big mic, the scored words */
.cs-tk { display: grid; justify-items: center; text-align: center; padding: 6px 0 2px; }
.cs-tk-q { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.cs-tk-tl { margin: 4px 0 0; font: 800 clamp(24px, 2.4vw, 30px)/1.12 var(--f-disp); letter-spacing: -.035em; color: var(--ink); }
.cs-tk-ar { margin: 6px 0 0; font: 700 22px/1.35 var(--f-ar); color: #C27400; }
.cs-tk-en { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.cs-bigmic { display: grid; place-items: center; width: 72px; height: 72px; margin-top: 18px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--station) 70%, #fff), var(--station) 62%);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--station) 65%, #000), 0 14px 26px -10px color-mix(in srgb, var(--station) 80%, transparent);
  transition: transform .15s ease, box-shadow .15s ease; animation: csMicHalo 2.2s ease-out infinite; }
.cs-bigmic svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cs-bigmic:hover { transform: translateY(-2px); }
.cs-bigmic:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, var(--station) 65%, #000); }
.cs-bigmic.done { animation: none; }
.cs-bigmic:disabled { cursor: default; opacity: .45; animation: none; transform: none; }
@keyframes csMicHalo { 0% { outline: 0 solid color-mix(in srgb, var(--station) 35%, transparent); outline-offset: 0; } 100% { outline: 14px solid transparent; outline-offset: 2px; } }
.cs-tk-res { margin-top: 16px; display: grid; justify-items: center; gap: 8px; }
.cs-tk-res[hidden] { display: none; }
.cs-words { justify-content: center; }
.cs-words .mid { background: #FFE6C2; color: #A85A00; }
.cs-tk-tip { margin: 0; font-size: 14px; color: var(--ink-soft); }
/* Scenarios: their line, the task, two answers, like a course scenario turn */
.cs-sc { display: grid; gap: 12px; }
.cs-sc-tl { margin: 0; font: 700 19px/1.35 var(--f-body); color: var(--ink); }
.cs-sc-ar { margin: 4px 0 0; font: 700 18px/1.4 var(--f-ar); color: #C27400; }
.cs-sc-en { margin: 3px 0 0; font-size: 14px; color: var(--ink-soft); }
.cs-sc-opts { display: grid; gap: 10px; }
.cs-opt { display: grid; gap: 2px; justify-items: start; padding: 12px 16px; border: 0; border-radius: 16px; background: #fff; color: var(--ink); text-align: left; cursor: pointer;
  font: 700 15.5px/1.3 var(--f-body); box-shadow: inset 0 0 0 1px #F4E9D6, 0 4px 0 #F1E2C8; transition: transform .15s ease, box-shadow .15s ease, background .2s; }
.cs-opt .ar { font: 700 15px/1.4 var(--f-ar); color: #E88A00; justify-self: end; }
.cs-opt:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #F4E9D6, 0 6px 0 #F1E2C8; }
.cs-opt.correct { background: linear-gradient(180deg, #2FCB7B, #11A35A); color: #fff; box-shadow: 0 4px 0 #0B7A43; }
.cs-opt.wrong { background: #E5484D; color: #fff; box-shadow: 0 4px 0 #B3262B; }
.cs-opt:is(.correct, .wrong) .ar { color: inherit; }
.cs-opt:disabled { cursor: default; }
/* Saqr call: Tell them */
.cs-tell { flex: none; display: grid; justify-items: center; gap: 4px; padding: 8px 0 2px; }
.cs-tell[hidden] { display: none; }
.cs-tell .cs-bigmic.sm { width: 50px; height: 50px; margin: 0; --station: #F07A1A; }
.cs-tell .cs-bigmic.sm svg { width: 22px; height: 22px; }
.cs-tell b { font: 700 12px/1 var(--f-body); color: #6F5035; }
/* Ramsa: search box, then a lesson-style word card */
.cs-rs { display: grid; gap: 14px; }
.cs-rs-bar { display: flex; gap: 8px; margin: 0; }
.cs-rs-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--station) 35%, #fff); }
.cs-rs-box:focus-within { box-shadow: inset 0 0 0 2px var(--station); }
.cs-rs-box svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--station); stroke-width: 2.4; stroke-linecap: round; }
.cs-rs-box input { flex: 1; min-width: 0; height: 50px; border: 0; outline: 0; background: none; font: 600 16px var(--f-body); color: var(--ink); }
.cs-rs-bar .btn { flex: none; }
.cs-fc { padding: 24px 20px 22px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 18px 36px -20px rgba(83, 45, 9, .45), inset 0 0 0 1px #F4E9D6; }
.cs-fc[hidden] { display: none; }
.cs-fc-tl { margin: 0; font: 800 clamp(26px, 2.6vw, 32px)/1.1 var(--f-disp); letter-spacing: -.035em; color: var(--ink); }
.cs-fc-ar { margin: 8px 0 0; font: 700 30px/1.35 var(--f-ar); color: #E88A00; }
.cs-fc-en { margin: 4px 0 0; font-size: 15.5px; color: var(--ink-soft); }
.cs-fc-miss { margin: 0; font-size: 15px; color: var(--ink-soft); }
/* Shoof: the same device as the call, in Shoof red */
.cs-cam { border-color: #E5484D; box-shadow: inset 0 0 0 2px #5A1A1C, 0 3px 0 #B3262B; }
.cs-cam::before { background: #5A1A1C; }
.cs-focus i { border-color: #E5484D; }
@media (prefers-reduced-motion: reduce) { .cs-bigmic { animation: none; } }
/* the course's landmark numbers: gold disc in a cream ring, as on the course map */
.cs-num { position: absolute; z-index: 2; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; padding: 3px; border: 2px solid #765227; border-radius: 50%; background: #fff9e9; box-shadow: 0 3px 0 #4a290233; pointer-events: none; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s; }
.cs-num b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(160deg, #FFE38C, #FFB72E); font: 800 13px/1 var(--f-disp); color: var(--ink); }
.cs-stop:hover .cs-num, .cs-stop:focus-visible .cs-num, .cs-stop.is-open .cs-num { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 0 4px #fff9e9aa, 0 3px 0 #4a290233; }
@media (max-width: 600px) {
  .cs-num { padding: 2px; border-width: 1.5px; }
  .cs-num b { width: 17px; height: 17px; font-size: 9.5px; }
}

/* Scenarios, one turn: lines are cards like the course's, your line lands under theirs */
.cs-sc-convo { display: grid; gap: 10px; }
.cs-sc-line { padding: 14px 18px 15px; border-radius: 20px; background: #FFFAF1; box-shadow: inset 0 0 0 1px #F4E9D6; }
.cs-sc-line.you { background: #fff; box-shadow: inset 0 0 0 2px #2FCB7B, 0 10px 22px -16px rgba(17, 120, 70, .6); }
.cs-sc-who { display: block; margin-bottom: 6px; font: 700 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #A07840; }
.cs-sc-line.you .cs-sc-who { color: #0E8A4C; }
.cs-sc-ask { display: grid; gap: 10px; margin-top: 4px; transition: opacity .3s ease; }
.cs-sc-ask.gone { display: none; }
.cs-sc-prompt { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.cs-sc-fb { margin: 0; padding: 0 14px; max-height: 0; overflow: hidden; border-radius: 16px; font-size: 14.5px; font-weight: 600; transition: max-height .25s ease, padding .25s ease; }
.cs-sc-fb.show { max-height: 90px; padding: 11px 14px; }
.cs-sc-fb.good { background: #E4F7EC; color: #0B6B3B; }
.cs-sc-fb.bad { background: #FDE8E6; color: #9E2A22; }
.cs-opt.wrong { animation: csShake .45s ease; }
@keyframes csShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* Saqr call and Shoof now sit in the same white box as the other rooms */
.cs-info .cs-dev { padding: 2px 0 0; }

/* journey intro: the numbers light up one after another along the road */
.cs-num.lit { animation: csNumLit .9s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes csNumLit { 0% { transform: translate(-50%, -50%) scale(1); } 35% { transform: translate(-50%, -50%) scale(1.45); box-shadow: 0 0 0 7px #FFD25A88, 0 0 22px 6px #FFC23Daa; } 100% { transform: translate(-50%, -50%) scale(1); } }

/* money-back guarantee band (between the Suite and the FAQ) */
body.cs-page .cs-guarantee { z-index: 2; overflow: visible; background: var(--paper); padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(10px, 2vw, 24px); }
.cs-gt { position: relative; display: grid; grid-template-columns: 200px 1fr auto; gap: clamp(20px, 3vw, 40px); align-items: center; max-width: 1120px; margin: 0 auto;
  padding: 26px clamp(26px, 3.4vw, 44px) 26px 20px; border-radius: 32px; background: linear-gradient(115deg, #FFFDF8 0%, #FFF3D6 55%, #FFE3A8 100%);
  box-shadow: 0 34px 70px -40px rgba(90, 50, 0, .5), 0 0 0 1px rgba(43, 21, 0, .05); }
.cs-gt-saqr { width: 220px; height: auto; margin: -78px 0 -34px -14px; filter: drop-shadow(0 18px 22px rgba(90, 45, 0, .28)); }
.cs-gt.in .cs-gt-saqr { animation: csGtSaqr .8s cubic-bezier(.34, 1.45, .64, 1) .1s both; }
@keyframes csGtSaqr { from { transform: translateY(26px) rotate(-6deg) scale(.88); opacity: 0; } to { transform: none; opacity: 1; } }
.cs-gt-copy h2 { margin: 0 0 10px; font: 800 clamp(24px, 2.5vw, 34px)/1.08 var(--f-disp); letter-spacing: -.045em; }
.cs-gt-copy h2 span { display: block; background: var(--g-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-gt-copy p { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.cs-gt-act { display: grid; justify-items: center; gap: 12px; }
.cs-gt-act .btn { white-space: nowrap; }
.cs-gt-link { font-size: 14px; font-weight: 700; color: #B25F00; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .cs-gt { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; padding: 0 22px 28px; margin-top: 70px; }
  .cs-gt-saqr { width: 170px; margin: -86px 0 -6px; }
  .cs-gt-copy p { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .cs-gt.in .cs-gt-saqr { animation: none; } }

/* FAQ: one centred column */
.cs-trustzone .qa-list { max-width: 820px; margin: 0 auto; }

/* Walkthrough video: muted autoplay with a mute toggle in the top-right corner */
.cs-mute { position: absolute; top: clamp(12px, 1.6vw, 20px); right: clamp(12px, 1.6vw, 20px); z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(43, 21, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 18px rgba(43, 21, 0, .25); transition: background .2s, transform .2s; }
.cs-mute:hover { background: rgba(43, 21, 0, .75); transform: scale(1.06); }
.cs-mute:focus-visible { outline: 3px solid #FFC23D; outline-offset: 2px; }
.cs-mute svg { width: 22px; height: 22px; fill: currentColor; }

/* Hero trust badges sit on one line at every width (owner, 2026-10-05). Desktop: one
   row of pills, tightened as the copy column narrows. Phone: three equal tiles. */
.cs-hero .hero-checks { flex-wrap: nowrap; }
.cs-hero .hero-checks li { flex: none; white-space: nowrap; }
.cs-hero .hero-checks svg { flex: none; }
@media (max-width: 1240px) {
  .cs-hero .hero-checks { gap: 6px; font-size: 12.5px; }
  .cs-hero .hero-checks li { gap: 5px; padding: 6px 10px 6px 7px; }
  .cs-hero .hero-checks svg { width: 14px; height: 14px; }
}
@media (max-width: 760px) {
  .cs-hero .hero-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; font-size: 12px; line-height: 1.25; }
  .cs-page .cs-hero .hero-checks li { flex-direction: column; justify-content: flex-start; gap: 5px; padding: 10px 6px; border-radius: 16px; white-space: normal; text-align: center; font-size: 13px; line-height: 1.25; }
}