/* Component layer.
   The product and legal pages carry markup from the original Replit site. Rather
   than rewrite that content (the legal text is referenced by App Store review),
   these rules re-skin the existing class names onto the tokens in style.css. */

/* ---------- product page hero ---------- */
.product-hero { padding: clamp(52px, 8vw, 96px) 0 clamp(36px, 5vw, 60px); position: relative; }
.product-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 400px at 22% -14%, var(--accent-soft), transparent 66%);
}
.hero-content { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.app-title-container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.app-icon, .app-icon-emoji, .app-icon-fallback {
  width: 68px; height: 68px; flex: none; border-radius: 16px;
  display: grid; place-items: center; font-size: 2rem; line-height: 1;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--border); box-shadow: var(--shadow-1); overflow: hidden;
}
.app-icon img, .app-icon-fallback img { width: 100%; height: 100%; object-fit: cover; }
.hero-tagline, .subtitle {
  font-size: clamp(1rem, .94rem + .35vw, 1.15rem); color: var(--text-muted); max-width: 58ch;
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 10px; }
.btn-outline { border: 1px solid var(--border-strong); color: var(--text);
  display: inline-flex; align-items: center; gap: 7px; font-size: .94rem; font-weight: 550;
  text-decoration: none; padding: 11px 20px; border-radius: 999px; transition: background .15s; }
.btn-outline:hover { background: var(--bg-sunken); }

/* ---------- generic content sections ---------- */
.content-section { padding: clamp(42px, 6vw, 76px) 0; }
.content-section.alt { background: var(--bg-sunken); border-block: 1px solid var(--border); }
.section-title { margin-bottom: 10px; }
.section-subtitle { color: var(--text-muted); max-width: 58ch; margin-bottom: 30px; }

/* ---------- card grids ---------- */
.features-grid, .benefits-grid, .export-grid, .models-grid,
.pro-features-grid, .contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 15px;
}
.feature-card, .benefit-item, .export-card, .model-card, .pro-feature-item, .contact-card {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.feature-card:hover, .export-card:hover, .model-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.content-section.alt .feature-card, .content-section.alt .benefit-item,
.content-section.alt .model-card { background: var(--bg-raised); }
.feature-card h3, .benefit-item h3, .export-card h3, .model-card h3,
.pro-feature-item h3, .contact-card h3 { margin-bottom: 7px; }
.feature-card p, .benefit-item p, .export-card p, .model-card p,
.pro-feature-item p, .contact-card p { color: var(--text-muted); font-size: .92rem; }
.model-card.grok { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

.feature-icon, .contact-icon, .icon, .download-icon {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 13px;
  display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
  background: var(--accent-soft); color: var(--accent); flex: none;
}
.feature-icon svg, .contact-icon svg, .icon svg { width: 20px; height: 20px; }
.contact-card a { color: var(--accent); text-decoration: none; }
.contact-card a:hover { text-decoration: underline; }

/* ---------- pro / paywall block ---------- */
.pro-section { padding: clamp(42px, 6vw, 76px) 0; background: var(--bg-sunken); border-block: 1px solid var(--border); }
.pro-inner { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 34px; align-items: center; }
.pro-screenshot img { border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-2); }
.pro-badge {
  display: inline-block; background: var(--accent); color: var(--accent-text);
  font-size: .72rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; margin-bottom: 13px;
}
.pro-price { font-size: 1.85rem; font-weight: 680; letter-spacing: -0.025em; margin-top: 14px; }
.pro-price-note { color: var(--text-faint); font-size: .86rem; margin-top: 3px; }
.pro-features-grid { margin-top: 26px; }
.pro-feature-item { display: flex; flex-direction: column; }
@media (max-width: 760px) { .pro-inner { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- screenshots ---------- */
.screenshots-section { padding: clamp(36px, 5vw, 64px) 0; }
.screenshots-grid {
  display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.screenshot-item { flex: none; width: 216px; scroll-snap-align: start; }
.screenshot-img, .screenshot-item img {
  width: 100%; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow-1);
}
.screenshot-caption { color: var(--text-faint); font-size: .84rem; margin-top: 9px; text-align: center; }

/* ---------- download / store badges ---------- */
.download-section { padding: clamp(44px, 6vw, 78px) 0; text-align: center; }
.download-section h2 { margin-bottom: 10px; }
.download-section > .container > p { color: var(--text-muted); max-width: 52ch; margin: 0 auto; }
.download-icons { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; align-items: center; margin-top: 26px; }
.download-icon-link { display: inline-flex; transition: transform .15s, opacity .15s; }
.download-icon-link:hover { transform: translateY(-2px); opacity: .88; }
.download-icon-link img { height: 44px; width: auto; }
.download-icon { width: auto; height: auto; background: none; margin: 0; }

.promotion-banner {
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--radius); padding: 15px 20px; margin-top: 24px;
  color: var(--text); font-size: .93rem;
}

/* ---------- stats ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 38px; margin-top: 26px; }
.stat { display: flex; flex-direction: column; }
.stat-number { font-size: 1.9rem; font-weight: 680; letter-spacing: -0.03em; color: var(--accent); line-height: 1.1; }
.stat-label { font-size: .84rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .07em; }

.about-content { max-width: 68ch; }
.about-content p { color: var(--text-muted); margin-top: 12px; }

/* ---------- legal / delete-account pages ---------- */
.content-wrapper { padding: clamp(40px, 6vw, 72px) 0; }
.delete-container, .terms-container, .privacy-content, .terms-content { max-width: 74ch; margin-inline: auto; }
.page-header { margin-bottom: 34px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.page-header h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.page-header .subtitle { margin-top: 12px; }
.last-updated { color: var(--text-faint); font-size: .86rem; margin-top: 8px; }

.delete-container .section, .privacy-section, .terms-content .section {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; margin-bottom: 17px; box-shadow: var(--shadow-1);
}
.delete-container .section h2, .privacy-section h2 {
  font-size: 1.16rem; display: flex; align-items: center; gap: 9px; margin-bottom: 13px;
}
.delete-container .section ul, .privacy-section ul { padding-left: 1.25em; color: var(--text-muted); }
.delete-container .section li, .privacy-section li { margin-bottom: .4em; }
.delete-container .section p, .privacy-section p { color: var(--text-muted); }
.delete-container .section strong, .privacy-section strong { color: var(--text); }
.delete-container .section a, .privacy-section a { color: var(--accent); }

.section.warning { border-left: 3px solid var(--accent); }
.highlight-box {
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: var(--radius-s); padding: 14px 17px; margin-top: 15px;
}
.highlight-box p { color: var(--text); font-size: .92rem; }
.contact-info a { color: var(--accent); }
.emoji { display: inline-flex; color: var(--accent); }
.emoji svg { width: 19px; height: 19px; }
.dancing-text { display: inline-block; }

/* ---------- product page additions ---------- */
.product-hero .lede { font-size: clamp(1rem, .94rem + .35vw, 1.13rem); color: var(--text-muted); max-width: 60ch; }
.platforms { color: var(--text-faint); font-size: .85rem; letter-spacing: .01em; }
.app-title-container h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem); }
.hero-tagline { margin-top: 6px; }

.cross-link {
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-1); max-width: 62ch;
}
.cross-link h3 { margin-bottom: 7px; }
.cross-link p { color: var(--text-muted); font-size: .93rem; margin-bottom: 16px; }