/*
 * Flowella theme — global stylesheet overlay.
 *
 * design-system.css is the contract for tokens + base styles and is
 * loaded SEPARATELY by the template via require_css. We deliberately
 * do NOT use a CSS @import here: HubSpot serves CSS files from a CDN
 * URL whose path doesn't always preserve relative imports, so they
 * silently 404 in production.
 *
 * This file is the THIN overlay sitting on top of design-system.css —
 * shared utilities and brand-book extensions used across modules.
 * If something here drifts from design-system.css, that's a flag the
 * design system needs to evolve. Surface it instead of forking.
 * ──────────────────────────────────────────────────────────────────── */

/* Page reset — design-system.css applies most of these on `html, body`,
   but the home page also relies on `a { color: inherit; text-decoration: none; }`
   for nav/footer links. */
a {
  color: inherit;
  text-decoration: none;
}

/* Layout containers used by every section.
   `.wrap-read` is the reading-width container — single-column long-form
   prose (case studies, blog posts, terms) where line length matters
   more than horizontal real estate. ~75ch at 17px body copy. */
.wrap         { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.wrap-narrow  { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.wrap-read    { max-width:  820px; margin: 0 auto; padding: 0 40px; }

/* Section scaffold + theme variants ("Card Variants"-style, inspired by
   HubSpot's Elevate theme). Every section-level module exposes a
   `theme_variant` field that the HUBL applies as `s-light-1` … `s-dark-2`
   on the section element. The classes set the section background AND
   override the colour of section-level chrome (eyebrow, h-display, lede)
   so the heading is always readable.

   Variants:
     s-light-1 — White paper        (default — dark text)
     s-light-2 — Tinted grey        (subtle separation — dark text)
     s-light-3 — Sky tint           (brand-tinted breather — dark text)
     s-dark-1  — Deep navy          (high-contrast feature — light text)
     s-dark-2  — Brand blue         (branded dark feature — light text)

   Card backgrounds inside these sections (.uc-card, .step, .post,
   .howdygo-embed, etc.) are intentionally NOT inverted — white cards
   "pop" on dark sections. Only the section heading + lede + eyebrow
   are recoloured. Module-specific tweaks live in each module CSS. */
section.s         { padding: 140px 0; position: relative; }
section.s.tight   { padding: 110px 0; }

/* Light variants — dark text on light backgrounds. Default styling for
   .eyebrow / .h-display / .lede already produces dark text, so these
   classes only need to set the background. */
section.s.s-light-1 { background: var(--paper, #fff); }
section.s.s-light-2 { background: var(--ink-050); }
section.s.s-light-3 { background: var(--sky-tint); }

/* Backwards-compatible aliases (old field values: default/tint/sky). */
section.s.tint      { background: var(--ink-050); }
section.s.sky       { background: var(--sky-tint); }

/* Dark variants — light text on dark backgrounds. We override ONLY
   the named section-chrome classes (.eyebrow / .h-display / .lede),
   never via element-level selectors like h2/h3 or via `color:` on the
   section itself. Why: white cards live inside these sections, and
   their internal headings (.uc-card h3, .step h3, etc.) must stay
   dark. Setting `color:` on the section, or restyling bare h2/h3
   from here, would cascade into those cards and produce the classic
   "white text on white card" bug. Module-specific section-level
   sub-headings get their own explicit selectors below. */
section.s.s-dark-1 { background: var(--ink-900); }
section.s.s-dark-2 { background: var(--primary); }

section.s.s-dark-1 .eyebrow,
section.s.s-dark-2 .eyebrow {
  color: var(--secondary);
}
section.s.s-dark-1 .eyebrow::before,
section.s.s-dark-2 .eyebrow::before {
  background: var(--secondary);
}
section.s.s-dark-1 .h-display,
section.s.s-dark-2 .h-display {
  color: #fff;
}
section.s.s-dark-1 .h-display i,
section.s.s-dark-2 .h-display i {
  color: var(--secondary);
}
section.s.s-dark-1 .lede,
section.s.s-dark-2 .lede {
  color: rgba(255, 255, 255, .82);
}
section.s.s-dark-1 .lede b,
section.s.s-dark-2 .lede b {
  color: #fff;
}
/* Module-specific sub-headings that sit outside cards. Add new
   selectors here when a module exposes section-level prose that
   would otherwise inherit body colour. Never select h2/h3 generically. */
section.s.s-dark-1 .howdygo-lede,
section.s.s-dark-2 .howdygo-lede,
section.s.s-dark-1 .howdygo-footer p,
section.s.s-dark-2 .howdygo-footer p,
section.s.s-dark-1 .howdygo-footer h3,
section.s.s-dark-2 .howdygo-footer h3 {
  color: rgba(255, 255, 255, .9);
}

/* Shared section eyebrow + heading + lede. These appear in nearly every
   home-page module. Keeping them here avoids duplicating the rule in every
   module CSS file. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: var(--primary);
}
.h-display {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--ink-900);
  margin: 0 0 28px;
  max-width: 18ch;
}
.h-display i {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: -.035em;
}
.lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 680px;
  margin: 0;
}
.lede b { color: var(--ink-900); font-weight: 600; }

/* Button extensions on top of design-system.css `.btn`.
   The brand book defines the baseline; the live site needs:
   - inline-flex with gap (for icon + label)
   - white-space: nowrap (so wrapping never breaks button labels)
   - .btn-wa  — WhatsApp green CTA (alias for the brand-book `.btn-success`,
                with the green-dk hover the home page expects)
   - .btn-lg  — larger size used by hero + cta-strip
   - extra shadow on `.btn-primary` (consistency with the live design) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .08s, background .15s, border-color .15s, box-shadow .15s;
}
.btn-primary { box-shadow: 0 6px 14px -6px rgba(14, 110, 166, .5); }
.btn-wa      { background: var(--green); color: #fff; border-color: transparent; }
.btn-wa:hover { background: #128C7E; }
.btn-lg      { padding: 16px 28px; font-size: 15.5px; border-radius: 14px; }

/* WhatsApp brand icon — the inline SVG is hard-coded at width="18" in
   every CTA, which reads small next to the 15.5px (btn-lg) / 14.5px
   (default) label. Scale it relative to font-size so it always feels
   in proportion: 1.45em ≈ 22.5px on btn-lg, ≈ 21px on default btn,
   matching the WhatsApp brand-mark optical size used in their UI. */
.btn-wa svg {
  width: 1.45em;
  height: 1.45em;
  flex-shrink: 0;
}

/* Rich-text overlays used by /about (centred feature + agency bio).
   These live in main.css rather than per-module CSS because the markup
   is authored inside @hubspot/rich_text dnd_modules — there's no
   module.hubl.css for those to attach to. */
.about-feature {
  max-width: 880px;
  margin: 0 auto;
  padding: 80px 40px;
  text-align: center;
}
.about-feature h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.18;
  letter-spacing: -.025em;
  color: var(--ink-900);
  margin: 0 0 20px;
}
.about-feature h3 i,
.about-feature h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--primary);
}
.about-feature p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0 auto;
  max-width: 720px;
}

