/* ============================================================
   DRAFT KIT — shim for standalone HTML drafts in drafts/.

   Drafts link REAL theme CSS, in this order:
     1. https://fonts.googleapis.com Plus Jakarta Sans
     2. _kit/tokens.css        (design-system bridge; empty for now)
     3. ../airlock-child/child.css   (canonical tokens + type + airbtn)
     4. this file              (what a standalone file lacks: section
                                wrappers, air--dark cascade, resets)
     5. ../airlock-child/modules/**  module.css for each module used

   This file must contain ONLY what HubSpot's page chrome provides
   and child.css does not: keep it minimal. If a style belongs to a
   module, put it in that module's module.css (as a variant).
   ============================================================ */

/* -- minimal reset (boilerplate main.css equivalent bits) -- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: "Plus Jakarta Sans", sans-serif; color: var(--air-blue-dark, #151756); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
/* boilerplate elements/_typography.css — drafts must match, or paragraph
   and heading rhythm reads tighter here than it will on the live page */
h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0 0 1.4rem; }
body { line-height: 1.4; overflow-wrap: break-word; }

/* -- dnd section wrappers (mirrors child.css .air-section--* + dnd padding) -- */
.air-section { padding: 90px 32px; }
.air-section--solid-white { background-color: #fff; }
.air-section--solid-grey { background-color: var(--air-grey, #F4F4F9); }
.air-section--solid-lavender { background-color: var(--air-sky, #E8F3FF); }
.air-section--solid-dark { background-color: var(--air-blue-dark, #151756); }
.air-section--gradient-dark { background: var(--air-gradient-dark, linear-gradient(0deg, #141756 0%, #1C207E 50.48%, #2E329F 100%)); }
.air-section--gradient-lite { background: var(--air-gradient-lite, linear-gradient(180deg, #8A8AC11A 0%, #FFF 101px)); }
.air-section--gradient-lite-purple { background: var(--air-gradient-lite, linear-gradient(180deg, #E8F3FF 0%, #FFFFFF 100%)); }

/* -- air--dark cascade (mirrors what page chrome + main.css establish) -- */
.air--dark { color: #fff; }
.air--dark h1, .air--dark h2, .air--dark h3 { color: #fff; }
.air--dark .air-eyebrow { color: var(--air-pear, #D6DD21); }
.air--dark a:not(.airbtn) { color: var(--air-pear, #D6DD21); }

/* -- content width helper (page templates provide containers) -- */
.wrap { max-width: 1240px; margin: 0 auto; }

/* -- draft-only annotation visibility (toggle by adding .show-annotations to body) -- */
.show-annotations section { position: relative; outline: 1px dashed rgba(57, 108, 227, .4); }

/* -- dnd column emulation (drafts only; HubSpot uses dnd_column widths) -- */
.draft-cols { display: grid; gap: 48px; align-items: start; }
.draft-cols--5-7 { grid-template-columns: 5fr 7fr; }
@media (max-width: 960px) { .draft-cols--5-7 { grid-template-columns: 1fr; } }
.draft-cols--6-6 { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .draft-cols--6-6 { grid-template-columns: 1fr; } }

/* -- draft-only form mock (AL - Form's CSS is inline scope_css; approximate) -- */
.draft-form-mock .draft-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.draft-form-mock label { font-size: 14px; font-weight: 700; color: #141756; }
.draft-form-mock label span { color: #e24c4b; }
.draft-form-mock input { font-size: 15px; padding: 15px; border: 1px solid #cbd6e2; border-radius: 20px; background: #fff; width: 100%; }
.draft-form-mock .airbtn { border: 0; cursor: pointer; }