/* ==========================================================================
   Make Sure It's Meaningful — stylesheet

   Sibling of the Meaningful HOPE and Make it Meaningful stylesheets.
   Identical type, spacing, and components. Only the palette differs.

   The established parent-brand palette:
     navy       #1A2E5A   headers and body text
     teal       #2AB5A5   accent
     champagne  #F0DC8A   warm second accent
     cream      #F2EFE8   warm background

   The governing rule:
     navy carries all text on light backgrounds
     teal and champagne are FILLS carrying deep-navy text
     the brighter teal #46D3C2 is the accent as TEXT, on navy only
   ========================================================================== */

:root {
  --navy: #1a2e5a;
  --navy-deep: #122140;
  --navy-soft: #34517f;
  --indigo: #1a2e5a;

  /* accent, in its four roles */
  --teal: #2ab5a5;                        /* fill on light backgrounds  */
  --teal-hover: #219a8c;                  /* that fill, on hover        */
  --teal-text: #10233f;                   /* text sitting on that fill  */
  --teal-on-dark: #46d3c2;                /* accent as text, on navy    */
  --teal-wash: #e2f5f2;
  --teal-glow: rgba(42, 181, 165, .22);
  --teal-glow-dark: rgba(70, 211, 194, .22);

  /* champagne — the warm second accent, a fill only, never text */
  --champagne: #f0dc8a;
  --champagne-deep: #e3c95f;
  --champagne-wash: #faf3dc;

  --indigo-wash: #eae5d3;
  --indigo-wash-soft: #f7f2e4;

  --cream: #f2efe8;
  --white: #ffffff;
  --ink: #23262e;
  --muted: #5c6478;
  --line: #e3ded1;

  --wrap: 1140px;
  --narrow: 760px;
  --radius: 10px;
  --shadow: 0 2px 4px rgba(26, 46, 90, .05), 0 12px 32px rgba(26, 46, 90, .07);

  --font-head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-quote: Georgia, "Times New Roman", serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
}
img { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 .6em;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.24rem; font-weight: 700; }
h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: .01em; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* ---------- accessibility ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; color: #fff; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 2.5rem, var(--narrow)); margin-inline: auto; }
section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-tight { padding: clamp(2.2rem, 4vw, 3.2rem) 0; }

.eyebrow {
  font-family: var(--font-head);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0 0 .9rem;
}
.lede { font-size: 1.2rem; line-height: 1.62; color: var(--muted); }
.center { text-align: center; }
.measure { max-width: 65ch; }
.center .measure { margin-inline: auto; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .85rem 0;
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-logo { height: 46px; width: auto; flex: none; }
.brand-text {
  display: flex; flex-direction: column; line-height: 1.15;
  padding-left: .8rem; border-left: 1px solid var(--line);
}
.brand-name {
  font-family: var(--font-head); font-weight: 700;
  font-size: .92rem; color: var(--navy); letter-spacing: -.005em;
}
.brand-tag { font-size: .68rem; color: var(--muted); letter-spacing: .04em; }
@media (max-width: 620px) {
  .brand-logo { height: 38px; }
  .brand-text { display: none; }
}

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  font-family: var(--font-head); font-size: .875rem; font-weight: 600;
  color: var(--navy); text-decoration: none;
  padding: .5rem .68rem; border-radius: 6px;
}
.nav a:hover { background: var(--cream); }
.nav a[aria-current="page"] { color: var(--navy); background: var(--teal-wash); }

/* The CTA inside the nav must beat the generic .nav a rules above,
   which otherwise override its fill and hover state. */
.nav a.btn-primary { color: var(--teal-text); background: var(--teal); padding: .58rem 1.15rem; }
.nav a.btn-primary:hover { color: var(--teal-text); background: var(--teal-hover); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: 7px; padding: .5rem .65rem; cursor: pointer; color: var(--navy);
}
.nav-toggle svg { display: block; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: .5rem 1.25rem 1.1rem; box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: .75rem .5rem; border-bottom: 1px solid var(--cream); border-radius: 0; }
  .nav .btn { margin-top: .75rem; text-align: center; border-bottom: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-head); font-weight: 700; font-size: .92rem;
  padding: .78rem 1.5rem; border-radius: 7px;
  text-decoration: none; border: 2px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--teal); color: var(--teal-text); }
