/* /carousel only: the eight Ask Arkie cards (the LinkedIn feature carousel,
   strategy-and-marketing/marketing-materials/linkedin-ads/feature-carousel/cards.html)
   as a page, kept in time with the vision soundtrack by carousel.<date>.js.
   Card sizes are the 1080 px design scaled to the card's width (--u = 1/1080 of it),
   so the text stays sharp at any size. Without JavaScript the cards simply stack.
   Loaded after styles.<date>.css. Rename to today's date on any change (the zone's
   4-hour browser cache, see CLAUDE.md). */
.cr-hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 800; }
.cr-player { margin: 34px auto 0; max-width: 640px; }
.cr-viewport { container-type: inline-size; }
.cr-track { --u: calc(100cqw / 1080); margin: 0; padding: 0; display: grid; gap: 24px; }
.cr-player figcaption { margin-top: 14px; color: var(--ink-faint); font-size: .88rem; }

/* Controls appear only once the script has taken over */
.cr-controls, .cr-nav { display: none; }
.cr-player.is-live .cr-controls { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cr-player.is-live .cr-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.cr-player button { font: inherit; cursor: pointer; }
.cr-play { min-width: 11.5rem; border: 0; }
.cr-nav .btn-ghost { background: transparent; color: var(--ink); min-width: 3.2rem; }
.cr-progress { flex: 1; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.cr-progress-bar { display: block; height: 100%; width: 0; background: var(--teal); }
.cr-count { color: var(--ink-faint); font-size: .88rem; font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; }
.cr-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cr-dot { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 1px solid var(--ink-faint); background: transparent; cursor: pointer; }
.cr-dot[aria-current="true"] { background: var(--teal); border-color: var(--teal); }
.cr-dot:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* One card at a time, cross-faded */
.cr-player.is-live .cr-track { display: block; position: relative; aspect-ratio: 1 / 1; }
.cr-player.is-live .cr-card { position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s; }
.cr-player.is-live .cr-card.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .cr-player.is-live .cr-card, .cr-player.is-live .cr-card.is-active { transition: none; }
}

/* The cards (1080 px design) */
.cr-card { --bg: #0f1722; --cpanel: #151f2c; --cborder: #243244; --mint: #7ee8cc;
  width: 100%; aspect-ratio: 1 / 1; position: relative; overflow: hidden; list-style: none;
  background: radial-gradient(ellipse 83% 65% at 80% 20%, rgba(126,232,204,0.06), transparent 70%), var(--bg);
  padding: calc(var(--u) * 72) calc(var(--u) * 80) calc(var(--u) * 64); display: flex; flex-direction: column; color: var(--ink);
  font-family: 'IBM Plex Mono', ui-monospace, monospace; border-radius: calc(var(--u) * 14); border: 1px solid var(--border); }
.cr-card h2 { font-weight: 700; font-size: calc(var(--u) * 58); line-height: 1.18; letter-spacing: calc(var(--u) * -1); margin: calc(var(--u) * 22) 0 0; color: var(--ink); }
.cr-card .m { color: var(--mint); }
.cr-card .top { display: flex; align-items: center; justify-content: space-between; }
.cr-card .brand { display: flex; align-items: center; gap: calc(var(--u) * 22); font-family: 'Inter', sans-serif; font-weight: 600; font-size: calc(var(--u) * 44); letter-spacing: calc(var(--u) * -0.5); }
.cr-card .brand svg { width: calc(var(--u) * 52); height: calc(var(--u) * 52); }
.cr-card .brand .arkie { color: var(--mint); }
.cr-card .count { font-size: calc(var(--u) * 22); color: var(--ink-faint); letter-spacing: calc(var(--u) * 2); }
.cr-card .tag { display: inline-block; margin-top: calc(var(--u) * 64); font-size: calc(var(--u) * 22); font-weight: 700; letter-spacing: calc(var(--u) * 4); color: var(--mint); text-transform: uppercase; }
.cr-card .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--u) * 22); color: var(--ink-faint); padding-top: calc(var(--u) * 26); }
.cr-card .eyebrow-c { margin-top: calc(var(--u) * 110); font-size: calc(var(--u) * 27); font-weight: 700; color: var(--mint); }
.cr-card .sub { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 25); color: var(--ink-faint); }
.cr-card .cover-h { font-size: calc(var(--u) * 54); line-height: 1.6; margin: auto 0; padding-left: calc(var(--u) * 40); white-space: nowrap; }
.cr-card .line-s { margin-top: calc(var(--u) * 18); font-size: calc(var(--u) * 26); color: var(--ink-faint); }
.cr-card .rec { margin-top: calc(var(--u) * 40); border: 1px solid var(--cborder); border-radius: calc(var(--u) * 18); overflow: hidden; }
.cr-card .row { display: grid; grid-template-columns: calc(var(--u) * 230) 1fr; gap: calc(var(--u) * 20); padding: calc(var(--u) * 22) calc(var(--u) * 28); border-bottom: 1px solid var(--cborder); background: var(--cpanel); }
.cr-card .row:last-child { border-bottom: none; }
.cr-card .k { font-size: calc(var(--u) * 22); color: var(--ink-faint); }
.cr-card .v { font-size: calc(var(--u) * 27); font-weight: 700; }
.cr-card .cr-src { font-size: calc(var(--u) * 21); color: var(--ink-dim); margin-top: calc(var(--u) * 8); line-height: 1.45; }
.cr-card .cr-src b { color: var(--mint); font-weight: 600; }
.cr-card .row.flag { box-shadow: inset calc(var(--u) * 6) 0 0 #f0b45a; }
.cr-card .row.flag .cr-src b { color: #f0b45a; }
.cr-card .row.rule { background: transparent; grid-template-columns: 1fr; }
.cr-card .row.rule .cr-src { margin-top: 0; font-size: calc(var(--u) * 22); }
.cr-card .chat { margin-top: calc(var(--u) * 26); display: grid; gap: calc(var(--u) * 18); }
.cr-card .msg { border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 18) calc(var(--u) * 24); font-size: calc(var(--u) * 24); line-height: 1.45; max-width: calc(var(--u) * 820); }
.cr-card .msg .who { font-size: calc(var(--u) * 19); color: var(--ink-faint); margin-bottom: calc(var(--u) * 6); }
.cr-card .msg.q { background: #1d2a3b; justify-self: end; }
.cr-card .msg.a { background: var(--cpanel); border: 1px solid var(--cborder); box-shadow: inset calc(var(--u) * 6) 0 0 var(--mint); }
.cr-card .msg.a b { color: var(--mint); }
.cr-card.stmt h2 { font-size: calc(var(--u) * 68); line-height: 1.3; margin-top: auto; }
.cr-card.stmt h2.h-55 { font-size: calc(var(--u) * 55); }
.cr-card.stmt h2.h-56 { font-size: calc(var(--u) * 56); }
.cr-card.stmt .line { font-size: calc(var(--u) * 30); line-height: 1.5; color: var(--ink-faint); margin-top: calc(var(--u) * 34); margin-bottom: auto; }
.cr-card.cta h2 { font-size: calc(var(--u) * 64); margin-top: calc(var(--u) * 140); }
.cr-card .button { display: inline-block; margin-top: calc(var(--u) * 56); background: var(--mint); color: #08110f; font-weight: 700; font-size: calc(var(--u) * 32); padding: calc(var(--u) * 26) calc(var(--u) * 42); border-radius: calc(var(--u) * 14); text-decoration: none; }
.cr-card .button:hover, .cr-card .button:focus-visible { background: #fff; }
.cr-card .url { margin-top: calc(var(--u) * 26); font-size: calc(var(--u) * 28); color: var(--ink); }
.cr-card .resp { font-size: calc(var(--u) * 22); color: var(--ink-faint); line-height: 1.5; }
/* Card 8, progress: the milestones (message-house.md § 2.15) */
.cr-card.progress h2 { font-size: calc(var(--u) * 52); }
.cr-card .stats { margin-top: calc(var(--u) * 44); border: 1px solid var(--cborder); border-radius: calc(var(--u) * 18); overflow: hidden; }
.cr-card .stat { background: var(--cpanel); padding: calc(var(--u) * 30) calc(var(--u) * 40) calc(var(--u) * 32); }
.cr-card .stat + .stat { border-top: 1px solid var(--cborder); }
.cr-card .stat .num { font-size: calc(var(--u) * 112); font-weight: 700; line-height: 1; letter-spacing: calc(var(--u) * -3); color: var(--mint); }
.cr-card .stat .lab { font-size: calc(var(--u) * 32); color: var(--ink); margin-top: calc(var(--u) * 14); }
.cr-card.progress .line { font-size: calc(var(--u) * 27); line-height: 1.5; color: var(--ink-faint); margin-top: calc(var(--u) * 34); }