/* ============================================================
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); }
/* secondary, de-emphasized direct-download line under the email form (middle path) */
.dl-secondary { color: var(--text-faint); font-size: 13.5px; margin-top: var(--space-5); }
.dl-secondary a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 2px; }
.ml-embedded { margin: var(--space-5) auto 0; max-width: 480px; }

/* ---------- 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; }
}

/* ============================================================
MailerLite embedded "Newsletter" form — brand skin
Scoped under #get with deep selectors so it out-specifies
MailerLite's own injected styles (which use the form-ID + !important).
MailerLite renders the form INLINE (no iframe), so CSS reaches it.
Brand: cream #F3ECDD inputs, navy #0c1124 text, indigo #6C5CE7 button.
Verified live on www.claudedicted.com/myos before commit.
============================================================ */
/* hide MailerLite's own heading + description — the section already has eyebrow + h2 + sub */
#get .ml-form-embedContent { display: none !important; }

/* strip the default white card so the form sits on the navy band */
#get .ml-form-embedContainer,
#get .ml-form-embedContainer .ml-form-embedWrapper,
#get .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 auto !important;
max-width: 480px !important;
width: 100% !important;
}

/* inputs — cream fill, navy text */
#get .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent .ml-form-fieldRow input.form-control {
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;
background-color: #F3ECDD !important;
color: #0c1124 !important;
border: 1px solid rgba(12, 17, 36, 0.18) !important;
border-radius: 12px !important;
padding: 13px 16px !important;
margin: 0 !important;
box-shadow: none !important;
height: auto !important;
}
#get .ml-form-embedContainer .ml-form-fieldRow { margin: 0 0 12px 0 !important; padding: 0 !important; width: 100% !important; }
#get .ml-form-embedContainer input.form-control::placeholder { color: rgba(12, 17, 36, 0.5) !important; }
#get .ml-form-embedContainer input.form-control:focus {
border-color: #6C5CE7 !important;
box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.35) !important;
}

/* submit button — indigo, full width */
#get .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary,
#get .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading {
font-family: var(--font-sans, Inter, system-ui, sans-serif) !important;
font-size: 16px !important;
font-weight: 700 !important;
width: 100% !important;
color: #F3ECDD !important;
background: #6C5CE7 !important;
background-color: #6C5CE7 !important;
border: none !important;
border-radius: 12px !important;
padding: 14px 20px !important;
margin: 0 !important;
box-shadow: 0 6px 18px rgba(108, 92, 231, 0.35) !important;
cursor: pointer !important;
height: auto !important;
}
#get .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover {
background-color: #7C6FF0 !important;
}
#get .ml-form-embedContainer .ml-form-embedSubmit { margin-top: 4px !important; padding: 0 !important; }

/* success state text → cream */
#get .ml-form-successBody .ml-form-successContent h4,
#get .ml-form-successBody .ml-form-successContent p { color: var(--text-primary, #F3ECDD) !important; }

/* ---------- Gate the kit behind the email form ----------
Hide the direct PDF/ZIP download buttons so the form is the only
on-page path. (The files stay at public URLs because the
MailerLite "Newsletter -> MYOS kit" email links to them.) */
#get .dl-row, .subscribe .dl-row, .dl-secondary { display: none !important; }