.btn-primary:hover { background: var(--teal-hover); color: var(--teal-text); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); color: #fff; }
.btn-ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-light { background: var(--teal); color: var(--teal-text); }
.btn-light:hover { background: var(--teal-hover); color: var(--teal-text); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.center .btn-row { justify-content: center; }

/* ---------- hero (light, logo-led) ---------- */
.hero {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: clamp(2.6rem, 7vw, 5rem) 0;
  position: relative; overflow: hidden;
}
.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 52ch; }
.hero-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-logo-wrap { order: -1; }
}
.hero-logo-wrap {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.hero-logo { width: 100%; max-width: 420px; height: auto; }

/* The name is an acronym. Bolding the four letters makes that legible at a
   glance without needing a line of explanation. */
.acronym {
  margin: 1rem 0 0; text-align: center;
  font-family: var(--font-head); font-size: .84rem; font-weight: 600;
  letter-spacing: .04em; color: var(--muted); line-height: 1.6;
  max-width: 26rem;
}
.acronym b { color: var(--navy); font-weight: 800; font-size: 1.06em; }
.site-footer .acronym { color: rgba(255,255,255,.7); text-align: left; margin-top: .7rem; }
.site-footer .acronym b { color: var(--teal-on-dark); }

/* ---------- parallel line ---------- */
.parallel {
  background: var(--navy-deep);
  padding: clamp(1.8rem, 4vw, 2.6rem) 0; text-align: center;
}
.parallel p {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem); color: #fff;
  margin: 0; line-height: 1.5;
}
.parallel .accent { color: var(--teal-on-dark); }

/* ---------- surfaces ---------- */
.bg-cream { background: var(--cream); }
.bg-navy { background: var(--navy-deep); color: rgba(255,255,255,.88); }
.bg-navy h2, .bg-navy h3 { color: #fff; }
.bg-navy .eyebrow { color: var(--teal-on-dark); }
.bg-navy .lede { color: rgba(255,255,255,.8); }
.bg-teal-wash { background: var(--teal-wash); }

/* ---------- grids & cards ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.7rem;
  display: flex; flex-direction: column;
}
.card-link { text-decoration: none; color: inherit; transition: box-shadow .16s ease, transform .16s ease; }
.card-link:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .98rem; }
.card .more {
  margin-top: auto; padding-top: 1rem;
  font-family: var(--font-head); font-weight: 700; font-size: .86rem; color: var(--navy);
}
/* Numbered badge: teal as a FILL carrying indigo text — the one way the logo
   teal can appear on a light background and still meet contrast. */
.card-num {
  font-family: var(--font-head); font-weight: 800; font-size: .82rem;
  color: var(--teal-text); background: var(--teal);
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: inline-grid; place-items: center;
  margin-bottom: .9rem; letter-spacing: 0;
}
.card-link:hover .card-num { background: var(--teal-hover); }

/* Cards on the services pages pick up a teal edge on hover */
.card-link { border-top: 3px solid transparent; }
.card-link:hover { border-top-color: var(--teal); }

/* Teal rule under a section heading */
.rule-teal {
  width: 54px; height: 4px; background: var(--teal);
  border: none; border-radius: 2px; margin: 0 0 1.4rem;
}
.center .rule-teal { margin-inline: auto; }

/* ---------- stats ---------- */
.stat { text-align: center; padding: 1.4rem .8rem; }
.stat-num {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3rem); color: var(--teal-on-dark); line-height: 1;
}
.stat p { font-size: .95rem; margin: .6rem 0 0; color: rgba(255,255,255,.82); }