.about-bio {
  max-width: 880px;
  margin: 0 auto;
  padding: 60px 40px 80px;
  text-align: center;
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(79, 182, 236, .06), transparent 70%);
  border-top: 1px solid var(--ink-100);
  border-bottom: 1px solid var(--ink-100);
}
.about-bio h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink-900);
  margin: 0 0 18px;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}
.about-bio p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-700);
  margin: 0 auto;
  max-width: 640px;
}

/* Contact form intro block (centred). Mirrors faq-head spacing. */
.contact-form-intro {
  text-align: center;
  margin-bottom: 48px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────────────────────────────────
 * HubSpot form widget styling
 *
 * HubSpot's @hubspot/form widget injects markup with the `.hs-form`
 * class hierarchy. Out-of-the-box it inherits the portal default
 * styles, which clash with the design system (different fonts, padding,
 * focus rings, button colours). These rules bring the form in line with
 * the Flowella editorial look without forking the widget.
 *
 * Scoped to .hs-form-frame / .hs-form so we only restyle HubSpot forms
 * — any other native <form> elsewhere in the theme is unaffected.
 * ─────────────────────────────────────────────────────────────────── */
.hs-form-frame,
.hbspt-form,
.hs_cos_wrapper_type_form {
  max-width: 560px;
  margin: 0 auto;
}

.hs-form-frame .hs-form,
.hbspt-form .hs-form,
.hs_cos_wrapper_type_form .hs-form {
  font-family: var(--body);
  color: var(--ink-900);
}

.hs-form fieldset,
.hs-form .form-columns-1,
.hs-form .form-columns-2,
.hs-form .form-columns-3 {
  max-width: none !important;
  width: 100% !important;
  margin: 0 0 16px;
}

.hs-form .hs-form-field {
  margin-bottom: 18px;
}

.hs-form .hs-form-field > label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--ink-800);
  margin: 0 0 6px;
}

