/* EZPZ how-it-works page (/how-it-works/, templates/showcase/how_it_works.html): the hero's
   chapter index and the sticky chapter bar. The chapters themselves are the shared demo
   partials with their own stylesheets (pricing/finn-demo.css, pricing/vox.css).
   Tokens and shared classes come from landing/landing.css and landing/hero.css; everything
   here is sc-*. Dark only. Only transform and opacity animate, and only when motion is
   allowed (landing.css also turns every transition off under prefers-reduced-motion). */

:root { --sc-bar-h: 52px; }

/* A chapter reached through an anchor clears the site header and the chapter bar. */
.sc-main [id] { scroll-margin-top: calc(var(--lp-nav-h) + var(--sc-bar-h) + var(--lp-sp-4)); }

/* ---------- hero ---------- */
.lp-hero.sc-hero { padding-block: var(--lp-sp-7); text-align: center; }
.sc-hero-inner { display: flex; flex-direction: column; align-items: center; }
.lp-hero-title.sc-hero-title { margin-bottom: var(--lp-sp-4); font-size: clamp(36px, 6vw, 64px); }
.lp-hero-lead.sc-hero-lead { margin: 0 auto var(--lp-sp-7); }

/* ---------- chapter index: one card per chapter, rows centred ---------- */
.sc-index {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lp-sp-4);
  width: 100%; margin: 0; padding: 0; list-style: none; text-align: left;
}
.sc-index > li { display: flex; flex: 1 1 100%; min-width: 0; }
@media (min-width: 640px) { .sc-index > li { flex: 0 1 calc((100% - var(--lp-sp-4)) / 2); max-width: 360px; } }
@media (min-width: 1100px) { .sc-index > li { flex-basis: calc((100% - 3 * var(--lp-sp-4)) / 4); } }

.lp-card.sc-card {
  display: flex; flex-direction: column; gap: var(--lp-sp-2); width: 100%;
  padding: var(--lp-sp-5); color: var(--lp-text); text-decoration: none;
}
.lp-card.sc-card:hover { color: var(--lp-text); }
.sc-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--lp-sp-3); margin-bottom: var(--lp-sp-2); }
.sc-card-logo { display: block; width: 40px; height: 40px; border-radius: var(--lp-r-sm); border: 1px solid var(--lp-border-strong); background: #000; }
.sc-card-name { font-family: var(--lp-font-title); font-size: var(--lp-fs-lg); font-weight: 700; line-height: 1.2; }
.sc-card-eyebrow { color: var(--lp-accent); font-size: var(--lp-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sc-card-blurb { color: var(--lp-muted); font-size: var(--lp-fs-sm); line-height: 1.55; }
.sc-card-go { display: inline-flex; align-items: center; gap: var(--lp-sp-1); margin-top: auto; padding-top: var(--lp-sp-2); color: var(--lp-accent); font-size: var(--lp-fs-sm); font-weight: 600; }
.sc-card-arrow { display: inline-block; }

/* ---------- sticky chapter bar ---------- */
/* Pinned under the site header for the rest of the page. The negative margin keeps it out of
   the flow, so it sits over the first chapter's top padding instead of adding a gap. Without
   JS it is always shown; showcase.js arms it (.is-armed) and shows it once the hero is gone. */
.sc-bar {
  position: sticky; top: var(--lp-nav-h); z-index: 60;
  margin-bottom: calc(-1 * var(--sc-bar-h));
  border-block: 1px solid var(--lp-border);
  background: var(--lp-bg);
  background: color-mix(in srgb, var(--lp-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
}
.sc-bar.is-armed:not(.is-shown) { opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; }
.sc-bar-inner { display: flex; align-items: center; min-height: calc(var(--sc-bar-h) - 2px); }
.sc-bar-links {
  position: relative; /* the links' offsetLeft, for showcase.js */
  display: flex; flex: 1; gap: var(--lp-sp-1); min-width: 0; margin: 0; padding: 0;
  overflow-x: auto; list-style: none; scrollbar-width: none; overscroll-behavior-x: contain;
}
.sc-bar-links::-webkit-scrollbar { display: none; }
.sc-bar-links li { flex: none; }
.sc-bar-links a {
  position: relative; display: inline-flex; align-items: center; gap: var(--lp-sp-2);
  padding: 6px var(--lp-sp-3); border-radius: var(--lp-r-pill);
  color: var(--lp-muted); font-size: var(--lp-fs-sm); font-weight: 500; line-height: 1.4; white-space: nowrap;
}
.sc-bar-links a:hover { color: var(--lp-text); }
.sc-bar-links img { display: block; flex: none; width: 18px; height: 18px; border-radius: 5px; background: #000; }
.sc-bar-links .sc-bar-all { margin-right: var(--lp-sp-2); color: var(--lp-accent); font-weight: 600; }
/* The chapter in view: brighter text and an accent underline that grows in. */
.sc-bar-links a::after {
  content: ""; position: absolute; left: var(--lp-sp-3); right: var(--lp-sp-3); bottom: 1px; height: 2px;
  border-radius: var(--lp-r-pill); background: var(--lp-accent);
  transform: scaleX(0); transform-origin: left center;
}
.sc-bar-links a[aria-current="true"] { color: var(--lp-text); }
.sc-bar-links a[aria-current="true"]::after { transform: none; }

/* ---------- closing CTA: follows the last chapter's own padding ---------- */
.lp-section.sc-cta { padding-top: var(--lp-sp-7); }

/* ---------- motion (transform and opacity only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sc-bar.is-armed { transition: opacity var(--lp-dur) var(--lp-ease), transform var(--lp-dur) var(--lp-ease), visibility 0s; }
  .sc-bar.is-armed:not(.is-shown) { transition: opacity var(--lp-dur) var(--lp-ease), transform var(--lp-dur) var(--lp-ease), visibility 0s var(--lp-dur); }
  .sc-bar-links a::after { transition: transform var(--lp-dur) var(--lp-ease); }
  .sc-card-arrow { transition: transform var(--lp-dur) var(--lp-ease); }
  .lp-card.sc-card[data-lp-spot] { transition: border-color var(--lp-dur) var(--lp-ease), transform var(--lp-dur) var(--lp-ease); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .lp-card.sc-card:hover { transform: translateY(-2px); }
  .lp-card.sc-card:hover .sc-card-arrow { transform: translateX(3px); }
}

@media (max-width: 559.98px) {
  .lp-hero.sc-hero { padding-block: var(--lp-sp-6); }
  .lp-hero-lead.sc-hero-lead { margin-bottom: var(--lp-sp-6); }
}