/* Style C, "Spark": bold and bright, friendly and energetic.
   Font: Nunito (headings 900, body 400), self-hosted.
   Palette: Sky & Sunshine. Colours are the --p-* variables below; change them here to recolour the whole site. */
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-VF.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-Italic-VF.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
/* ---------- Colour palette: Sky & Sunshine ---------- */
:root { --p-cream: #fbfdff; --p-ink: #102a54; --p-lead: #1d3a6b; --p-muted: #364b73; --p-hero: #8ccfff; --p-blob: #ffe066; --p-blob-opacity: 1; --p-btn: #1d5fd1; --p-btn-hover: #174bb0; --p-brand: #f0a500; --p-link: #1a55bd; --p-highlight: #ffe066; --p-soft1: #fff7d1; --p-soft2: #e2f1ff; --p-soft3: #fff0b8; --p-soft4: #d6ebff; --p-step1: #ffe066; --p-step2: #8ccfff; --p-step3: #ffd166; --p-step4: #b8e0ff; --p-deep: #102a54; --p-deep2: #0a1c3b; --p-deep-card: #1b3d75; --p-on-deep-head: #ffe066; --p-on-deep: #e6efff; --p-on-deep-muted: #bfcdea; --p-on-deep-link: #ffe066; --p-focus: #f0a500; }

:root {
  --cycle-label: 18px;
  --font-head: "Nunito", system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif; --head-weight: 900; --h1-track: -0.015em;
  --bg: var(--p-cream); --surface: #ffffff; --ink: var(--p-ink); --head-ink: var(--p-ink); --lead-ink: var(--p-lead); --muted: var(--p-muted);
  --brand: var(--p-brand); --brand-strong: var(--p-btn); --brand-text: var(--p-ink); --link: var(--p-link); --focus: var(--p-focus);
  --line: var(--p-ink); --line-strong: var(--p-ink); --radius: 18px; --photo-radius: 28px;
  --btn-bg: var(--p-btn); --btn-bg-hover: var(--p-btn-hover); --btn-ink: #ffffff; --btn-radius: 999px; --btn-shadow: 3px 3px 0 var(--p-ink);
  --header-bg: var(--p-cream); --hero-bg: var(--p-hero); --problem-bg: var(--p-cream); --method-bg: var(--p-soft3); --get-bg: var(--p-cream); --weeks-bg: var(--p-soft2); --week-label-bg: var(--p-highlight); --fit-bg: var(--p-soft4); --about-bg: var(--p-cream); --faq-bg: var(--p-soft1);
  --callout-ink: var(--p-ink); --underneath-bg: #ffffff;
  --ph-bg: #ffffff; --ph-line: var(--p-ink);
  --arc: var(--p-ink); --step-num: var(--p-ink); --step-ink: var(--p-ink);
  --step1: var(--p-step1); --step2: var(--p-step2); --step3: var(--p-step3); --step4: var(--p-step4);
  --step1-edge: var(--p-ink); --step2-edge: var(--p-ink); --step3-edge: var(--p-ink); --step4-edge: var(--p-ink);
  --band: var(--p-deep); --band-ink: #ffffff;
  --yes-bg: #ffffff; --yes-line: var(--p-ink); --no-bg: #ffffff; --no-line: var(--p-ink); --card-shadow: 5px 5px 0 var(--p-ink);
  --signup-bg: var(--p-deep); --signup-ink: var(--p-on-deep); --signup-head: var(--p-on-deep-head); --signup-muted: var(--p-on-deep-muted); --signup-link: var(--p-on-deep-link);
  --footer-bg: var(--p-deep2); --footer-ink: var(--p-on-deep-muted); --footer-link: var(--p-on-deep-link);
}

/* ---------- Base layout (shared by all three style options) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1.125rem; line-height: 1.65; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); color: var(--head-ink); line-height: 1.15; margin: 0 0 .6em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: var(--h1-track, -0.01em); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
strong { font-weight: 700; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.wrap { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2.5rem); }
section[id] { scroll-margin-top: 4.75rem; }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; background: var(--ink); color: var(--bg); padding: .6rem 1rem; z-index: 10; border-radius: 6px; }
.skip-link:focus { top: 1rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 5; background: var(--header-bg); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--brand-text); font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.3rem; }
.brand-name, .header-cta { white-space: nowrap; }
.brand-mark { width: 2rem; height: 2rem; color: var(--brand); flex: none; }
.brand-logo { display: block; height: 56px; width: auto; flex: none; }
.header-inner { padding-block: .375rem; }

/* Buttons */
.btn { display: inline-block; font: inherit; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; border: 0; background: var(--btn-bg); color: var(--btn-ink); padding: .85rem 1.5rem; border-radius: var(--btn-radius); box-shadow: var(--btn-shadow, none); transition: transform .15s ease, background .15s ease; }
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); }
.btn[disabled] { cursor: not-allowed; transform: none; }
.btn-small { padding: .55rem 1rem; font-size: 1rem; }
.btn-block { display: block; width: 100%; }