.hs-form .hs-form-field > label .hs-form-required {
  color: var(--coral, #ff6f61);
  margin-left: 2px;
}

.hs-form .input { padding: 0; margin: 0; }

.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="url"],
.hs-form input[type="number"],
.hs-form input[type="search"],
.hs-form input[type="password"],
.hs-form input[type="date"],
.hs-form select,
.hs-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
.hs-form textarea {
  min-height: 132px;
  resize: vertical;
}
.hs-form input::placeholder,
.hs-form textarea::placeholder {
  color: var(--ink-400);
}
.hs-form input:focus,
.hs-form select:focus,
.hs-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(14, 110, 166, .12);
}
.hs-form input.invalid,
.hs-form textarea.invalid,
.hs-form select.invalid {
  border-color: var(--coral, #ff6f61);
}

.hs-form .hs-error-msgs,
.hs-form ul.no-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.hs-form .hs-error-msg,
.hs-form .hs-error-msgs label {
  font-size: 12.5px;
  color: var(--coral, #ff6f61);
}

.hs-form .hs-richtext,
.hs-form .legal-consent-container {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-600);
}
.hs-form .hs-richtext a,
.hs-form .legal-consent-container a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hs-form .inputs-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
}
.hs-form .inputs-list li {
  margin: 0 0 6px;
}
.hs-form .inputs-list label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-700);
  font-weight: 400;
  cursor: pointer;
}
.hs-form .inputs-list input[type="checkbox"],
.hs-form .inputs-list input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--primary);
}

.hs-form .hs-submit {
  margin-top: 8px;
}
.hs-form .hs-submit .actions {
  display: flex;
  justify-content: flex-start;
}
.hs-form .hs-button,
.hs-form input[type="submit"],
.hs-form input.hs-button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .005em;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 0 rgba(14, 110, 166, .25), 0 6px 14px rgba(14, 110, 166, .18);
}
.hs-form .hs-button:hover,
.hs-form input[type="submit"]:hover {
  background: color-mix(in srgb, var(--primary) 88%, black);
  transform: translateY(-1px);
}
.hs-form .hs-button:active,
.hs-form input[type="submit"]:active {
  transform: translateY(0);
}

/* Inline confirmation message (response_response_type: "inline"). */
.submitted-message {
  padding: 24px 28px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 6%, white);
  border: 1px solid color-mix(in srgb, var(--primary) 18%, white);
  color: var(--ink-800);
  font-size: 15px;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────────────
 * Legal / privacy templates
 *
 * Long-form policy text needs measure, hierarchy, and breathing room.
 * Sections are authored as a stack of @hubspot/rich_text dnd_modules
 * inside an offset 8/12 column, each wrapped in `.legal-block` so we
 * can scope typography without leaking into other rich-text uses.
 * ─────────────────────────────────────────────────────────────────── */
.flowella-legal main { background: var(--paper, #fff); }

.legal-block {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 0;
}
.legal-block + .legal-block {
  border-top: 1px solid var(--ink-100);
}
.legal-block h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink-900);
  margin: 0 0 14px;
}
.legal-block h2 i,
.legal-block h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--primary);
}
.legal-block p,
.legal-block li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0 0 14px;
}
.legal-block ul,
.legal-block ol {
  padding-left: 22px;
  margin: 0 0 14px;
}
.legal-block li {
  margin-bottom: 8px;
}
.legal-block a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-block a:hover {
  text-decoration-thickness: 2px;
}
.legal-block b,
.legal-block strong {
  color: var(--ink-900);
}

