/* ============================================================
   Claudedicted — site.css
   App layout layer for the marketing pages. Built entirely on the
   design tokens (tokens.css) and composed with the components
   (components.css). This file only handles page-level patterns:
   nav, hero, sections, grids, feature panels, footer.
   Load order in each page: tokens.css -> components.css -> site.css
   ============================================================ */

/* ---------- NAV ---------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  flex-wrap: wrap;
}
.nav__links { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.nav__links a { color: var(--text-muted); font-size: 15px; font-weight: var(--fw-semibold); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.nav__links a:hover { color: var(--text-primary); }
.nav__links a.is-active { color: var(--text-primary); }

/* ---------- HERO ---------- */
.hero { text-align: center; padding: var(--space-9) 0 var(--space-8); }
.hero .cd-mark { margin: 0 auto var(--space-6); }
.hero .cd-display { max-width: 16ch; margin: 0 auto; }
.hero__promise { color: var(--text-muted); font-size: clamp(17px, 2.2vw, 20px); max-width: 60ch; margin: var(--space-5) auto 0; line-height: 1.6; }
.hero__bridge { color: var(--text-primary); font-size: clamp(15px, 1.8vw, 17px); max-width: 60ch; margin: var(--space-5) auto 0; line-height: 1.6; padding-left: var(--space-4); border-left: 3px solid var(--accent, var(--text-primary)); text-align: left; }
.hero__cta { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-7); }
.badges { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }

/* ---------- SECTIONS ---------- */
.section { padding: var(--space-8) 0; border-top: 1px solid var(--border-hairline); }
.section--flush { border-top: none; }
.section--narrow { max-width: 760px; margin: 0 auto; }
.section__sub { color: var(--text-muted); font-size: 16px; max-width: 60ch; margin: var(--space-2) 0 0; line-height: 1.6; }
.stack-sm > * + * { margin-top: var(--space-3); }

/* ---------- GRID UTILITIES ---------- */
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

/* ---------- FEATURE PANEL (indigo-glass) ---------- */
.panel {
  background: var(--gradient-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-card-lg);
  padding: var(--space-7) var(--space-7);
}
.panel--center { text-align: center; }
.panel .cd-body { color: var(--text-body); }

/* ---------- RULE / HIGHLIGHT BAND ---------- */
.rule {
  background: rgba(124, 111, 240, 0.12);
  border: 1px solid rgba(154, 141, 255, 0.28);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-7);
}

/* ---------- MYOS FOLDER ROW ---------- */
.folder { display: flex; gap: var(--space-4); align-items: flex-start; }
.folder__num {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 2px solid var(--accent);
  border-radius: var(--radius-chip);
  box-shadow: 0 0 14px rgba(124, 111, 240, 0.4);
  color: var(--accent-bright);
  font-weight: var(--fw-extrabold);
  font-size: 18px;
}
.folder h3 { margin-bottom: var(--space-1); }
.folder__what { color: var(--text-muted); font-size: 15px; line-height: 1.55; }
.code-chip {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: 13px; font-weight: var(--fw-semibold);
  color: var(--accent-bright);
  background: rgba(124, 111, 240, 0.12);
  border: 1px solid rgba(154, 141, 255, 0.3);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

/* ---------- IN / OUT ---------- */
.io { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.io small { display: block; margin-top: var(--space-4); color: var(--text-faint); font-size: 13px; }

/* ---------- SUBSCRIBE / GET MYOS (deep band) ---------- */
.subscribe {
  text-align: center;
  background: var(--gradient-card);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-card-lg);
  padding: var(--space-8) var(--space-7);
}
.subscribe__form { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; max-width: 480px; margin: var(--space-5) auto 0; }
.subscribe__form .cd-input { flex: 1 1 220px; }
.dl-row { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
.dl-hidden { display: none; }
.fineprint { color: var(--text-faint); font-size: 13px; margin-top: var(--space-4); }

/* ---------- CONTACT FORM ---------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); text-align: left; }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-secondary); }
.field .cd-input { width: 100%; }
textarea.cd-input { min-height: 140px; resize: vertical; border-radius: var(--radius-panel); }

/* ---------- FOOTER ---------- */
.footer { margin-top: var(--space-8); padding: var(--space-7) 0 var(--space-6); border-top: 1px solid var(--border-hairline); text-align: center; }
.footer .cd-logo { margin-bottom: var(--space-4); }
.footer__links { display: flex; gap: var(--space-5); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
.footer__links a { color: var(--text-muted); font-size: 14px; text-decoration: none; }
.footer__links a:hover { color: var(--text-primary); }
.footer__fine { color: var(--text-faint); font-size: 13px; margin: var(--space-1) 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px) {
  .grid--3, .grid--4 { grid-template-columns: 1fr 1fr; }
  .io { grid-template-columns: 1fr; }
  .nav { justify-content: center; }
}
@media (max-width: 480px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .subscribe__form { flex-direction: column; }
}

/* ============================================================
   SendX embedded "Newsletter" form — brand skin
   Scoped under #get so it out-specifies SendX's injected styles.
   SendX renders its own DOM from cdn.sendx.io against the live
   domain, so the exact markup can't be rendered locally — VERIFY
   the look on the live site after deploy and tighten if needed.
   Brand: cream #F3ECDD inputs, navy #0c1124 text, indigo button.
   ============================================================ */
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 {
  max-width: 480px;
  margin: var(--space-5) auto 0;
  font-family: var(--font-sans, Inter, system-ui, sans-serif) !important;
}
/* SendX wrapper / form containers */
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 form,
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 .sendx-subscribe-form,
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 480px !important;
}
/* Inputs (first name + email) */
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 input[type="text"],
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 input[type="email"],
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 input:not([type="submit"]):not([type="button"]) {
  font-family: var(--font-sans, Inter, system-ui, sans-serif) !important;
  font-size: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #F3ECDD !important;
  color: #0c1124 !important;
  border: 1px solid rgba(12, 17, 36, 0.18) !important;
  border-radius: var(--radius-panel, 12px) !important;
  padding: 13px 16px !important;
  margin: 0 0 12px 0 !important;
  box-shadow: none !important;
}
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 input::placeholder {
  color: rgba(12, 17, 36, 0.5) !important;
}
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 input:focus {
  outline: none !important;
  border-color: #6C5CE7 !important;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.35) !important;
}
/* Labels — keep light on the dark band, or hide if redundant */
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 label {
  color: var(--text-secondary, #e8e6f5) !important;
  font-family: var(--font-sans, Inter, system-ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: var(--fw-semibold, 600) !important;
}
/* Submit button — indigo, full-width, "Join the newsletter" */
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 button,
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 input[type="submit"],
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 input[type="button"] {
  font-family: var(--font-sans, Inter, system-ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: var(--fw-bold, 700) !important;
  width: 100% !important;
  cursor: pointer !important;
  color: #F3ECDD !important;
  background: #6C5CE7 !important;
  border: none !important;
  border-radius: var(--radius-panel, 12px) !important;
  padding: 14px 20px !important;
  margin: 2px 0 0 0 !important;
  box-shadow: 0 6px 18px rgba(108, 92, 231, 0.35) !important;
  transition: transform .12s ease, background .12s ease !important;
}
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 button:hover,
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 input[type="submit"]:hover {
  background: #7C6FF0 !important;
  transform: translateY(-1px) !important;
}
/* Hide SendX branding / "Powered by" */
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 a[href*="sendx"],
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 [class*="powered"],
#get .sendx-form-ITKYq7ZHaW2ejfLcSgIgZ1 [class*="branding"] {
  display: none !important;
}