/* Hero */
.hero { background: var(--hero-bg); padding: clamp(2.5rem, 6vw, 5rem) 0; }
.hero-inner { display: grid; grid-template-columns: minmax(0, 40rem); align-items: center; }
.hero-art { display: none; } /* decorative; shown only by the style (Spark, wide screens) */
.hero-cta { margin-top: 1.75rem; }
.hero-cta .small-print { margin-top: .9rem; }
.btn-large { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 1rem 2.25rem; font-size: 1.25rem; line-height: 1.2; }
.lead { font-size: 1.22rem; color: var(--lead-ink); }
.small-print, .consent { font-size: .95rem; color: var(--muted); margin-top: .8rem; }
.consent + .small-print { margin-top: -.4rem; }

/* Form placeholder (preview only) */
.form-placeholder { border: 2px dashed var(--ph-line); background: var(--ph-bg); border-radius: var(--radius); padding: 1.5rem; text-align: center; }
.ph-title { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.35rem; color: var(--head-ink); margin-bottom: .35rem; }
.ph-note { font-size: 1rem; color: var(--muted); }

/* Problem */
.problem { background: var(--problem-bg); }
.problem p { font-size: 1.2rem; }
.callout { font-family: var(--font-head); font-weight: var(--head-weight); font-size: clamp(1.4rem, 2.6vw, 1.8rem) !important; line-height: 1.3; color: var(--callout-ink); margin: 1.5rem 0 0; }

/* Method */
.method { background: var(--method-bg); }
.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.method-figure { margin: 0; }
.cycle { display: block; width: 100%; max-width: 520px; margin-inline: auto; font-family: var(--font-body); text-rendering: geometricPrecision; }
.cycle-ring { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 3 7; }
.cycle-arcs path { fill: none; stroke: var(--arc); stroke-width: 4; stroke-linecap: round; }
.cycle-arrowhead { fill: var(--arc); }
.cycle-node circle { stroke-width: 3; }
.n1 circle { fill: var(--step1); stroke: var(--step1-edge); }
.n2 circle { fill: var(--step2); stroke: var(--step2-edge); }
.n3 circle { fill: var(--step3); stroke: var(--step3-edge); }
.n4 circle { fill: var(--step4); stroke: var(--step4-edge); }
.cycle-num { text-anchor: middle; font-size: 15px; font-weight: 700; fill: var(--step-num); }
.cycle-label { text-anchor: middle; font-family: var(--font-head); font-weight: var(--head-weight); font-size: var(--cycle-label, 21px); fill: var(--step-ink); }
.cycle-band { fill: var(--band); }
.cycle-band-title { text-anchor: middle; font-size: 19px; font-weight: 700; fill: var(--band-ink); }
.cycle-band-text { text-anchor: middle; font-size: 18px; fill: var(--band-ink); }
.steps { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.steps li { margin-bottom: .6rem; padding-left: .25rem; }
.steps li::marker { font-weight: 700; color: var(--brand-strong); }
.underneath { background: var(--underneath-bg); border-left: 4px solid var(--brand); padding: .8rem 1rem; border-radius: 0 var(--radius) var(--radius) 0; }

/* What you get */
/* The 8 weeks */
.weeks-section { background: var(--weeks-bg, var(--bg)); }
.weeks-intro { font-size: 1.2rem; color: var(--lead-ink); max-width: 46rem; margin-bottom: 2rem; }
.weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.week { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.25rem 1.1rem; box-shadow: var(--card-shadow, none); display: flex; flex-direction: column; align-items: flex-start; }
.week-label { display: inline-block; font-size: .85rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--head-ink); background: var(--week-label-bg, transparent); border-radius: 999px; padding: .15rem .65rem; margin-bottom: .6rem; }
.week-title { font-size: 1.15rem; margin-bottom: .4rem; }
.week p { margin: 0; font-size: 1rem; }

