/*
 * apps/marketing/assets/inline-invite.css
 *
 * Extracted from invite.html (ITER4-CSP-marketing) so the page-level CSP
 * can drop 'unsafe-inline' from style-src. Behaviour identical to the
 * inline <style> block that previously lived in invite.html.
 */

:root {
  --bg: #FAFAFA;
  --bg-card: #FFFFFF;
  --text-primary: #1A1A1A;
  --text-secondary: #5F5F5F;
  --cta: #2E7D32;
  --cta-text: #FFFFFF;
  --gold: #C9A961;
  --accent-ai: #F9A825;
  --accent-ai-bg: #FFFBE6;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100dvh;
  line-height: 1.6;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  padding: 32px 20px 64px;
}
.container {
  max-width: 420px;
  margin: 0 auto;
}

/* Logo */
.logo-card {
  background: var(--bg-card);
  width: 120px;
  height: 120px;
  margin: 0 auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.logo-card svg { width: 100%; height: 100%; }

/* Referrer card */
.referrer-card {
  background: var(--accent-ai-bg);
  border-left: 4px solid var(--accent-ai);
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  margin-bottom: 32px;
  color: #5F4500;
}
.referrer-card .label {
  font-size: 14px;
  color: var(--accent-ai);
  font-weight: 600;
  margin-bottom: 4px;
}
.referrer-card .name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.referrer-card .text {
  font-size: 16px;
  margin-top: 8px;
  color: var(--text-secondary);
}

/* Headline */
h1 {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 18px;
  margin-bottom: 32px;
}

/* Benefits */
.benefits {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 32px;
}
.benefit-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}
.benefit-row:last-child { margin-bottom: 0; }
.benefit-row .icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.benefit-row .text {
  font-size: 18px;
  color: var(--text-primary);
}
.benefit-row .text strong {
  font-weight: 600;
}
.benefit-row .sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* CTA */
.cta-zone {
  margin-top: 40px;
  padding: 0 8px;
}
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  background: var(--cta);
  color: var(--cta-text);
  border: 0;
  border-radius: 9999px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(46,125,50,0.20);
  text-decoration: none;
  transition: transform 0.15s ease-out;
}
.cta:active { transform: translateY(2px); }
.cta-caption {
  margin-top: 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}
.cta-caption a { color: var(--cta); }

/* Footer */
footer {
  margin-top: 48px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
}
footer a { color: var(--cta); margin: 0 4px; }

/* Loading state */
[data-state="loading"] .name { opacity: 0.3; }
[data-state="invalid"] .referrer-card { display: none; }