/**
 * index.html — governed card deck (scroll proxy + pinned stack stage).
 * Architecture: docs/readme_cardsv2_governance.md
 */

body.cardsv2-landing {
  display: block;
  min-height: 100vh;
  overflow-x: visible;
  padding-bottom: var(--cardsv2-footer-h, 3.5rem);
  --cards-header-h: 4.25rem;
  --cards-tab-h: 3.25rem;
  --cards-stack-gap: 0.5rem;
  --deckv2-band-vh: 30;
  --deckv2-tail-vh: 18;
  --deckv2-stack-h: calc(100dvh - var(--cards-header-h) - var(--cardsv2-footer-h));
  --deckv2-teaser-opacity: 0.42;
  --deckv2-peek-bottom-gap: 12px;
  --deckv2-panel-pad: 1.25rem;
  --deckv2-min-front-body: 17.5rem;
  --deckv2-strip-overlap-max: 2.5rem;
  --deckv2-strip-step-px: 60px;
  --deckv2-strip-overlap-px: 0px;
  --deckv2-strip-stride-px: 60px;
  --deckv2-front-body-budget-px: 320px;
  --cardsv2-footer-h: 2.75rem;
  --cards-panel-radius: 1.35rem;
  --cards-deck-bg: #0f0a07;
  --cards-panel-bg: #241a12;
  --cards-panel-bg-active: #2e2218;
  --cards-panel-border: rgba(234, 220, 190, 0.2);
  --cards-inset-bg: var(--surface);
  background: var(--cards-deck-bg);
  color: var(--muffin-font);
}

.cardsv2-main {
  display: block;
}

body.cardsv2-landing .header {
  position: sticky;
  top: 0;
  z-index: 300;
  background: rgba(15, 10, 7, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cards-panel-border);
  box-shadow: none;
}

body.cardsv2-landing button.logo {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font: inherit;
}

body.cardsv2-landing button.nav-link {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: var(--font-medium);
}

body.cardsv2-landing .logo-text,
body.cardsv2-landing .nav-link {
  color: var(--muffin-font);
}

body.cardsv2-landing .nav-link.active,
body.cardsv2-landing .nav-link:hover {
  color: var(--primary);
}

.cards-prototype-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin-left: var(--space-sm);
}

.cards-hero {
  padding: var(--space-3xl) 0 var(--space-xl);
  background: linear-gradient(180deg, #1f150f 0%, var(--cards-deck-bg) 100%);
  text-align: center;
}

.cards-hero h1 {
  color: var(--white);
  font-size: clamp(1.75rem, 4vw, var(--text-4xl));
  max-width: 42rem;
  margin: 0 auto var(--space-lg);
}

.cards-hero .lead {
  color: var(--muffin-font);
  max-width: 42rem;
  margin: 0 auto var(--space-xl);
  font-size: var(--text-lg);
}

.cards-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

.card-deck-v2 {
  overflow: visible;
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--space-md) var(--space-md) 0;
}

.card-deck-v2__intro {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.card-deck-v2__intro h2 {
  color: var(--white);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-sm);
}

.card-deck-v2__intro p {
  color: var(--muffin-font);
  max-width: 32rem;
  margin: 0 auto;
}

.card-deck-v2__intro-picture {
  display: block;
  margin: var(--space-lg) auto 0;
  max-width: min(100%, 56rem);
}

.card-deck-v2__intro-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: var(--radius-lg);
  object-fit: contain;
  object-position: center;
}

@media (min-width: 769px) {
  .card-deck-v2__intro-picture {
    max-width: min(100%, 72rem);
  }
}

@media (max-width: 768px) {
  .card-deck-v2__intro-picture {
    max-width: 22rem;
  }
}

/* ---- Governed deck: sticky pin + scroll proxy (height from JS) ---- */
.deck-governor {
  position: relative;
  width: 100%;
}

.deck-governor__pin {
  position: sticky;
  top: var(--cards-header-h);
  height: var(--deckv2-stack-h);
  min-height: calc(100dvh - var(--cards-header-h) - var(--cardsv2-footer-h));
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
  /* Clip peek tabs at deck bottom — no extra box border on the pin */
  border: none;
  box-shadow: none;
}