.get { background: var(--get-bg); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.4rem; box-shadow: var(--card-shadow, none); }
.card strong { color: var(--head-ink); }

/* Fit */
.fit { background: var(--fit-bg); }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.fit-col { border-radius: var(--radius); padding: 1.5rem 1.6rem; }
.fit-yes { background: var(--yes-bg); border: 1px solid var(--yes-line); }
.fit-no { background: var(--no-bg); border: 1px solid var(--no-line); }
.fit-col ul { margin: 0; padding-left: 1.2rem; }
.fit-col li { margin-bottom: .45rem; }

/* About */
.about { background: var(--about-bg); }
.about-grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.photo-placeholder, .photo { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--photo-radius); }
.photo-placeholder { display: grid; place-items: center; text-align: center; border: 2px dashed var(--ph-line); background: var(--ph-bg); color: var(--muted); font-weight: 700; }
.photo { object-fit: cover; }
.about-text p { font-size: 1.2rem; }

/* FAQ */
.faq { background: var(--faq-bg); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2.5rem; }
.faq-item { border-top: 2px solid var(--line); padding-top: 1rem; }
.faq-item h3 { margin-bottom: .35rem; }

/* Sign-up */
.signup { background: var(--signup-bg); color: var(--signup-ink); text-align: center; }
.signup h2 { color: var(--signup-head); }
.signup .small-print, .signup .consent { color: var(--signup-muted); }
.signup a { color: var(--signup-link); }
.signup .form-placeholder { text-align: center; margin-top: 1.25rem; max-width: 520px; margin-inline: auto; }

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); padding: 1.75rem 0; font-size: 1rem; }
.site-footer a { color: var(--footer-link); }
.footer-inner p { margin: 0; }

