/* ═══════════════════════════════════════════════════════════════
   Collaborative Marketing — Apple-style Design System (apple-theme.css)
   Clean white, huge type, generous whitespace, pill buttons.
   Brand gradient (indigo → violet → pink) kept as the accent.
   Load AFTER common.css / page styles so tokens win.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Type + color tokens (Apple-ish) */
  --at-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', 'Inter', system-ui, sans-serif;
  --at-text: #1d1d1f;
  --at-text-2: #6e6e73;
  --at-text-3: #86868b;
  --at-bg: #ffffff;
  --at-bg-alt: #f5f5f7;
  --at-border: #d2d2d7;
  --at-link: #0066cc;

  /* Brand gradient accents (kept from existing brand) */
  --at-grad: linear-gradient(135deg, #6366f1, #8b5cf6);
  --at-grad-tri: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  --at-grad-soft: radial-gradient(ellipse at 30% 20%, rgba(99,102,241,.10), transparent 60%),
                  radial-gradient(ellipse at 80% 80%, rgba(139,92,246,.10), transparent 60%);
  --at-primary: #6366f1;

  /* Shape + motion */
  --at-radius-card: 18px;
  --at-radius-pill: 980px;
  --at-ease: cubic-bezier(.28,.11,.32,1);

  /* Remap legacy tokens so common.css-based pages inherit the look */
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-l: #f5f5f7;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --border: #d2d2d7;
  --bg: #ffffff;
  --surface: #f5f5f7;
  --radius: 18px;
}

body {
  font-family: var(--at-font);
  background: var(--at-bg);
  color: var(--at-text);
  line-height: 1.47;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Typography scale ──────────────────────────────────────── */
.at-display {                 /* hero headline */
  font-size: clamp(44px, 7vw, 80px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--at-text);
}
.at-headline {                /* section headline */
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.08;
  color: var(--at-text);
}
.at-title { font-size: 28px; font-weight: 600; letter-spacing: -.015em; }
.at-sub {                     /* section subcopy */
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 400;
  color: var(--at-text-2);
  line-height: 1.45;
}
.at-eyebrow {                 /* small gradient kicker above headlines */
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  background: var(--at-grad-tri);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-transform: none;
}
.at-gradient-text {           /* Apple-style gradient word inside a headline */
  background: var(--at-grad-tri);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Layout ────────────────────────────────────────────────── */
.at-section { padding: 120px 22px; background: var(--at-bg); }
.at-section--alt { background: var(--at-bg-alt); }
.at-container { max-width: 1080px; margin: 0 auto; }
.at-container--wide { max-width: 1280px; margin: 0 auto; }
.at-center { text-align: center; }

/* ── Nav (slim, frosted) ───────────────────────────────────── */
.at-nav {
  position: sticky; top: 0; z-index: 9999;
  height: 52px; display: flex; align-items: center;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.at-nav-inner {
  max-width: 1080px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px;
}
.at-nav a { color: var(--at-text); font-size: 14px; font-weight: 400; opacity: .88; transition: opacity .2s var(--at-ease); }
.at-nav a:hover { opacity: 1; }
/* Pill CTA inside the nav keeps white text (beats the .at-nav a color above) */
.at-nav a.at-btn--primary { color: #fff; font-weight: 500; opacity: 1; }
.at-nav-links { display: flex; gap: 32px; align-items: center; }

/* ── Buttons (pills) ───────────────────────────────────────── */
.at-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border-radius: var(--at-radius-pill);
  font-size: 17px; font-weight: 500; line-height: 1;
  border: none; cursor: pointer;
  transition: transform .2s var(--at-ease), box-shadow .2s var(--at-ease), opacity .2s;
  text-decoration: none;
}
.at-btn:hover { transform: scale(1.02); }
.at-btn:active { transform: scale(.98); }
.at-btn--primary { background: var(--at-grad); color: #fff; box-shadow: 0 4px 16px rgba(99,102,241,.28); }
.at-btn--primary:hover { box-shadow: 0 6px 24px rgba(99,102,241,.36); }
.at-btn--secondary { background: var(--at-bg-alt); color: var(--at-text); }
.at-btn--ghost { background: transparent; color: var(--at-link); padding: 12px 8px; }
.at-btn--ghost:hover { text-decoration: underline; transform: none; }
.at-btn--sm { padding: 8px 16px; font-size: 14px; }
.at-btn--lg { padding: 16px 32px; font-size: 19px; }

/* Apple-style text link with chevron */
.at-link { color: var(--at-link); font-size: 17px; }
.at-link::after { content: ' ›'; }
.at-link:hover { text-decoration: underline; }

/* ── Cards ─────────────────────────────────────────────────── */
.at-card {
  background: var(--at-bg-alt);
  border-radius: var(--at-radius-card);
  padding: 40px 32px;
  transition: transform .3s var(--at-ease), box-shadow .3s var(--at-ease);
}
.at-card--white { background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.at-card:hover { transform: translateY(-4px); }
.at-card h3 { font-size: 21px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 8px; }
.at-card p { font-size: 15px; color: var(--at-text-2); line-height: 1.5; }
.at-grid { display: grid; gap: 20px; }
.at-grid--2 { grid-template-columns: repeat(2, 1fr); }
.at-grid--3 { grid-template-columns: repeat(3, 1fr); }
.at-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .at-grid--3, .at-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .at-grid--2, .at-grid--3, .at-grid--4 { grid-template-columns: 1fr; } }

/* Gradient icon chip (keeps brand gradient alive on white) */
.at-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--at-grad); color: #fff; font-size: 26px;
  box-shadow: 0 4px 14px rgba(99,102,241,.25);
}

/* ── Hero helpers ──────────────────────────────────────────── */
.at-hero {
  padding: 140px 22px 120px; text-align: center;
  background: var(--at-bg);
  position: relative; overflow: hidden;
}
.at-hero--glow::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--at-grad-soft);
}
.at-hero .at-sub { max-width: 640px; margin: 20px auto 0; }
.at-hero-ctas { display: flex; gap: 16px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }

/* ── Forms ─────────────────────────────────────────────────── */
.at-input, .at-select, .at-textarea {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--at-border); border-radius: 12px;
  font-size: 17px; font-family: var(--at-font); color: var(--at-text);
  background: #fff; transition: border-color .2s, box-shadow .2s;
}
.at-input:focus, .at-select:focus, .at-textarea:focus {
  outline: none; border-color: var(--at-primary);
  box-shadow: 0 0 0 4px rgba(99,102,241,.14);
}
.at-label { font-size: 14px; font-weight: 500; color: var(--at-text); display: block; margin-bottom: 6px; }

/* ── Tables (legal/pricing detail) ─────────────────────────── */
.at-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.at-table th, .at-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--at-border); }
.at-table th { font-weight: 600; color: var(--at-text); }
.at-table td { color: var(--at-text-2); }

/* ── Footer (Apple-style compact) ──────────────────────────── */
.at-footer {
  background: var(--at-bg-alt);
  border-top: 1px solid var(--at-border);
  padding: 40px 22px; font-size: 12px; color: var(--at-text-2);
}
.at-footer-inner { max-width: 1080px; margin: 0 auto; }
.at-footer a { color: #424245; }
.at-footer a:hover { text-decoration: underline; }
.at-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--at-border); }
.at-footer-cols h4 { font-size: 12px; font-weight: 600; color: var(--at-text); margin-bottom: 10px; }
.at-footer-cols ul { list-style: none; margin: 0; padding: 0; }
.at-footer-cols li { margin-bottom: 8px; }
.at-footer-legal { padding-top: 18px; color: var(--at-text-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
@media (max-width: 740px) { .at-footer-cols { grid-template-columns: repeat(2, 1fr); } }

/* ── Motion niceties ───────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .at-fade { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--at-ease), transform .7s var(--at-ease); }
  .at-fade.at-in { opacity: 1; transform: none; }
}