/* ---------- quote ---------- */
.quote {
  font-family: var(--font-quote); font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.55; color: var(--navy); font-style: italic;
  border-left: 4px solid var(--teal); padding: .3rem 0 .3rem 1.5rem; margin: 0;
}
.quote cite {
  display: block; margin-top: .9rem; font-family: var(--font-head);
  font-style: normal; font-weight: 700; font-size: .84rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

/* ---------- lists ---------- */
.ticks { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.ticks li { position: relative; padding-left: 1.9rem; margin-bottom: .8rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: .62rem; height: .62rem; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash);
}
.bg-navy .ticks li::before { box-shadow: 0 0 0 3px var(--teal-glow-dark); }
.qs { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.qs li {
  padding: .85rem 0 .85rem 1.6rem; border-bottom: 1px solid var(--line);
  position: relative; color: var(--muted);
}
.qs li::before { content: "—"; position: absolute; left: 0; color: var(--teal); }
.qs li:last-child { border-bottom: none; }

/* ---------- books ---------- */
.book { display: grid; grid-template-columns: 210px 1fr; gap: 2.2rem; align-items: start; }
@media (max-width: 640px) { .book { grid-template-columns: 1fr; max-width: 300px; } }
.book-cover {
  width: 100%; height: auto; border-radius: 4px;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}

/* ---------- portrait ----------
   A real studio headshot on a clean white background. It is presented as a
   plain rectangle with soft corners — no blend modes or tinted frames, both
   of which dulled the image and made it read as a snapshot. */
.portrait-frame { max-width: 460px; }
.portrait {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(5,1,127,.06), 0 18px 44px rgba(5,1,127,.12);
}
.portrait-round {
  width: 132px; height: 132px; border-radius: 50%;
  object-fit: cover; box-shadow: var(--shadow);
}

/* ---------- credentials ---------- */
.creds {
  list-style: none; padding: 0; margin: 1.3rem 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 2.4rem;
}
@media (max-width: 760px) { .creds { grid-template-columns: 1fr; } }
.creds li {
  position: relative; padding-left: 1.7rem;
  font-size: 1.02rem; line-height: 1.55;
}
.creds li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 3px var(--teal-glow);
}
.byline { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.6rem; }
.byline img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; flex: none; }
.byline-text { font-size: .93rem; line-height: 1.45; }
.byline-name { font-family: var(--font-head); font-weight: 700; color: var(--navy); }
.bg-navy .byline-name { color: #fff; }
.byline-role { color: var(--muted); }
.bg-navy .byline-role { color: rgba(255,255,255,.75); }
.badge {
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .32rem .7rem; border-radius: 999px; margin-bottom: .8rem;
}
.badge-teal { background: var(--teal-wash); color: var(--navy); }
.badge-indigo { background: var(--indigo-wash); color: var(--navy); }

/* ---------- callout ---------- */
.callout {
  background: var(--teal-wash); border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.5rem 1.7rem;
}
.callout h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.callout p { margin-bottom: .7rem; }
.callout-indigo { background: var(--indigo-wash-soft); border-left-color: var(--navy-soft); }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.6rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- signup ---------- */
.signup {
  background: var(--navy-deep); color: #fff; border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 3rem);
  text-align: left;
}
.signup h2 {
  color: #fff;
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  text-wrap: balance;
}
.signup p {
  color: rgba(255,255,255,.84);
  margin: .9rem 0 0;
  font-size: 1.02rem;
  line-height: 1.6;
}
/* Teal keyline above the heading — gives the block a top edge to sit against,
   so the content reads as deliberately placed rather than floating. */
.signup h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  margin-bottom: 1.1rem;
}
.embed-slot {
  margin-top: 1.4rem; padding: 1.4rem; border-radius: 8px;
  border: 2px dashed rgba(255,255,255,.32); background: rgba(255,255,255,.05);
  font-size: .9rem; color: rgba(255,255,255,.7);
}
.embed-slot code {
  background: rgba(255,255,255,.14); padding: .1rem .35rem;
  border-radius: 4px; font-size: .86em; color: var(--teal-on-dark);
}

/* ---------- page header ---------- */
.page-head {
  background: var(--cream); border-bottom: 1px solid var(--line);
  padding: clamp(2.6rem, 6vw, 4.2rem) 0;
}
.page-head h1 { max-width: 20ch; }
.page-head .lede { max-width: 62ch; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.72); padding: 3.4rem 0 2rem; }
.footer-parallel {
  text-align: center; padding-bottom: 2.4rem; margin-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-parallel p {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.22rem); color: #fff; margin: 0 0 1.4rem;
}
.footer-parallel .accent { color: var(--teal-on-dark); }
.footer-brands { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; justify-content: center; }
.footer-brands a {
  color: rgba(255,255,255,.8); font-size: .9rem; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 2px;
}
.footer-brands a:hover { color: var(--teal-on-dark); border-color: var(--teal-on-dark); }

.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 860px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-cols { grid-template-columns: 1fr; } }
.footer-cols h4 {
  color: #fff; font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 1rem;
}
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: .55rem; }
.footer-cols a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .93rem; }
.footer-cols a:hover { color: var(--teal-on-dark); }
.footer-cols p { font-size: .93rem; }