.legal-contact {
  margin-top: 12px;
  padding: 28px 32px;
  background: var(--ink-050);
  border-radius: 16px;
  border: 1px solid var(--ink-100);
}
.legal-contact + .legal-block {
  border-top: 0;
}
.legal-contact h2 {
  margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────
 * Blog templates (listing + post)
 *
 * Why these styles live in main.css and not in a module:
 * - Both blog templates render their cards/header inline (no editor
 *   surface exists for blog data; everything comes from `contents` and
 *   `content.*` template variables). There's no module.hubl.css for
 *   them to attach to.
 * - Sharing the .blog-card class between the listing template and the
 *   post template's "Keep reading" section means one source of truth.
 * ─────────────────────────────────────────────────────────────────── */

/* Blog hero — overrides the page-hero defaults to feel slightly
   tighter, since the description copy is usually much longer than a
   marketing page lede. */
.blog-hero { padding: 130px 0 64px; }
.blog-hero .ph-headline { max-width: 22ch; }
.blog-hero .ph-lede { max-width: 760px; }

.blog-list { padding-top: 0; padding-bottom: 100px; }

.blog-empty {
  text-align: center;
  padding: 60px 24px;
  color: var(--ink-500);
  font-style: italic;
}

/* Featured (page-1) card — full-width, side-by-side image and copy. */
.blog-card--featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 32px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.blog-card--featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 50px -28px rgba(15, 23, 42, .22);
  border-color: var(--ink-300);
}
.blog-card--featured .blog-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.blog-card--featured .blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card--featured .blog-card-body {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.blog-card--featured .blog-card-title {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
}
.blog-card--featured .blog-card-summary {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
}

/* Standard 3-up grid. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blog-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  color: inherit;
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(15, 23, 42, .18);
  border-color: var(--ink-300);
}

.blog-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-100);
}
.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.blog-card-topic {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  width: max-content;
}

.blog-card-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink-900);
  margin: 0;
}

.blog-card-meta {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-500);
  display: flex;
  gap: 8px;
  align-items: center;
}
.blog-card-meta .dot { color: var(--ink-300); }

/* Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--ink-100);
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
}
.blog-pagination a,
.blog-pagination span { color: var(--ink-700); }
.blog-pagination a:hover { color: var(--primary); }
.blog-pagination .page-prev--disabled,
.blog-pagination .page-next--disabled { color: var(--ink-300); cursor: not-allowed; }
.blog-pagination .page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 6px;
}
.blog-pagination .page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
  border: 1px solid transparent;
}
.blog-pagination .page-num:hover { background: var(--ink-050); }
.blog-pagination .page-num--current {
  background: var(--primary);
  color: #fff;
}

@media (max-width: 1080px) {
  .blog-card--featured { grid-template-columns: 1fr; }
  .blog-card--featured .blog-card-image { aspect-ratio: 16 / 9; }
  .blog-card--featured .blog-card-body { padding: 32px 28px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card--featured .blog-card-body { padding: 28px 24px; }
  .blog-pagination { gap: 12px; }
  .blog-pagination .page-num { width: 32px; height: 32px; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Single blog post styles
 *
 * Scoped to `body.flowella-blog-post` because several class names
 * (.post, .post-meta) are also used by the post-grid card module on
 * the home page. Without scoping, the card layout pulls these heavy
 * rules and breaks (the most visible was `.post { padding-top: 100px }`
 * which created huge vertical gaps inside each blog card).
 * ─────────────────────────────────────────────────────────────────── */

body.flowella-blog-post .post { padding-top: 100px; }

body.flowella-blog-post .post-header { margin-bottom: 56px; }

body.flowella-blog-post .post-topics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  justify-content: center;
}
body.flowella-blog-post .post-topic {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(14, 110, 166, .08);
  border: 1px solid rgba(14, 110, 166, .18);
  padding: 6px 12px;
  border-radius: 99px;
  transition: background .15s;
}
body.flowella-blog-post .post-topic:hover { background: rgba(14, 110, 166, .14); }

body.flowella-blog-post .post-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink-900);
  margin: 0 0 24px;
  text-align: center;
}

body.flowella-blog-post .post-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-500);
}
body.flowella-blog-post .post-meta-sep { color: var(--ink-300); }
body.flowella-blog-post .post-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.flowella-blog-post .post-author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
body.flowella-blog-post .post-author-name { color: var(--ink-700); font-weight: 500; }

