/*
 * 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.
 * ─────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────
 * Page hero (.ph) — shared layout primitive
 *
 * Originally lived in flowella-page-hero.module/module.hubl.css, but
 * that file ONLY loads when the page-hero module is rendered into the
 * page. Templates that want the same hero treatment without the
 * module's editor surface (notably the blog listing, where eyebrow /
 * headline copy is template-driven) need these rules to be globally
 * available. main.css is loaded on every flowella-page, so this is the
 * right home — the module CSS now just contains a pointer-comment.
 *
 * Variants: .ph--light (paper) and .ph--dark (home-hero gradient),
 * with .ph--centre / .ph--left for alignment. Headline accents follow
 * the same .it (sky blue italic) / .acc (green italic) hooks the home
 * hero uses, so editors can reuse the same markup conventions.
 * ─────────────────────────────────────────────────────────────────── */

.ph {
  position: relative;
  padding: 160px 0 96px;
  overflow: hidden;
}

.ph--light {
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(79, 182, 236, .08), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(37, 211, 102, .05), transparent 60%),
    var(--paper);
  color: var(--ink-900);
}

.ph--dark {
  background:
    radial-gradient(1100px 600px at 88% 8%, rgba(79, 182, 236, .22), transparent 70%),
    radial-gradient(900px 700px at 5% 95%, rgba(37, 211, 102, .10), transparent 70%),
    linear-gradient(160deg, #0A1024 0%, #0E2A4A 45%, #0E6EA6 100%);
  color: #fff;
}
.ph--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  z-index: 0;
}

.ph-bg-word {
  position: absolute;
  bottom: -80px;
  left: -40px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 360px;
  line-height: .8;
  letter-spacing: -.06em;
  color: rgba(255, 255, 255, .035);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.ph-wrap {
  position: relative;
  z-index: 1;
  max-width: 880px;
}

.ph--centre .ph-wrap { margin-left: auto; margin-right: auto; text-align: center; }
.ph--centre .ph-ctas { justify-content: center; }
.ph--centre .ph-lede { margin-left: auto; margin-right: auto; }

.ph--left .ph-wrap { text-align: left; max-width: 1080px; }

.ph-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.ph--light .ph-eyebrow {
  color: var(--primary);
  background: rgba(14, 110, 166, .08);
  border: 1px solid rgba(14, 110, 166, .18);
  padding: 8px 14px;
  border-radius: 99px;
}
.ph--dark .ph-eyebrow {
  color: var(--secondary);
  background: rgba(79, 182, 236, .12);
  border: 1px solid rgba(79, 182, 236, .3);
  padding: 8px 14px;
  border-radius: 99px;
}
.ph--dark .ph-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}

.ph-headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0 0 24px;
}
.ph--light .ph-headline {
  color: var(--ink-900);
  max-width: 18ch;
}
.ph--centre .ph-headline {
  margin-left: auto;
  margin-right: auto;
}
.ph--dark .ph-headline { color: #fff; }

.ph-headline i,
.ph-headline em,
.ph-headline .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -.04em;
}
.ph--light .ph-headline i,
.ph--light .ph-headline em,
.ph--light .ph-headline .it { color: var(--primary); }
.ph--dark .ph-headline i,
.ph--dark .ph-headline em,
.ph--dark .ph-headline .it { color: var(--secondary); }
.ph-headline .acc {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--green);
  letter-spacing: -.04em;
}

.ph-lede {
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 36px;
  max-width: 640px;
}
.ph-lede p { margin: 0 0 12px; }
.ph-lede p:last-child { margin-bottom: 0; }
.ph--light .ph-lede { color: var(--ink-700); }
.ph--light .ph-lede b { color: var(--ink-900); font-weight: 600; }
.ph--dark .ph-lede { color: rgba(255, 255, 255, .78); }
.ph--dark .ph-lede b { color: #fff; font-weight: 600; }

.ph-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1.5px solid var(--ink-300);
}
.btn-ghost:hover {
  background: var(--ink-050);
  border-color: var(--ink-400);
}
.ph--dark .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
.ph--dark .btn-ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .5);
}

@media (max-width: 720px) {
  .ph { padding: 120px 0 72px; }
  .ph-bg-word { font-size: 220px; }
  .ph-headline { font-size: clamp(34px, 9vw, 48px); }
  .ph-lede { font-size: 17px; }
}

/* ── Blog hero ──────────────────────────────────────────────────────
 * Dark home-hero gradient. The hero pads the section.s rhythm because
 * the listing is meant to feel snappy, not ceremonial: readers landed
 * here to scan posts, so the hero earns just enough room for the
 * headline + lede.
 *
 * Specificity note: the site-nav module CSS adds
 *   `body.flowella-has-dark-hero .ph--dark { padding-top: 152px; }`
 * (specificity 0,2,1) to clear the fixed nav. We *want* a tighter
 * top padding on the listing, so the override below uses
 *   `body.flowella-has-dark-hero section.blog-hero` (specificity 0,2,2)
 * to outrank it deterministically — without bumping to !important. */