.deck-governor__stack {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  pointer-events: auto;
}

.deck-governor__proxy {
  width: 100%;
  height: 0;
  pointer-events: none;
}

/* Cards: absolute top + collapse vars set by JS each frame (CSS only paints) */
.deck-governor__stack > .card-scene {
  --i: 0;
  --settle-t: 1;
  --collapse-t: 1;
  --rise-t: 0;
  --scene-opacity: 1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0;
  z-index: 10;
  isolation: isolate;
  list-style: none;
  opacity: var(--scene-opacity, 1);
}

/* Before governor first paint: first open, next card peek below (no overlap pile) */
.deck-governor:not(.deck-governor--ready) .deck-governor__stack > .card-scene:first-child {
  --collapse-t: 0;
}

.deck-governor:not(.deck-governor--ready) .deck-governor__stack > .card-scene:nth-child(2) {
  --scene-opacity: 0;
  --collapse-t: 1;
  pointer-events: none;
  top: calc(
    var(--deckv2-stack-h) - var(--deckv2-peek-bottom-gap) - var(--cards-tab-h)
  );
}

.deck-governor:not(.deck-governor--ready) .deck-governor__stack > .card-scene:nth-child(n + 3) {
  --scene-opacity: 0;
  --collapse-t: 1;
  pointer-events: none;
}

/* z-index ladder stays 100+index from JS so later strips paint above an expanded front card */
.card-scene.is-pinned .card-scene__panel {
  outline: 1px solid rgba(236, 134, 27, 0.45);
}

.card-scene__panel {
  position: relative;
  border: 1px solid var(--cards-panel-border);
  border-radius: var(--cards-panel-radius);
  background: var(--cards-panel-bg);
  box-shadow:
    0 calc(6px + (1 - var(--collapse-t, 0)) * 4px) rgba(0, 0, 0, 0.28),
    0 calc(20px + (1 - var(--collapse-t, 0)) * 12px) rgba(0, 0, 0, 0.38);
  overflow: hidden;
  transition: none;
  max-height: calc(
    var(--cards-tab-h) +
      (1 - var(--collapse-t, 0)) *
      calc(
        var(--deckv2-stack-h) -
          var(--strip-stack-above, 0px) -
          var(--deckv2-panel-pad)
      )
  );
  cursor: default;
}

.card-scene__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cards-panel-bg-active);
  opacity: calc((1 - var(--collapse-t, 0)) * (0.35 + var(--rise-t, 0) * 0.65));
  pointer-events: none;
  z-index: 0;
}

.card-scene__panel > * {
  position: relative;
  z-index: 1;
}

.card-scene.is-pinned .card-scene__panel,
.card-scene.is-expanded .card-scene__panel {
  max-height: calc(var(--deckv2-stack-h) - var(--strip-stack-above, 0px) - var(--deckv2-panel-pad));
}

.card-scene__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--cards-tab-h);
  padding: 0 1.25rem;
  border: none;
  background: rgba(0, 0, 0, 0.15);
  color: var(--white);
  font-size: var(--text-lg);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-family-primary);
  border-bottom: 1px solid transparent;
  border-bottom-color: color-mix(
    in srgb,
    var(--cards-panel-border) calc((1 - var(--collapse-t, 0)) * 100%),
    transparent calc(var(--collapse-t, 0) * 100%)
  );
}

.card-scene__tab:hover,
.card-scene__tab:focus-visible {
  background: rgba(236, 134, 27, 0.18);
  outline: none;
}

.card-scene__tab-chevron {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.8;
  transition: none;
  transform: rotate(calc((1 - var(--collapse-t, 0)) * 180deg));
}

.card-scene__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-xl);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  transition: none;
  opacity: calc(1 - var(--collapse-t, 0));
  max-height: calc((1 - var(--collapse-t, 0)) * 2000px);
  overflow: hidden;
  pointer-events: auto;
}