body.flowella-blog-post .post-featured-image {
  margin: 48px auto 0;
  max-width: 1080px;
  border-radius: 22px;
  overflow: hidden;
}
body.flowella-blog-post .post-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Post body — typography-driven layout for editor-authored content. */
body.flowella-blog-post .post-body { padding-bottom: 80px; }
body.flowella-blog-post .post-body .wrap-narrow { max-width: 760px; }
body.flowella-blog-post .post-body p,
body.flowella-blog-post .post-body ul,
body.flowella-blog-post .post-body ol,
body.flowella-blog-post .post-body blockquote {
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--ink-800);
  margin: 0 0 22px;
}
body.flowella-blog-post .post-body h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ink-900);
  margin: 56px 0 18px;
}
body.flowella-blog-post .post-body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink-900);
  margin: 36px 0 14px;
}
body.flowella-blog-post .post-body h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink-900);
  margin: 28px 0 10px;
}
body.flowella-blog-post .post-body a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.flowella-blog-post .post-body a:hover { color: var(--primary-dk); }
body.flowella-blog-post .post-body strong { color: var(--ink-900); font-weight: 600; }
body.flowella-blog-post .post-body img,
body.flowella-blog-post .post-body figure {
  margin: 32px auto;
  max-width: 100%;
  border-radius: 14px;
  display: block;
}
body.flowella-blog-post .post-body figure img { margin: 0; }
body.flowella-blog-post .post-body figcaption {
  font-size: 13px;
  color: var(--ink-500);
  text-align: center;
  margin-top: 10px;
}
body.flowella-blog-post .post-body blockquote {
  border-left: 3px solid var(--primary);
  padding: 4px 0 4px 24px;
  margin-left: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.55;
  color: var(--ink-900);
}
body.flowella-blog-post .post-body ul,
body.flowella-blog-post .post-body ol { padding-left: 22px; }
body.flowella-blog-post .post-body li { margin-bottom: 8px; }
body.flowella-blog-post .post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 15px;
}
body.flowella-blog-post .post-body th,
body.flowella-blog-post .post-body td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-200);
  text-align: left;
}
body.flowella-blog-post .post-body th {
  background: var(--ink-050);
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink-900);
}
body.flowella-blog-post .post-body hr {
  border: 0;
  border-top: 1px solid var(--ink-200);
  margin: 48px 0;
}
body.flowella-blog-post .post-body pre,
body.flowella-blog-post .post-body code {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--ink-050);
  border-radius: 6px;
}
body.flowella-blog-post .post-body code { padding: 2px 6px; }
body.flowella-blog-post .post-body pre {
  padding: 16px 20px;
  overflow-x: auto;
  margin: 24px 0;
}

/* Share strip */
body.flowella-blog-post .post-share {
  border-top: 1px solid var(--ink-100);
  padding: 32px 0 80px;
}
body.flowella-blog-post .post-share .wrap-narrow {
  display: flex;
  align-items: center;
  gap: 18px;
}
body.flowella-blog-post .post-share-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-500);
}
body.flowella-blog-post .post-share-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
}
body.flowella-blog-post .post-share-list a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-200);
  border-radius: 12px;
  color: var(--ink-700);
  transition: background .15s, color .15s, border-color .15s;
}
body.flowella-blog-post .post-share-list a:hover {
  background: var(--ink-050);
  color: var(--primary);
  border-color: var(--ink-300);
}

/* ─────────────────────────────────────────────────────────────────────
 * Landing-page rich-text overlays
 * Used by templates/landing-page.hubl.html in @hubspot/rich_text
 * dnd_modules where there's no module CSS to attach to.
 * ─────────────────────────────────────────────────────────────────── */

/* Trust strip immediately below the hero — single line, centred, no
   section padding so it visually anchors to the hero above. */
.lp-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 24px;
  background: #fff;
  border-bottom: 1px solid var(--ink-100);
  font-size: 14px;
  flex-wrap: wrap;
}
.lp-rating span {
  color: var(--sun);
  letter-spacing: 2px;
  font-size: 16px;
}
.lp-rating strong {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink-900);
}

/* Form section heading and column intros. */
.lp-form-head {
  text-align: center;
  margin-bottom: 48px;
}
.lp-form-head .eyebrow::before { display: none; }

.lp-col-head h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.lp-col-head p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0 0 20px;
}

/* Related posts grid spacing — uses the same .blog-card markup. */
.related-posts .related-head {
  text-align: center;
  margin-bottom: 56px;
}
.related-posts .related-head .eyebrow { justify-content: center; }
.related-posts .related-head .eyebrow::before { display: none; }
.related-posts .related-head .h-display {
  margin: 0 auto;
  max-width: 22ch;
}

@media (max-width: 720px) {
  .post-share .wrap-narrow { flex-direction: column; align-items: flex-start; }
  .post-featured-image { border-radius: 14px; margin-top: 32px; }
}