/* Stacked Strength website — mirrors lib/core/theme (AppColors, AppSpacing, AppRadii). */

:root {
  /* AppColors */
  --brand: #6C47FF;
  --ember: #FF6B3D;
  --on-ember: #16131C;
  --success: #22C55E;
  --danger: #EF4444;

  /* Light ColorScheme */
  --primary: #6C47FF;
  --on-primary: #FFFFFF;
  --surface: #F7F5FA;
  --surface-high: #FFFFFF;
  --surface-highest: #EDE8F5;
  --ink: #16131C;
  --ink-variant: #5B5566;
  --outline: #DCD5E6;

  /* AppSpacing */
  --xs: 4px;
  --sm: 8px;
  --md: 12px;
  --lg: 16px;
  --xl: 20px;
  --xxl: 24px;
  --xxxl: 32px;

  /* AppRadii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #C4B5FD;
    --on-primary: #16131C;
    --surface: #0E0C12;
    --surface-high: #1A1722;
    --surface-highest: #24202C;
    --ink: #F4F1FA;
    --ink-variant: #B3ACBF;
    --outline: #34303D;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --primary: #C4B5FD;
  --on-primary: #16131C;
  --surface: #0E0C12;
  --surface-high: #1A1722;
  --surface-highest: #24202C;
  --ink: #F4F1FA;
  --ink-variant: #B3ACBF;
  --outline: #34303D;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--primary);
  text-underline-offset: 3px;
}

.page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--lg) var(--lg) var(--xxxl);
  position: relative;
}

/* Low-opacity brand/ember glow (design-system §6). */
.glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.glow::before,
.glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.glow::before {
  width: 420px;
  height: 420px;
  top: -160px;
  right: -140px;
  background: var(--brand);
  opacity: 0.08;
  filter: blur(40px);
}

.glow::after {
  width: 320px;
  height: 320px;
  bottom: -140px;
  left: -120px;
  background: var(--ember);
  opacity: 0.06;
  filter: blur(40px);
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  padding: var(--sm) 0 var(--xxl);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.3px;
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: #000;
}

.back {
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  padding: var(--sm) var(--md);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* Typography */
.eyebrow {
  margin: 0 0 var(--xs);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(30px, 7vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.8px;
}

h2 {
  margin: 0 0 var(--sm);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

h3 {
  margin: 0 0 var(--xs);
  font-size: 17px;
  font-weight: 700;
}

p {
  margin: 0 0 var(--md);
}

.muted {
  color: var(--ink-variant);
}

.lede {
  color: var(--ink-variant);
  font-size: 18px;
  margin-top: var(--md);
}

/* Surfaces */
.card {
  background: var(--surface-high);
  border-radius: var(--r-lg);
  padding: var(--xl);
  margin-bottom: var(--md);
}

.card > :last-child {
  margin-bottom: 0;
}

.card ul {
  margin: 0 0 var(--md);
  padding-left: var(--xl);
}

.card li {
  margin-bottom: var(--sm);
}

.section {
  margin-top: var(--xxl);
}

.hero {
  padding: var(--xxl) 0 var(--sm);
}

.hero-icon {
  width: 88px;
  height: 88px;
  border-radius: var(--r-xl);
  background: #000;
  margin-bottom: var(--xl);
  display: block;
}

.notice {
  background: var(--surface-highest);
  border-radius: var(--r-md);
  padding: var(--lg);
  margin-bottom: var(--md);
}

.notice > :last-child {
  margin-bottom: 0;
}

/* Buttons */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md);
  margin-top: var(--xxl);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm);
  min-height: 52px;
  padding: 0 var(--xxl);
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn-outline {
  color: var(--ink);
  border-color: var(--outline);
}

.btn:focus-visible,
a:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Feature grid */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md);
}

.grid .card {
  margin-bottom: 0;
}

.tag {
  display: inline-block;
  margin-bottom: var(--sm);
  padding: 2px var(--md);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Screenshot carousel — Play Store style: fixed-height row, arrows on hover, tap to enlarge. */
.carousel {
  position: relative;
  margin: 0 calc(var(--lg) * -1);
}

.carousel-track {
  display: flex;
  gap: var(--md);
  list-style: none;
  margin: 0;
  padding: var(--xs) var(--lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding: 0 var(--lg);
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track li {
  flex: none;
  scroll-snap-align: start;
}

.slide {
  display: block;
  padding: 0;
  border: 1px solid var(--outline);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0E0C12;
  cursor: zoom-in;
}

.slide img {
  display: block;
  height: 300px;
  width: auto;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--r-pill);
  border: 1px solid var(--outline);
  background: var(--surface-high);
  color: var(--ink);
  font: 700 28px/1 "Outfit", sans-serif;
  padding-bottom: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.carousel .prev {
  left: 0;
}

.carousel .next {
  right: 0;
}

.carousel:hover .carousel-nav:not([hidden]),
.carousel-nav:focus-visible {
  opacity: 1;
}

.carousel-nav[hidden] {
  display: none;
}

/* Touch screens swipe instead. */
@media (hover: none) {
  .carousel .carousel-nav {
    display: none;
  }
}

@media (min-width: 760px) {
  .carousel {
    margin: 0;
  }

  .carousel-track {
    padding: var(--xs) 0;
    scroll-padding: 0;
  }

  .carousel .prev {
    left: calc(var(--xxl) * -1);
  }

  .carousel .next {
    right: calc(var(--xxl) * -1);
  }

  .slide img {
    height: 340px;
  }
}

/* Full-screen viewer */
.viewer {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.96);
  overflow: hidden;
}

.viewer[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.viewer::backdrop {
  background: transparent;
}

.viewer img {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  border-radius: var(--r-md);
}

.viewer .carousel-nav {
  opacity: 1;
  background: rgba(26, 23, 34, 0.9);
  border-color: #34303D;
  color: #F4F1FA;
}

.viewer .prev {
  left: var(--lg);
}

.viewer .next {
  right: var(--lg);
}

.viewer-close {
  position: absolute;
  top: var(--lg);
  right: var(--lg);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(26, 23, 34, 0.9);
  color: #F4F1FA;
  font: 400 32px/1 "Outfit", sans-serif;
  cursor: pointer;
}

/* Steps */
ol.steps {
  margin: 0 0 var(--md);
  padding-left: var(--xl);
}

ol.steps li {
  margin-bottom: var(--sm);
}

/* Link list */
.links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.links li + li {
  border-top: 1px solid var(--outline);
}

.links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.links a::after {
  content: "→";
  color: var(--ink-variant);
}

/* Footer */
footer {
  margin-top: var(--xxxl);
  padding-top: var(--xl);
  border-top: 1px solid var(--outline);
  color: var(--ink-variant);
  font-size: 14px;
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm) var(--xl);
  margin-bottom: var(--md);
}

footer nav a {
  color: var(--ink-variant);
  text-decoration: none;
  font-weight: 600;
}

footer nav a:hover {
  color: var(--primary);
}

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

  .actions .btn {
    width: 100%;
  }

  .card {
    padding: var(--lg);
  }
}