/* ARCHITECTURE: Shared responsive presentation for static public website pages.
   Uses system fonts and Figma's primary indigo as a consistent brand background. */
:root {
  color-scheme: dark;
  --brand: #6155f5;
  --background: var(--brand);
  --text: #ffffff;
  --muted: #f9f8f5;
  --line: rgb(255 255 255 / 28%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--background);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }

body { margin: 0; }

a { color: inherit; }

a:focus-visible, button:focus-visible, .gallery-track:focus-visible {
  outline: 3px solid var(--text);
  outline-offset: 6px;
  border-radius: 2px;
}

.page {
  width: min(100%, 1088px);
  min-height: 100svh;
  margin-inline: auto;
  padding: 48px 64px;
  display: flex;
  flex-direction: column;
}

.wordmark {
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: normal;
  text-decoration: none;
}

.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.brand-icon { display: block; width: 140px; height: 140px; }

.header-contact {
  font-size: 14px;
  text-underline-offset: 4px;
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: center;
  gap: 64px;
  padding-block: 48px 72px;
}

.product h1 {
  margin-top: 0;
  letter-spacing: normal;
  line-height: 1.16;
}

.product-description {
  max-width: 430px;
  margin: 24px 0 28px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.product-description p { margin: 0; }
.product-description p + p { margin-top: 12px; }

.app-store-download {
  display: inline-block;
  vertical-align: top;
}

.app-store-download img { display: block; width: auto; height: 56px; }

.product-features {
  display: grid;
  gap: 12px;
  margin: 32px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
}

.product-features li { padding-left: 4px; }

.app-gallery { display: flex; flex-direction: column; min-width: 0; }

.gallery-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgb(24 16 93 / 22%);
}

.app-gallery.is-enhanced .gallery-track { scrollbar-width: none; }
.app-gallery.is-enhanced .gallery-track::-webkit-scrollbar { display: none; }

.gallery-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.gallery-slide img { display: block; width: 100%; height: auto; }

.gallery-controls {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.gallery-controls[hidden] { display: none; }

.gallery-arrow, .gallery-playback {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 24px;
  cursor: pointer;
}

.gallery-playback { width: 68px; border-radius: 22px; font-size: 14px; }
.gallery-arrow:hover:not(:disabled), .gallery-playback:hover { background: rgb(255 255 255 / 14%); }
.gallery-arrow:disabled { opacity: 0.35; cursor: default; }
.gallery-position { min-width: 44px; margin: 0; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.announcement {
  flex: 1;
  min-height: 310px;
  padding-block: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.accent-line {
  width: 40px;
  height: 4px;
  background: var(--text);
  border-radius: 2px;
}

h1 {
  color: var(--text);
  margin: 24px 0 0;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1.12;
  text-wrap: balance;
}

.company {
  border-top: 1px solid var(--line);
  padding-top: 32px;
}

.company-name {
  margin: 0 0 28px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 32px 64px;
}

h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

address, .contact-link, .page-description {
  font-size: 15px;
  font-style: normal;
  line-height: 1.8;
  color: var(--muted);
}

.contact-link {
  color: var(--text);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.contact-link:hover { text-decoration-thickness: 2px; }

.contact-method { margin: 0 0 8px; }

.page-description { margin: 24px 0 0; }

.copyright {
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}

.trademark-credit { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }

@media (max-width: 860px) {
  .product { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
  .product h1 { font-size: clamp(40px, 6vw, 64px); }
}

@media (max-width: 640px) {
  .page { padding: 32px 24px; }
  .wordmark { font-size: 22px; }
  .announcement { min-height: 280px; padding-block: 72px; }
  .contact-grid { grid-template-columns: 1fr; }
  .site-header { gap: 16px; flex-wrap: wrap; }
  .header-contact { font-size: 13px; }
  .product { grid-template-columns: 1fr; gap: 40px; padding-block: 56px; }
  .product h1 { font-size: clamp(44px, 9vw, 60px); }
  .product-description { font-size: 17px; }
  .app-gallery { width: min(100%, 300px); justify-self: center; }
}