.footer-bottom {
  margin-top: 2.6rem; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between;
  font-size: .84rem; color: rgba(255,255,255,.55);
}
.footer-bottom a { color: rgba(255,255,255,.55); }

/* ---------- misc ---------- */
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tag {
  font-family: var(--font-head); font-size: 1rem; font-weight: 600;
  background: #fff; color: var(--navy);
  padding: .6rem 1.15rem; border-radius: 999px; border: 1px solid var(--line);
  line-height: 1.35;
}
.tag-row { gap: .7rem; }
hr.rule { border: none; border-top: 1px solid var(--line); margin: 2.6rem 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- professional links ---------- */
.links-row { list-style: none; padding: 0; margin: 1rem 0 0; }
.links-row li { margin-bottom: .6rem; }
.links-row a {
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  color: var(--navy); text-decoration: none;
  display: inline-block; padding: .5rem .9rem;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
}
.links-row a:hover { border-color: var(--teal); background: var(--teal-wash); }
.card .badge { align-self: flex-start; }

/* ---------- about page header ---------- */
.about-head {
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
@media (max-width: 820px) {
  .about-head { grid-template-columns: 1fr; }
  .about-head .portrait-frame { max-width: 340px; margin-inline: auto; }
}
.page-head .portrait-frame { max-width: 380px; margin-left: auto; }

/* ---------- quiet 'find me' line ---------- */
.find-me { font-size: .95rem; color: var(--muted); margin-top: 1.2rem; }
.find-me a { color: var(--navy); font-weight: 600; }
.find-me a:hover { text-decoration-thickness: 2px; }

/* ---------- legal pages ---------- */
.legal h2 { font-size: 1.35rem; margin-top: 2.4rem; }
.legal h3 { font-size: 1.05rem; margin-top: 1.6rem; color: var(--ink); }
.legal .ticks li { margin-bottom: .55rem; }
.legal-date {
  font-size: .92rem; color: var(--muted);
  padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); margin-bottom: 0;
}
.legal .callout { margin: 2rem 0; }

/* ==========================================================================
   Embedded Flodesk form, inside the dark sign-up panel.

   Scoped to the form's own container id, so these rules only ever touch the
   Flodesk widget and nothing else on the site.
   ========================================================================== */

/* --- collapse the form's own spacing -------------------------------------- */
/* Flodesk's form template wraps the fields in several nested divs, each of
   which can carry its own horizontal padding, max-width and auto margins.
   Resetting only the vertical padding leaves the fields inset and centered
   inside a block whose heading and paragraph are flush left — which reads as
   the whole thing being off-center. Strip the horizontal geometry too, and
   force left alignment so the form lines up with the text above it. */
.signup div[id^="fd-form-"],
.signup div[id^="fd-form-"] > div,
.signup div[id^="fd-form-"] form,
.signup div[id^="fd-form-"] [class*="fd-form-wrapper"],
.signup div[id^="fd-form-"] [class*="fd-form-content"],
.signup div[id^="fd-form-"] [class*="fd-form-inner"],
.signup div[id^="fd-form-"] [class*="fd-form-container"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
  text-align: left !important;
  min-height: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* the page already supplies the heading and blurb — hide the form's own,
   and any empty block Flodesk leaves reserving space */
.signup div[id^="fd-form-"] h1,
.signup div[id^="fd-form-"] h2,
.signup div[id^="fd-form-"] h3,
.signup div[id^="fd-form-"] [class*="fd-form-title"],
.signup div[id^="fd-form-"] [class*="fd-form-description"],
.signup div[id^="fd-form-"] [class*="fd-form-heading"],
.signup div[id^="fd-form-"] p:empty,
.signup div[id^="fd-form-"] div:empty { display: none !important; }

/* Comes after the reset above, so it wins for the outermost container only.
   Without a cap the fields stretch the full width of the block, which on a
   wide screen makes a two-field form look like a data-entry screen. */
.signup div[id^="fd-form-"] {
  margin-top: 1.6rem !important;
  max-width: 26rem !important;
}

/* ---- Flodesk layout wrappers -------------------------------------------
   Flodesk builds its own class names as ff-<formId>__thing, so the exact
   strings differ per form and can't be hard-coded. Match on the suffix
   instead, which is stable across forms, and back it up with structural
   selectors in case a template renders something unnamed.

   Without this the fields sit in a three-across row and the submit button
   is centered under them while the heading above is flush left — three
   different alignments in one box. */

/* Flodesk's class names are generated and differ per form, and guessing at
   them kept half-landing. So target every descendant instead — but ONLY
   alignment properties.

   Never set `display` in here: Flodesk keeps its success and error messages
   in the DOM as hidden elements, and a broad display rule makes "Thank you!
   Check your email" visible before anyone has submitted anything.

   Content can be centered three different ways — text-align on a block,
   justify-content on a flex row, or margin:0 auto on a fixed-width box.
   Since I can't see which one Flodesk is using, neutralize all three. */
.signup div[id^="fd-form-"],
.signup div[id^="fd-form-"] * {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  float: none !important;
}

/* The real cause of the off-center look: the outer container is the width I
   set, but Flodesk's inner wrapper is narrower than it and centers itself
   inside. Rather than hunting for which wrapper that is, make every wrapper
   fill its parent — then there is no leftover space to center within, and
   the alignment rules above become belt-and-braces.

   Width and margin only. Still no `display`, so nothing hidden gets revealed. */
.signup div[id^="fd-form-"] div,
.signup div[id^="fd-form-"] form,
.signup div[id^="fd-form-"] section,
.signup div[id^="fd-form-"] fieldset {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  /* The gutter between the two fields was a margin, and the margin reset
     above (which is what stops Flodesk centering itself) removed it. `gap`
     puts the space back without reintroducing auto-margins — and it is
     inert on any container that isn't flex or grid. */
  gap: .6rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  min-height: 0 !important;
  flex-wrap: wrap !important;
  box-sizing: border-box !important;
}

/* Everything above is zeroed out, so put the spacing back deliberately here
   rather than inheriting whatever vertical padding the form template shipped
   with. This is what removes the gap above the button and the dead space at
   the bottom of the navy block. */
.signup div[id^="fd-form-"] button,
.signup div[id^="fd-form-"] input[type="submit"] {
  margin-top: 1.1rem !important;
  margin-bottom: 0 !important;
}
.signup div[id^="fd-form-"] input[type="text"],
.signup div[id^="fd-form-"] input[type="email"],
.signup div[id^="fd-form-"] input[type="tel"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* The label inside the button still wants to be centered. */
.signup div[id^="fd-form-"] button,
.signup div[id^="fd-form-"] button *,
.signup div[id^="fd-form-"] input[type="submit"] {
  text-align: center !important;
}

/* The button sits at its natural width on the same left edge as the fields
   and the heading. Centered under them looked unmoored; stretched to the
   full row turned a two-field opt-in into a teal slab. */
.signup div[id^="fd-form-"] button,
.signup div[id^="fd-form-"] input[type="submit"],
.signup div[id^="fd-form-"] [class*="__button"] {
  width: auto !important;
  min-width: 11rem !important;
  max-width: 100% !important;
  margin: .5rem 0 0 0 !important;
  float: none !important;
}

/* --- the fields ----------------------------------------------------------- */
.signup div[id^="fd-form-"] input[type="text"],
.signup div[id^="fd-form-"] input[type="email"],
.signup div[id^="fd-form-"] input[type="tel"] {
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid #dbe3ec !important;
  border-radius: 7px !important;
  padding: .72rem .9rem !important;
  font-family: "Source Sans 3", sans-serif !important;
  font-size: 1rem !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* placeholders and floating labels sit INSIDE the white box, so they must be
   dark. This is what went wrong last time. */
.signup div[id^="fd-form-"] input::placeholder { color: #6b7280 !important; opacity: 1 !important; }
.signup div[id^="fd-form-"] label,
.signup div[id^="fd-form-"] [class*="fd-form-label"] { color: #6b7280 !important; }

.signup div[id^="fd-form-"] input:focus {
  outline: 3px solid var(--teal) !important;
  outline-offset: 2px !important;
}

/* --- the button ----------------------------------------------------------- */
.signup div[id^="fd-form-"] button,
.signup div[id^="fd-form-"] input[type="submit"],
.signup div[id^="fd-form-"] [class*="fd-btn"] {
  background: var(--teal) !important;
  color: var(--teal-text) !important;
  border: none !important;
  border-radius: 7px !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 700 !important;
  font-size: .92rem !important;
  padding: .8rem 1.6rem !important;
  cursor: pointer !important;
  height: auto !important;
  box-sizing: border-box !important;
  letter-spacing: .01em !important;
}
.signup div[id^="fd-form-"] button:hover,
.signup div[id^="fd-form-"] input[type="submit"]:hover,
.signup div[id^="fd-form-"] [class*="fd-btn"]:hover { background: var(--teal-hover) !important; }

/* --- anything else Flodesk prints (consent line, success message) ---------- */
.signup div[id^="fd-form-"] > p,
.signup div[id^="fd-form-"] [class*="fd-form-success"],
.signup div[id^="fd-form-"] [class*="fd-form-error"] { color: rgba(255,255,255,.85) !important; }


/* ==========================================================================
   Components added for the book sites
   ========================================================================== */

/* ---------- notice bar (coming soon / launch state) ---------- */
.notice {
  background: var(--teal-wash);
  border-bottom: 1px solid var(--line);
  text-align: center;
  padding: .7rem 0;
  font-size: .93rem;
  color: var(--navy);
}
.notice a { color: var(--navy); font-weight: 600; }
.notice strong { font-family: var(--font-head); font-weight: 700; }

/* ---------- reviews ---------- */
.reviews { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, 1fr); }
.reviews-1 { grid-template-columns: 1fr; }
@media (max-width: 820px) { .reviews { grid-template-columns: 1fr; } }
.review {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  margin: 0;
}
.review p {
  font-family: var(--font-quote);
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink);
}
.review cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .88rem;
  color: var(--navy);
}
.review .cite-role {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .86rem;
  color: var(--muted);
  margin-top: .15rem;
}
.bg-cream .review { background: var(--white); }
.review-featured {
  border-left-width: 4px;
  padding: 2rem 2.2rem;
}
.review-featured p { font-size: 1.16rem; line-height: 1.6; }

/* A single testimonial given its own band. Not a card — a card needs a
   contrasting background to read as one, and this sits on white. Centered
   typography with a rule above does the anchoring instead. */
.quote-band {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.quote-band p {
  font-family: var(--font-quote);
  font-size: clamp(1.25rem, 2.5vw, 1.68rem);
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.quote-band cite {
  display: block;
  margin-top: 1.4rem;
  font-style: normal;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  color: var(--navy);
}
.quote-band .cite-role {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .88rem;
  color: var(--muted);
  margin-top: .15rem;
}

/* ---------- retailer / marketplace grid ---------- */
.markets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .7rem;
  margin-top: 1.4rem;
  padding: 0;
  list-style: none;
}
.markets li { margin: 0; }
.markets a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .78rem 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  text-decoration: none;
  color: var(--navy);
  font-size: .95rem;
  font-weight: 600;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.markets a:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.markets .flag {
  font-size: 1.15rem;
  line-height: 1;
  flex: none;
}
.markets .market-note {
  display: block;
  font-weight: 400;
  font-size: .8rem;
  color: var(--muted);
}

/* ---------- access-code gate ---------- */
.gate {
  max-width: 520px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  text-align: center;
}
.gate label {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .55rem;
}
.gate input[type="text"] {
  width: 100%;
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  padding: .85rem 1rem;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
}
.gate input[type="text"]:focus {
  outline: none;
  border-color: var(--teal);
}
.gate .btn { width: 100%; justify-content: center; margin-top: .9rem; }
.gate-error {
  display: none;
  margin: .9rem 0 0;
  font-size: .92rem;
  color: #b3261e;
  font-weight: 600;
}
.gate-error.show { display: block; }
.gate-hint { font-size: .88rem; color: var(--muted); margin-top: 1.1rem; }
.gated { display: none; }
.gated.unlocked { display: block; }

/* ---------- downloads ---------- */
.downloads { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .downloads { grid-template-columns: 1fr; } }
.download {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.download:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--teal);
  color: inherit;
}
.download-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--teal-wash);
  color: var(--navy);
  display: grid; place-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .66rem;
  letter-spacing: .04em;
}
.download h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.download p { font-size: .92rem; color: var(--muted); margin: 0; }

/* ---------- products ---------- */
.product {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  height: 100%;
}
.product .price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0 0 .2rem;
}
.product .price-note { font-size: .85rem; color: var(--muted); margin-bottom: .9rem; }
.product h3 { margin-bottom: .45rem; }
.product p { color: var(--muted); font-size: .97rem; }
.product ul { margin: .8rem 0 0; padding-left: 1.1rem; font-size: .94rem; color: var(--muted); }
.product ul li { margin-bottom: .35rem; }
.product .btn-row { margin-top: auto; padding-top: 1.4rem; }
.product-free { border-top: 3px solid var(--teal); }
.product-soon { opacity: .96; border-style: dashed; }