/* Items for Mike to confirm (preview only; remove before launch) */
.confirm { display: inline-block; font-family: var(--font-body); font-size: .78em; font-weight: 700; line-height: 1.3; background: #fff3b0; color: #5c4400; border: 1px solid #e0c24a; border-radius: 4px; padding: 0 .3em; vertical-align: .08em; }

/* Responsive */
/* Five "What you get" cards: 3 + 2 on wide screens, rows filled edge to edge */
@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(6, 1fr); }
  .cards .card { grid-column: span 2; }
  .cards .card:nth-child(4), .cards .card:nth-child(5) { grid-column: span 3; }
}
@media (min-width: 701px) and (max-width: 999px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 1099px) {
  .weeks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-inner, .method-grid, .about-grid { grid-template-columns: 1fr; }
  .about-grid .photo-placeholder, .about-grid .photo { max-width: 280px; }
}
@media (max-width: 700px) {
  body { font-size: 1.0625rem; }
  .fit-grid, .faq-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .weeks { grid-template-columns: 1fr; }
  .header-inner { min-height: 3.75rem; gap: .5rem; }
  .brand { font-size: 1.05rem; gap: .4rem; }
  .brand-mark { width: 1.5rem; height: 1.5rem; }
  .brand-logo { height: 44px; }
  .header-cta { padding: .45rem .75rem; font-size: .9rem; min-height: 44px; display: inline-flex; align-items: center; }
  .small-print, .consent { font-size: 1rem; }
  .hero-cta .btn-large { display: flex; width: 100%; }
  .site-footer a { display: inline-block; padding: .55rem 0; }
}
@media (max-width: 600px) {
  /* the method graphic shrinks on phones, so its smaller texts get a little bigger to stay readable
     (20px keeps "Rehearse" comfortably inside its circle) */
  .cycle-label { font-size: 20px; }
  .cycle-num { font-size: 18px; }
  .cycle-band-title { font-size: 21px; }
  .cycle-band-text { font-size: 20px; }
}
@media (max-width: 380px) { .brand { font-size: .95rem; } .header-cta { font-size: .85rem; padding: .4rem .6rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* ---------- Spark style details ---------- */
.site-header { border-bottom: 3px solid var(--p-ink); }
.brand-mark { color: var(--p-brand); }
.hero { border-bottom: 3px solid var(--p-ink); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 340px; height: 340px; right: -110px; top: -120px; border-radius: 50%; background: var(--p-blob); opacity: var(--p-blob-opacity); }
.hero-inner { position: relative; }
@media (min-width: 901px) {
  .hero { min-height: 30rem; display: flex; align-items: center; }
  .hero > .wrap { width: min(1120px, 100% - 2.5rem); }
  /* the small corner sun is replaced by the bigger "road to the sun" art (echoes the logo) */
  .hero::before { display: none; }
  .hero-art { display: block; position: absolute; width: clamp(380px, 44vw, 600px); height: auto; right: max(-60px, calc((100vw - 1120px) / 2 - 60px)); top: 50%; transform: translateY(-50%); }
}
.hero-art-sun { fill: var(--p-blob); stroke: var(--p-ink); stroke-width: 5; }
.hero-art-shadow { fill: var(--p-ink); }
.hero-art-road { fill: none; stroke: var(--p-ink); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 26 20; }
.hero-art-dot { fill: var(--p-ink); }
.hero .small-print, .hero .consent { color: var(--p-lead); }
.hero-form .form-placeholder { border: 3px dashed var(--p-ink); box-shadow: 6px 6px 0 var(--p-ink); }
.btn:hover { box-shadow: 4px 4px 0 var(--p-ink); }
.callout { background: var(--p-highlight); display: inline-block; padding: .4rem .9rem; border-radius: 12px; transform: rotate(-1deg); }
.card { border-width: 2px; border-color: var(--p-ink); }
.cards .card:nth-child(5n+1) { background: var(--p-soft1); } .cards .card:nth-child(5n+2) { background: var(--p-soft2); }
.cards .card:nth-child(5n+3) { background: var(--p-soft3); } .cards .card:nth-child(5n+4) { background: var(--p-soft4); }
.week { border: 2px solid var(--p-ink); }
.week-label { border: 2px solid var(--p-ink); }
.weeks .week:nth-child(even) .week-label { background: var(--p-step2); }
.fit-col { border-width: 2px; box-shadow: 5px 5px 0 var(--p-ink); }
.fit-yes { background: var(--p-soft3); } .fit-no { background: var(--p-soft2); }
.underneath { border: 2px solid var(--p-ink); border-left-width: 8px; border-radius: 12px; }
.method h2, .faq h2 { display: inline-block; background: #fff; padding: .1em .45em; border: 3px solid var(--p-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--p-ink); }
.faq-item { border-top: 3px solid var(--p-ink); }
.photo-placeholder { border-width: 3px; box-shadow: 6px 6px 0 var(--p-ink); background: var(--p-soft4); color: var(--p-ink); }
.signup .form-placeholder { background: var(--p-deep-card); border-color: var(--p-on-deep-head); box-shadow: none; }
.signup .ph-title { color: var(--p-on-deep-head); } .signup .ph-note { color: var(--p-on-deep); }
.signup .btn { box-shadow: 3px 3px 0 var(--p-on-deep-head); }
.photo { border: 3px solid var(--p-ink); box-shadow: 6px 6px 0 var(--p-ink); background: var(--p-soft4); }

/* ---------- Inner pages (/thanks/, /privacy/) ---------- */
.page-hero { background: var(--hero-bg); border-bottom: 3px solid var(--p-ink); padding: clamp(2.5rem, 6vw, 4.5rem) 0; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; top: -110px; border-radius: 50%; background: var(--p-blob); opacity: var(--p-blob-opacity); }
.page-hero .wrap { position: relative; }
.page-hero h1 { margin-bottom: .4em; }
.page-hero p { font-size: 1.2rem; color: var(--p-lead); margin: 0; }
.page-body { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.prose h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 2rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1.2em; }
.prose li { margin-bottom: .5rem; }
.next-steps { list-style: none; counter-reset: step; padding: 0 !important; display: grid; gap: 1rem; }
.next-steps li { counter-increment: step; position: relative; background: #ffffff; border: 2px solid var(--p-ink); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--p-ink); padding: 1rem 1.25rem 1rem 4.25rem; margin: 0; }
.next-steps li::before { content: counter(step); position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: var(--p-step1); border: 2px solid var(--p-ink); color: var(--p-ink); }
.next-steps li:nth-child(2)::before { background: var(--p-step2); } .next-steps li:nth-child(3)::before { background: var(--p-step3); } .next-steps li:nth-child(4)::before { background: var(--p-step4); }
.wait-box { background: var(--p-soft1); border: 2px solid var(--p-ink); border-left-width: 8px; border-radius: 12px; padding: 1rem 1.25rem; margin: 2rem 0; }
.draft-banner { background: #fff3b0; color: #3d2e00; border: 3px dashed #8a6a00; border-radius: 14px; padding: 1rem 1.25rem; margin: 0 0 2rem; font-weight: 700; }
.draft-banner p { margin: 0; }
.privacy-section { border-top: 3px solid var(--p-ink); padding-top: 1rem; margin-top: 1.75rem; }
.privacy-section h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
.to-draft { display: block; background: #fff3b0; color: #5c4400; border: 1px solid #e0c24a; border-radius: 8px; padding: .6rem .8rem; font-size: .98rem; }
@media (max-width: 700px) { .to-draft { font-size: 1rem; } }

/* ---------- MailerLite form ----------
   MailerLite injects its own CSS with id-based selectors and !important (#mlb2-<id>.ml-form-embedContainer ...).
   These overrides start with the page id #join so they outrank it, and also use !important.
   They hide MailerLite's own heading ("Beta signup") and grey box so the form sits in the site's card. */
.signup-card { background: #ffffff; color: var(--p-ink); border: 3px solid var(--p-ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--p-ink); padding: 1.25rem 1.25rem 1.4rem; text-align: left; }
/* Reserve the rendered form's height before MailerLite's script fills the box. Without it the page is
   ~600px shorter until the form loads, so the hero button's jump to #join stops short (FAQ in view).
   Heights measured in Chrome at each width (the last label wraps onto two lines on narrow phones). */
.ml-embedded { min-height: 594px; }
/* Land #join flush under the sticky header (71px tall, 63px on phones) so no strip of the FAQ shows above it */
#join { scroll-margin-top: 70px; }
@media (max-width: 700px) { #join { scroll-margin-top: 62px; } }
@media (max-width: 420px) { .ml-embedded { min-height: 616px; } }
@media (max-width: 340px) { .ml-embedded { min-height: 638px; } }
.signup .signup-card { max-width: 520px; margin: 1.25rem auto 0; border-color: var(--p-on-deep-head); box-shadow: 6px 6px 0 var(--p-on-deep-head); }
#join .ml-embedded .ml-form-embedContainer,
#join .ml-embedded .ml-form-embedContainer .ml-form-align-center { width: 100% !important; text-align: left !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper { background: transparent !important; border: 0 !important; border-radius: 0 !important; display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody { padding: 0 !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent { display: none !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent { margin: 0 0 1.25rem !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow { margin: 0 0 .9rem !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item { margin: 0 !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label {
  display: block !important; margin: 0 0 .3rem !important; color: var(--p-ink) !important;
  font-family: var(--font-body) !important; font-size: 1rem !important; font-weight: 800 !important; line-height: 1.35 !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow :is(input.form-control, select.custom-select) {
  display: block !important; width: 100% !important; max-width: 100% !important; min-height: 48px !important; box-sizing: border-box !important;
  background-color: #ffffff !important; color: var(--p-ink) !important;
  border: 2px solid var(--p-ink) !important; border-radius: 12px !important;
  font-family: var(--font-body) !important; font-size: 1rem !important; line-height: 1.4 !important; padding: .7rem .9rem !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow select.custom-select { padding-right: 2.4rem !important; cursor: pointer; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow :is(input.form-control, select.custom-select):focus {
  outline: 3px solid var(--p-focus) !important; outline-offset: 2px !important; border-color: var(--p-ink) !important; box-shadow: none !important; }
/* MailerLite marks a field it rejects with .ml-error */
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .ml-error :is(input.form-control, select.custom-select) { border-color: #b42318 !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group.ml-error label { color: #b42318 !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit { float: none !important; width: 100% !important; margin: 0 !important; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  display: block; width: 100% !important; min-height: 48px !important; box-sizing: border-box !important;
  background-color: var(--p-btn) !important; color: #ffffff !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: 3px 3px 0 var(--p-ink) !important; padding: .85rem 1.5rem !important;
  font-family: var(--font-body) !important; font-size: 1.125rem !important; font-weight: 700 !important; line-height: 1.3 !important;
  transition: transform .15s ease, background-color .15s ease; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.loading { display: none; }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
  background-color: var(--p-btn-hover) !important; box-shadow: 4px 4px 0 var(--p-ink) !important; transform: translateY(-1px); }
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus-visible { outline: 3px solid var(--p-focus) !important; outline-offset: 3px !important; }
/* MailerLite's own "Thank you!" box (shown only if the redirect to /thanks/ doesn't happen) */
#join .ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent :is(h4, p) { color: var(--p-ink) !important; font-family: var(--font-body) !important; text-align: left !important; }
@media (prefers-reduced-motion: reduce) { #join .ml-embedded .ml-form-embedSubmit button { transition: none !important; } }