/* =========================================================================
   Keystone CPA · carousel (Variant B) · stage, track and the 7 slides.
   Slides are built in HTML/CSS (4:5) and sized off the stage width (cqw),
   so they render crisp at any phone size. Swipe logic: carousel.js.
   Three colours, fixed roles: paper (ground) · navy (primary) · gold (accent).
   ========================================================================= */

.cstage { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; background: var(--bg); container-type: inline-size; cursor: grab; }
.cstage:active { cursor: grabbing; }
.ctrack { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(0.66, 0, 0.2, 1); will-change: transform; }
.ctrack.no-anim { transition: none; }
.cslide { position: relative; min-width: 100%; height: 100%; overflow: hidden; }
.cslide img { -webkit-user-drag: none; pointer-events: none; }

.cnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border: 0; padding: 0; border-radius: 50%; background: rgba(15, 27, 51, 0.4); cursor: pointer; transition: opacity 0.2s ease; }
.cnav::before { content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-top: 2.5px solid #fff; border-right: 2.5px solid #fff; }
.cnav--prev { left: 10px; } .cnav--prev::before { transform: translateX(2px) rotate(-135deg); }
.cnav--next { right: 10px; } .cnav--next::before { transform: translateX(-2px) rotate(45deg); }
.cnav[disabled] { opacity: 0; pointer-events: none; }
.cdots { display: flex; gap: 6px; }
.cdots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: #c7c7c7; cursor: pointer; }
.cdots button.is-on { background: var(--navy); }

/* ------------------------------ slide base ------------------------------ */
.cs { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font-family: var(--sans); }
/* subtle paper grain + faint ledger rules for a designed, non-template feel */
.cs::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(35, 64, 122, 0.07), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 calc(5.4cqw - 1px), rgba(15, 27, 51, 0.03) calc(5.4cqw - 1px) 5.4cqw); }
.cs__vis { position: relative; z-index: 1; flex: 0 0 74cqw; display: grid; place-items: center; padding: 9cqw 7cqw 6cqw; }
.cs__txt { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; padding: 0 7.5cqw 8cqw; }
.cs__k { display: inline-flex; align-items: center; gap: 2cqw; margin: 0 0 2.6cqw; font-size: 2.5cqw; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.cs__k::before { content: ""; width: 4.5cqw; height: 1px; background: currentColor; opacity: 0.6; }
.cs__line { margin: 0; font-family: var(--display); font-weight: 500; font-size: 6.2cqw; line-height: 1.16; letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.cs__line em { font-style: italic; color: var(--navy); }

/* photo slides: the photo owns the top and fades into the paper */
.cs--photo .cs__vis { flex-basis: 82cqw; padding: 0; overflow: hidden; background: linear-gradient(160deg, #3a2f5c, #1d1838); }
.cs--photo .cs__vis img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: saturate(0.94); }
.cs--photo .cs__vis::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 245, 241, 0) 58%, rgba(246, 245, 241, 0.86) 88%, var(--bg) 100%); }
.cs--photo .cs__txt { margin-top: -8cqw; }

/* slide 2 · the quote */
.qcard { position: relative; width: 100%; padding: 8cqw 7cqw 6.5cqw; border-radius: 4cqw; background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 1.4cqw 3cqw -1.8cqw rgba(15, 27, 51, 0.2), 0 8cqw 14cqw -9cqw rgba(15, 27, 51, 0.32); transform: rotate(-1.6deg); }
.qcard__mark { position: absolute; left: 5.6cqw; top: -1cqw; font-family: var(--display); font-size: 17cqw; line-height: 1; color: var(--gold); }
.qcard__q { margin: 0; font-family: var(--display); font-weight: 600; font-size: 6.4cqw; line-height: 1.14; color: var(--navy-deep); letter-spacing: -0.012em; }
.qcard__who { display: flex; align-items: center; gap: 2.4cqw; margin-top: 4.6cqw; font-size: 2.8cqw; font-weight: 700; color: var(--ink-3); }
.qcard__who::before { content: ""; width: 6cqw; height: 1px; background: var(--line); }