/* ---------- author bios ---------- */
.bio {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(1.6rem, 4vw, 2.8rem);
  align-items: start;
}
.bio + .bio { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
@media (max-width: 760px) {
  .bio { grid-template-columns: 1fr; }
  .bio .bio-portrait { max-width: 220px; }
}
.bio-portrait {
  width: 100%;
  height: auto;              /* without this the grid row stretches it */
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.bio-portrait-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  border: 2px dashed var(--line);
  background: var(--cream);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  font-size: .84rem;
  color: var(--muted);
}
.bio h2 { margin-bottom: .2rem; }
.bio .bio-role {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .02em;
  color: var(--teal-text-on-light, var(--muted));
  margin-bottom: 1.1rem;
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  font-size: 1.04rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--muted);
  font-weight: 700;
  flex: none;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: .9rem 0 0; color: var(--muted); }

/* ---------- editor placeholder (things Shanna must fill in) ---------- */
.todo {
  border: 2px dashed #d9a800;
  background: #fffaeb;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
  font-size: .92rem;
  color: #6b5200;
}
.todo strong { font-family: var(--font-head); }
.todo code {
  background: rgba(0,0,0,.06);
  padding: .1rem .35rem;
  border-radius: 4px;
  font-size: .9em;
}


/* ---------- champagne, the second accent (this site only) ---------- */
.badge-champagne { background: var(--champagne-wash); color: var(--navy); }
.btn-champagne { background: var(--champagne); color: var(--navy); }
.btn-champagne:hover { background: var(--champagne-deep); color: var(--navy); }
.bg-champagne { background: var(--champagne-wash); }
.rule-champagne {
  width: 54px; height: 4px; background: var(--champagne);
  border: 0; border-radius: 2px; margin: 1.1rem 0 1.5rem;
}
.center .rule-champagne { margin-inline: auto; }
.callout-champagne { background: var(--champagne-wash); border-left-color: var(--champagne-deep); }
.product-flagship { border-top: 3px solid var(--champagne); }
.bg-navy .champagne { color: var(--champagne); }
/* ---------- odds and ends used by the book pages ---------- */
hr.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: clamp(2rem, 5vw, 3rem) 0;
}
.find-me { font-size: .95rem; color: var(--muted); margin-top: 1rem; }
.find-me a { color: var(--navy); }