/* Front card: scroll body inside panel when strip ladder uses most of the pin */
.card-scene[data-deck-front='true'] .card-scene__panel {
  display: flex;
  flex-direction: column;
}

.card-scene[data-deck-front='true'] .card-scene__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* JS adds .deckv2-strip-compact when default strip stack exceeds viewport budget */
body.cardsv2-landing.deckv2-strip-compact {
  --cards-tab-h: 2.5rem;
  --cards-stack-gap: 0.35rem;
}

body.cardsv2-landing.deckv2-strip-compact .card-scene__tab {
  font-size: var(--text-base);
  padding: 0 0.85rem;
}

body.cardsv2-landing.deckv2-strip-tight .card-scene__tab {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* Tall pin: front card grows into free space; trailing strips sit on bottom edge */
body.cardsv2-landing.deckv2-loose-pin .card-scene[data-deck-front='true'] .card-scene__panel {
  min-height: calc(
    var(--deckv2-stack-h) - var(--strip-stack-above, 0px) - var(--deckv2-panel-pad)
  );
}

/* Short laptop / small-height desktop: slightly tighter hero so pin gains height */
@media (min-width: 769px) and (max-height: 820px) {
  body.cardsv2-landing:not(.stories-static) {
    --deckv2-strip-overlap-max: 3.25rem;
  }
  body.cardsv2-landing:not(.stories-static) .cards-hero {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-md);
  }

  body.cardsv2-landing:not(.stories-static) .card-deck-v2__intro {
    margin-bottom: var(--space-lg);
  }

  body.cardsv2-landing .cardsv2-footer .footer-bottom {
    padding: 0.5rem var(--space-md);
    font-size: var(--text-xs);
  }
}

.card-scene__inset {
  background: var(--cards-inset-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--text-primary);
  border: 1px solid var(--gray-200);
  min-height: 200px;
}

.card-scene__inset h3 {
  font-size: var(--text-base);
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.card-scene__inset ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.card-scene__inset li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: var(--text-sm);
}

.card-scene__store-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.card-scene__store-list li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.store-list-icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.store-list-icon .icon-svg {
  width: 1.5rem;
  height: 1.5rem;
}

.store-list-icon--play {
  color: #3ddc84;
}

.store-list-icon--apple {
  color: #1d1d1f;
}

.store-list-icon--windows {
  color: #00adef;
}

/* Contact form — v2 dark copy column */
.cardsv2-contact-form .form-label {
  color: var(--muffin-font);
  font-size: var(--text-sm);
  font-weight: 500;
}

.cardsv2-contact-form .form-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--cards-panel-border);
  border-radius: var(--radius-md);
  color: var(--white);
  padding: 0.65rem 0.85rem;
  font-family: var(--font-family-primary);
  font-size: var(--text-sm);
}

.cardsv2-contact-form .form-input::placeholder {
  color: rgba(234, 220, 190, 0.45);
}

.cardsv2-contact-form .form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(236, 134, 27, 0.25);
}

.cardsv2-contact-form .form-group {
  margin-bottom: var(--space-md);
}

.card-scene__copy--form h3 {
  margin-bottom: var(--space-sm);
}

.card-scene__copy--form > p {
  margin-bottom: var(--space-lg);
}

body.cardsv2-landing .cardsv2-email-providers .btn-provider {
  background: rgba(0, 0, 0, 0.2);
  border-color: var(--cards-panel-border);
  color: var(--white);
}

body.cardsv2-landing .cardsv2-email-providers .btn-provider:hover {
  background: rgba(236, 134, 27, 0.15);
  border-color: var(--primary);
}

/* Contact form modal — full form outside clipped pin viewport */
.deck-contact-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.deck-contact-modal[hidden] {
  display: none;
}