.blog-hero .ph-headline { max-width: 22ch; }
.blog-hero .ph-lede { max-width: 720px; }
body.flowella-has-dark-hero section.blog-hero { padding: 124px 0 56px; }

/* Posts section — sits flush against the dark hero with just a small
   breathing gap so the colour transition itself acts as the visual
   divider. Bottom padding is trimmed (was 100px) to remove the empty
   stretch between the last card row and the CTA banner that follows.
   We need to:
   1. paint a soft sky tint on this section because `flowella-has-
      dark-hero` paints the *body* deep navy (so the hero gradient can
      bleed under iOS chrome), which would otherwise show through every
      section that doesn't have its own background. The tint also lets
      the white blog cards lift off the surface (the home post-grid
      uses the same `--sky-tint` token, so the visual language is
      consistent across the site).
   2. use `section.blog-list` (specificity 0,1,1) so the padding wins
      over the global `section.s { padding: 140px 0 }` baseline. */
section.blog-list {
  background: var(--sky-tint);
  padding-top: 56px;
  padding-bottom: 80px;
}

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

/* Bento layout (page 1) — 3-col, 2-row grid. The featured card spans
   the left two columns and both rows; two side cards stack in the right
   column, one per row. Heights are linked via grid-template-rows so the
   right column always matches the featured card exactly, regardless of
   summary length. The whole bento sits above the standard 3-up grid
   below it. */
.blog-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.blog-bento .blog-card--featured {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.blog-bento .blog-card--bento-side {
  /* Each side card occupies a single auto-placed cell in column 3. */
  grid-column: 3;
}

/* Featured (bento) card — image on top so the layout reads as one
   tall card, not a horizontal strip. Body copy gets generous padding
   and a slightly larger title. */
.blog-card--featured {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  color: inherit;
}
.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: 16 / 10;
  overflow: hidden;
  background: var(--ink-100);
  flex: 0 0 auto;
}
.blog-card--featured .blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-card--featured .blog-card-body {
  padding: 32px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.blog-card--featured .blog-card-title {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0;
}
.blog-card--featured .blog-card-summary {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-600);
  margin: 0;
}

/* Bento side cards — same .blog-card chrome but the image fills the
   top portion proportionally so they line up next to the featured. */
.blog-card--bento-side .blog-card-image { aspect-ratio: 16 / 9; }

/* 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) {
  /* Tablet — bento collapses to: featured spans full width on top, two
     side cards sit beneath it as a 2-up row. Standard grid drops to
     2-up to match. */
  .blog-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
  }
  .blog-bento .blog-card--featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .blog-bento .blog-card--bento-side { grid-column: auto; }
  .blog-card--featured .blog-card-image { aspect-ratio: 21 / 9; }
  .blog-card--featured .blog-card-body { padding: 28px 28px 32px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  /* Mobile — everything stacks. */
  .blog-bento { grid-template-columns: 1fr; }
  .blog-card--featured .blog-card-image { aspect-ratio: 16 / 9; }
  .blog-card--featured .blog-card-body { padding: 24px 22px 28px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-pagination { gap: 12px; }
  .blog-pagination .page-num { width: 32px; height: 32px; }
  /* Tighten the dark hero further on phones — the global mobile rule
     bumps `.ph--dark` top padding to 112px to clear the nav, but the
     blog hero is denser than the home hero (no art column, no CTAs)
     so we can shave the bottom and let the cards come up sooner. The
     `section.blog-hero` selector mirrors the desktop rule above so it
     beats the site-nav `.ph--dark` override on specificity. */
  body.flowella-has-dark-hero section.blog-hero { padding: 104px 0 40px; }
  section.blog-list { padding-top: 40px; padding-bottom: 56px; }
}

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

/* Back-to-listing pill — sits centred above the topics. Styled as a
   subtle ghost chip rather than a primary button so it never competes
   with in-post CTAs, while still reading as a tappable navigation
   affordance (border + arrow + hover lift). The arrow nudges left on
   hover/focus to telegraph the back direction. */
body.flowella-blog-post .post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 22px;
  padding: 7px 14px 7px 12px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-700);
  background: var(--paper, #fff);
  border: 1px solid var(--ink-200);
  border-radius: 99px;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
body.flowella-blog-post .post-header .wrap-narrow {
  /* `.post-back` is inline-flex; the wrap is block so we need flex on
     the container to centre the pill above the topics row, matching
     the centred title and topics below it. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body.flowella-blog-post .post-back:hover,
body.flowella-blog-post .post-back:focus-visible {
  color: var(--primary);
  border-color: var(--ink-300);
  background: var(--ink-050);
}
body.flowella-blog-post .post-back:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary);
}
body.flowella-blog-post .post-back-arrow {
  font-size: 14px;
  line-height: 1;
  color: var(--primary);
  transition: transform .15s;
}
body.flowella-blog-post .post-back:hover .post-back-arrow,
body.flowella-blog-post .post-back:focus-visible .post-back-arrow {
  transform: translateX(-3px);
}

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