/* hero book cover, in place of HOPE's logo */
.book-cover-hero {
  width: 100%;
  max-width: 265px;
  height: auto;              /* without this the flex row stretches it */
  margin-inline: auto;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0,0,0,.10), 0 26px 60px rgba(0,0,0,.16);
}

/* chapter lists on the contents cards */
.chapters {
  margin: .9rem 0 0;
  padding-left: 1.3rem;
  font-size: .96rem;
  color: var(--muted);
}
.chapters li { margin-bottom: .45rem; padding-left: .2rem; }
.chapters li::marker { color: var(--teal); font-family: var(--font-head); font-weight: 700; }

/* chapter headings on the tools page */
.tools-chapter {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2.2rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.tools-chapter:first-of-type { margin-top: 0; }


/* No image anywhere should ever be stretched by its container. */
img { height: auto; }

/* --- spacing between fields, for forms with more than just an email box --- */
.signup div[id^="fd-form-"] [class*="fd-form-field"],
.signup div[id^="fd-form-"] [class*="ff-"] {
  margin-bottom: .7rem !important;
}
.signup div[id^="fd-form-"] [class*="fd-form-field"]:last-of-type {
  margin-bottom: 0 !important;
}
/* on wider screens let first/last name share a row, as they did on Wix */
@media (min-width: 620px) {
  .signup div[id^="fd-form-"] [class*="fd-form-inline"] { gap: .7rem !important; }
}
/* ---------- anchor links land below the sticky header ----------
   The header is position:sticky, so a plain #anchor jump puts the target
   underneath it and you lose the heading. scroll-margin-top reserves the
   header's height plus a little breathing room. */
[id] { scroll-margin-top: 6rem; }

.grid-1 { grid-template-columns: 1fr; }