/* slide 3 · the K-1 */
.k1 { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 2cqw; box-shadow: 0 8cqw 14cqw -9cqw rgba(15, 27, 51, 0.35); font-size: 2.75cqw; color: var(--ink-2); overflow: hidden; }
.k1__top { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; padding: 3.2cqw 4cqw; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.k1__top b { font-family: var(--display); font-size: 4.6cqw; font-weight: 600; color: var(--ink); }
.k1__top span { font-size: 2.3cqw; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.k1__row { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; padding: 2.7cqw 4cqw; border-bottom: 1px solid var(--line-soft); }
.k1__row:last-child { border-bottom: 0; }
.k1__row strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.k1__amt { font-family: var(--display); font-size: 5cqw; font-weight: 600; color: var(--navy-deep) !important; }
.k1__boxes { display: flex; gap: 3.4cqw; }
.k1__box { display: inline-flex; align-items: center; gap: 1.3cqw; font-weight: 700; color: var(--ink); }
.k1__box i { width: 3.3cqw; height: 3.3cqw; border: 1.5px solid var(--ink-3); border-radius: 0.6cqw; display: grid; place-items: center; font-style: normal; font-size: 2.6cqw; line-height: 1; }
.k1__box--on i { border-color: #b03a2e; color: #b03a2e; }
.k1__box--on { position: relative; color: #b03a2e; }
.k1__box--on::after { content: ""; position: absolute; left: -2.2cqw; right: -2.4cqw; top: -1.8cqw; bottom: -1.8cqw; border: 2px solid #b03a2e; border-radius: 50%; transform: rotate(-6deg); }
.k1__note { padding: 2.4cqw 4cqw 3cqw; font-size: 2.6cqw; font-weight: 700; color: #b03a2e; }

/* slide 4 · the three fixes */
.fixes { width: 100%; display: grid; gap: 2.8cqw; list-style: none; margin: 0; padding: 0; }
.fixes li { display: grid; grid-template-columns: 9cqw minmax(0, 1fr); align-items: center; gap: 3.4cqw; padding: 3.4cqw 4cqw; border-radius: 3cqw; background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 5cqw 10cqw -7cqw rgba(15, 27, 51, 0.3); }
.fixes i { width: 9cqw; height: 9cqw; border-radius: 2.4cqw; display: grid; place-items: center; background: var(--navy); color: #fff; font-style: normal; font-family: var(--display); font-weight: 600; font-size: 4.4cqw; }
.fixes b { display: block; font-size: 3.5cqw; font-weight: 700; color: var(--ink); line-height: 1.25; }
.fixes span { display: block; margin-top: 0.6cqw; font-size: 2.7cqw; color: var(--ink-3); font-weight: 500; }

/* slide 5 · the bill, before and after */
.bill { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7cqw; align-items: end; padding: 0 4cqw; }
.bill__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bill__v { font-family: var(--display); font-weight: 600; font-size: 6.6cqw; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bill__pre { font-size: 2.4cqw; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.2cqw; }
.bill__bar { width: 100%; margin-top: 2.6cqw; border-radius: 2.4cqw 2.4cqw 0.6cqw 0.6cqw; }
.bill__col--a .bill__bar { height: 32cqw; background: repeating-linear-gradient(135deg, rgba(15, 27, 51, 0.16) 0 1.2cqw, rgba(15, 27, 51, 0.09) 1.2cqw 2.4cqw); }
.bill__col--b .bill__bar { height: 18cqw; background: linear-gradient(180deg, var(--navy-2), var(--navy-deep)); }
.bill__col--b .bill__v { color: var(--navy); }
.bill__lab { margin-top: 2.2cqw; font-size: 2.7cqw; font-weight: 700; color: var(--ink-2); }
.bill__save { position: absolute; right: 8cqw; top: 9cqw; padding: 2.2cqw 3.6cqw; border-radius: 99px; background: var(--gold-soft); border: 1px solid rgba(168, 130, 62, 0.35); font-size: 3cqw; font-weight: 800; color: var(--gold-deep); transform: rotate(3deg); }

/* slide 7 · the register CTA (text only, never a button) */
.cs--cta { background: var(--navy-deep); color: #fff; }
.cs--cta::before { opacity: 0.35; background: repeating-linear-gradient(180deg, transparent 0 calc(5.4cqw - 1px), rgba(255, 255, 255, 0.05) calc(5.4cqw - 1px) 5.4cqw); }
.cs--cta .cs__vis { flex-basis: 58cqw; padding: 0; overflow: hidden; background: #22314f; }
.cs--cta .cs__vis img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cs--cta .cs__vis::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 44, 87, 0) 50%, rgba(23, 44, 87, 0.8) 85%, var(--navy-deep) 100%); }
.cs--cta .cs__txt { margin-top: -7cqw; padding-left: 11cqw; padding-right: 11cqw; text-align: center; align-items: center; }
.cs--cta .cs__k { color: #d9bf86; }
.cs--cta .cs__k::after { content: ""; width: 4.5cqw; height: 1px; background: currentColor; opacity: 0.6; }
.cta__name { margin: 0; font-family: var(--display); font-weight: 600; font-size: 8.6cqw; text-wrap: balance; line-height: 1.02; letter-spacing: -0.02em; color: #fff; }
.cta__name em { color: #e6cf9a; }
.cta__sub { margin: 2.6cqw 0 0; font-size: 3.4cqw; line-height: 1.38; color: rgba(255, 255, 255, 0.82); max-width: 70cqw; }
.cta__when { margin: 4cqw 0 0; padding: 2cqw 4cqw; border-radius: 99px; border: 1px solid rgba(217, 191, 134, 0.45); font-size: 2.9cqw; font-weight: 700; color: #f1e3c0; }
.cta__how { margin: 3.4cqw 0 0; font-size: 3.1cqw; font-weight: 700; color: #fff; }