.deck-contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 3, 0.72);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.deck-contact-modal__panel {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  width: min(32rem, 100%);
  max-height: calc(100dvh - var(--cards-header-h) - var(--cardsv2-footer-h) - 2rem);
  overflow-y: auto;
  padding: var(--space-xl);
  border-radius: var(--cards-panel-radius);
  border: 1px solid var(--cards-panel-border);
  background: var(--cards-panel-bg-active);
  color: var(--white);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.deck-contact-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.deck-contact-modal__close:hover,
.deck-contact-modal__close:focus-visible {
  background: rgba(236, 134, 27, 0.35);
  outline: none;
}

.deck-contact-modal__title {
  color: var(--white);
  font-size: var(--text-2xl);
  margin: 0 2rem var(--space-sm) 0;
}

.deck-contact-modal__lead {
  color: var(--muffin-font);
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
}

body.cardsv2-landing.deck-contact-modal-open {
  overflow: hidden;
}

/* Official store badges (Wikimedia Commons) */
.card-scene__body--download {
  grid-template-columns: 1fr;
}

.store-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.store-badge-link {
  display: inline-block;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.store-badge-link:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.store-badge-link--soon {
  cursor: default;
  opacity: 0.88;
}

.store-badge-link--soon:hover {
  transform: none;
  opacity: 0.88;
}

.store-badge-img {
  display: block;
  width: auto;
  height: 3.3125rem;
  max-width: 100%;
}

.store-badge-img--microsoft {
  height: 3.3125rem;
}

.card-scene__copy h3 {
  color: var(--white);
  font-size: clamp(1.25rem, 2.5vw, var(--text-2xl));
  margin-bottom: var(--space-md);
}

.card-scene__copy p {
  color: var(--muffin-font);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.card-scene__features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.card-scene__feature-chip {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.card-scene__feature-chip strong {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.card-scene__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.card-scene__step {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.card-scene__step-num {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
}

/* Fixed footer — slim bar only (override layout.css .footer large top padding) */
body.cardsv2-landing .cardsv2-footer.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 250;
  margin: 0;
  padding: 0;
  background: #0a0604;
  border-top: 1px solid rgba(234, 220, 190, 0.12);
}

body.cardsv2-landing .cardsv2-footer .footer-bottom {
  border-top: none;
  margin: 0;
  padding: 0.65rem var(--space-md);
  text-align: center;
  color: var(--muffin-font);
  font-size: var(--text-sm);
  line-height: 1.35;
}

body.cardsv2-landing .cardsv2-footer .footer-bottom p {
  margin: 0;
}

body.cardsv2-landing .cardsv2-footer__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.cardsv2-landing .cardsv2-footer__link:hover,
body.cardsv2-landing .cardsv2-footer__link:focus-visible {
  color: var(--primary);
}

body.cardsv2-landing .btn-outline {
  border-color: var(--muffin-font);
  color: var(--muffin-font);
}

@media (max-width: 900px) {
  .card-scene__body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  body.cardsv2-landing.stories-static .deck-governor {
    overflow: visible;
  }

  body.cardsv2-landing.stories-static .deck-governor__pin {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    overflow: visible;
    pointer-events: auto;
  }

  body.cardsv2-landing.stories-static .deck-governor__stack {
    height: auto;
  }

  body.cardsv2-landing.stories-static .deck-governor__stack > .card-scene {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    margin-bottom: var(--space-md);
    opacity: 1 !important;
    --scene-opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.cardsv2-landing.stories-static .deck-governor__proxy {
    display: none;
    height: 0 !important;
  }

  body.cardsv2-landing.stories-static .card-scene__panel {
    max-height: none !important;
  }

  body.cardsv2-landing.stories-static .card-scene__body {
    max-height: none;
  }

  body.cardsv2-landing.stories-static .card-scene:not(.is-collapsed) .card-scene__body {
    opacity: 1 !important;
    visibility: visible;
    height: auto;
    padding: var(--space-lg) var(--space-xl) var(--space-xl);
    pointer-events: auto;
  }

  body.cardsv2-landing.stories-static .card-scene.is-collapsed .card-scene__body {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    pointer-events: none;
  }

  body.cardsv2-landing.stories-static .card-scene[data-deck-front='true'] .card-scene__body {
    overflow: visible;
  }

  body.cardsv2-landing.stories-static .card-deck-v2 {
    padding-bottom: var(--space-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-scene__panel,
  .card-scene__body,
  .card-scene__tab-chevron {
    transition: none;
  }
}