/* DOF Main CSS — generated from dof-current-custom-css-20260224.css + post item style blocks */

/* ==========================================================================
   DOF — CLEAN CUSTOM CSS (Libre Franklin Font System)
   ==========================================================================
   This is a full replacement CSS file based on your current pane content,
   with a centralized, variable-driven font system.

   Global font controls:
   - --dof-font-brand controls all former Franklin Gothic areas
   - --dof-font-brand-* controls weight mapping in one place
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Libre+Franklin:wght@700;800;900&display=swap');

:root {
  --dof-font-brand: 'Libre Franklin', sans-serif;
  --dof-font-sans: 'Inter', sans-serif;
  --dof-font-serif: Georgia, 'Times New Roman', serif;

  --dof-font-brand-bold: 700;
  --dof-font-brand-extrabold: 800;
  --dof-font-brand-black: 900;

  /* Form typography + field text variables */
  --dof-form-label-color: #111111;
  --dof-form-input-text: #111111;
  --dof-form-placeholder: #808080;
  --dof-form-border: #d8d8d8;
  --dof-form-focus: #5200eb;
  --dof-form-btn-top: #5d1eff;
  --dof-form-btn-bottom: #4b18f3;
  --dof-form-field-bg: #f5f5f5;

  /* Heading scales */
  --dof-h1-size: clamp(2.6rem, 1.8rem + 2.2vw, 4.6rem);
  --dof-h2-size: clamp(2.05rem, 1.45rem + 1.5vw, 3.3rem);
  --dof-h3-size: clamp(1.5rem, 1.1rem + 0.9vw, 2.05rem);

  /* Summary / card title scales */
  --dof-thumbnail-title-size: clamp(1.9rem, 1.35rem + 0.75vw, 2.8rem);
  --dof-thumbnail-title-line: 1.1;
  --dof-summary-title-size: 18px;
  --dof-summary-title-line: 1.3;
  --dof-most-popular-title-size: clamp(1.56rem, 1.24rem + 0.56vw, 1.96rem);
  --dof-most-popular-title-line: 1.16;

  /* Category/tag typography */
  --dof-pill-bg: #17171c;
  --dof-pill-bg-hover: #5200eb;
  --dof-pill-text: #ffffff;
  --dof-pill-height: 38px;
  --dof-pill-pad-x: 22px;
  --dof-pill-radius: 15px;
  --dof-pill-font-size: 10.5px;
  --dof-pill-letter-spacing: 0.06em;

  /* Shared typography + spacing vars */
  --dof-header-right-pad: 60px;
  --dof-btn-radius: 18px;
  --dof-btn-min-height: 64px;
  --dof-btn-pad-x: 34px;
  --dof-btn-pad-y: 16px;
  --dof-home-slider-radius: 10px;
  --dof-desc-size-desktop: 1.18rem;
  --dof-desc-size-mobile: 1.04rem;
  --dof-desc-line-height: 1.58;
  --dof-desc-color: #555555;
}

/* Site-wide zoom — desktop only */
@media only screen and (min-width: 768px) {
  #siteWrapper {
    zoom: 0.95;
  }
}

/* Form button padding (all native Squarespace forms) */
.sqs-block-form .sqs-button-element--primary {
  padding: 1rem !important;
}

/* Active nav link — 2px thick underline */
body:not(.header--menu-open) .header-nav-item--active > a:not(.header-nav-folder-title) {
  background-size: 1px 2px !important;
}

/* --- Deconstructions nav highlight swap ---
   When the user is viewing the Deconstructions filter on the Media page,
   remove the underline from "Media" and apply it to "Deconstructions" instead.
   Controlled via body class toggled by syncNavHighlight() in dof-footer.js. */
body.dof-nav-decon-active:not(.header--menu-open) .header-nav-item--active > a {
  background-image: none !important;
}
body.dof-nav-decon-active:not(.header--menu-open) .header-nav-item--external > a[href*="category=Deconstructions"] {
  background-image: linear-gradient(currentColor, currentColor) !important;
  background-repeat: repeat-x !important;
  background-size: 1px 2px !important;
  background-position: 0 calc(100% - 0.1em) !important;
}


/* --- Homepage H1 size override ---
   "Gaming's most-read weekly briefing." was changed to H1 for SEO.
   Force it to render at the same visual size as the site's H2s. */
[data-section-id="698cd47a2b5733565535b89a"] h1 {
  font-size: 37.82px !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: capitalize !important;
}

/* ============================================================================
   TYPOGRAPHY — CLEAN FONT SYSTEM
   ============================================================================
   Font Assignments:
   - Headings (H1-H4):  Libre Franklin (black/extrabold)
   - Navigation:         Libre Franklin Black
   - Buttons:            Libre Franklin Black
   - Site Title:         Libre Franklin Black
   - Paragraph 1 (lg):   Inter
   - Paragraph 2 (def):  Georgia
   - Paragraph 3 (sm):   Georgia
   ============================================================================ */

/* --- HEADINGS --- */
h1,
h2 {
  font-family: var(--dof-font-brand) !important;
  font-weight: var(--dof-font-brand-black) !important;
  font-style: normal !important;
}

h2 strong {
  font-weight: 900;
}

h3,
h4 {
  font-family: var(--dof-font-brand) !important;
  font-weight: var(--dof-font-brand-extrabold) !important;
  font-style: normal !important;
}

/* --- PARAGRAPHS --- */

/* Paragraph 1 (Large) */
p.sqsrte-large {
  font-family: var(--dof-font-sans) !important;
  font-weight: 400 !important;
}

/* Paragraph 2 (Default body) */
p {
  font-family: var(--dof-font-serif) !important;
  font-weight: 400 !important;
}

/* Paragraph 3 (Small) */
p.sqsrte-small {
  font-family: var(--dof-font-serif) !important;
  font-weight: 400 !important;
}

/* --- NAVIGATION --- */
.header-nav-item a,
.header-nav-folder-item a,
.header-menu-nav-item a,
.header-menu-nav-folder-content a,
a#site-title {
  font-family: var(--dof-font-brand) !important;
  font-weight: var(--dof-font-brand-black) !important;
  font-style: normal !important;
}

/* --- BUTTONS --- */
.sqs-button-element--primary,
.sqs-button-element--secondary,
.sqs-button-element--tertiary {
  font-family: var(--dof-font-brand) !important;
  font-weight: var(--dof-font-brand-black) !important;
  font-style: normal !important;
}

/* --- FOOTER --- */
footer#footer-sections,
footer#footer-sections a {
  font-family: var(--dof-font-serif) !important;
}

/* --- FORM LABELS & INPUTS --- */
.form-item .title {
  font-family: var(--dof-font-brand) !important;
  font-weight: var(--dof-font-brand-extrabold) !important;
}

.form-item input,
.form-item textarea,
.form-item select {
  font-family: var(--dof-font-serif) !important;
  font-size: 16px !important;
}

/* --- NEWSLETTER --- */
.newsletter-form-header-title,
.newsletter-form-button .newsletter-form-button-label {
  font-family: var(--dof-font-brand) !important;
  font-weight: var(--dof-font-brand-extrabold) !important;
}

.newsletter-form-field-element {
  font-family: var(--dof-font-serif) !important;
  font-size: 16px !important;
}

/* --- ACCORDION --- */
.accordion-item__title {
  font-family: var(--dof-font-brand) !important;
  font-weight: var(--dof-font-brand-extrabold) !important;
}

.accordion-item__description {
  font-family: var(--dof-font-serif) !important;
}

/* --- BLOG --- */
.blog-item-wrapper article.entry {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding-right: 6vw;
  padding-left: 6vw;
  padding-top: 3vw;
  padding-bottom: 3vw;
}

h1.blog-title,
.blog-item-title h1.entry-title {
  font-family: var(--dof-font-brand) !important;
  font-weight: var(--dof-font-brand-black) !important;
}

.blog-excerpt,
.blog-item-content-wrapper p,
.blog-date,
.blog-categories-list,
.blog-meta-item {
  font-family: var(--dof-font-serif) !important;
}

/* --- PRODUCT --- */
h1.ProductItem-details-title {
  font-family: var(--dof-font-brand) !important;
  font-weight: var(--dof-font-brand-black) !important;
}

.ProductItem-details-excerpt {
  font-family: var(--dof-font-serif) !important;
}

/* --- LIST / AUTO LAYOUT SECTIONS --- */
.list-section-title,
.list-section-title__text,
.list-item-content__title,
.list-item-content__button {
  font-family: var(--dof-font-brand) !important;
  font-weight: var(--dof-font-brand-extrabold) !important;
  font-style: normal !important;
}

.list-item-content__description {
  font-family: var(--dof-font-serif) !important;
}

/* --- SUMMARY BLOCKS --- */
.summary-title,
.summary-title a,
.summary-heading,
.summary-metadata-item,
.summary-header-text,
.summary-metadata-item a,
.summary-read-more-link {
  font-family: var(--dof-font-brand) !important;
  font-weight: var(--dof-font-brand-extrabold) !important;
  font-style: normal !important;
}

.summary-excerpt,
.summary-excerpt p {
  font-family: var(--dof-font-serif) !important;
}

/* --- ANNOUNCEMENT BAR --- */
.sqs-announcement-bar-dropzone p {
  font-family: var(--dof-font-serif) !important;
}

/* ============================================================================
   MOBILE FONT OVERRIDES
   ============================================================================ */
@media only screen and (max-width: 767px) {
  h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  h4 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  p.sqsrte-large {
    font-size: 18px !important;
  }
  p {
    font-size: 15px !important;
  }
  p.sqsrte-small {
    font-size: 13px !important;
  }
}


/* ============================================================================
   HEADER ALIGNMENT — Align nav edges with banner slideshow slide
   ============================================================================
   The banner slideshow slides are 1240px wide within a 1300px container.
   The extra 60px (right padding on ul.slides) creates the "peek" of the
   next slide. This adds matching right padding to the header so the logo
   left edge and the last nav item right edge align perfectly with the
   visible slide boundaries.
   ============================================================================ */

/* header right padding: see END-OF-FILE HEADER RIGHT SPACING SYNC (line ~1640) */

/* ============================================================================
   SLIDESHOW NAV — CSS-ONLY POSITIONING (v2)
   ============================================================================
   The nav wrapper mirrors the slideshow-holder's centering and max-width
   using the same CSS variables and constraints. NO JavaScript positioning.
   ============================================================================ */

/* Hide default Squarespace desktop arrows */
.user-items-list-section .desktop-arrows {
  display: none !important;
}

/* Clip slideshow so slides don't bleed during transitions */
.user-items-list-section {
  overflow: hidden !important;
}

/* Slideshow cursor — pointer on hover (clickable), grabbing on drag */
.user-items-list-banner-slideshow ul.slides {
  cursor: pointer !important;
}
.user-items-list-banner-slideshow ul.slides.is-dragging {
  cursor: grabbing !important;
}

/* === NAV WRAPPER — mirrors slideshow layout === */
#dof-nav-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 44px !important;
  background: #fff !important;
  z-index: 100 !important;
  display: block !important;
  overflow: visible !important;
}

/* Inner centering container — matches slideshow-gutter + slideshow-holder */
#dof-nav-wrapper .dof-nav-centering {
  max-width: 1300px !important;
  margin: 0 auto !important;
  padding: 0 var(--sqs-site-gutter, 4vw) !important;
  box-sizing: content-box !important;
  height: 100% !important;
  position: relative !important;
}

/* Nav content — padding-right: 60px matches ul.slides peek offset */
#dof-nav-wrapper .dof-slideshow-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 100% !important;
  padding-right: 60px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* === DOTS === */
.dof-slideshow-nav__dots {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.dof-slideshow-nav__dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(14, 1, 80, 0.25) !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background 0.3s ease !important;
  flex-shrink: 0 !important;
}

.dof-slideshow-nav__dot:hover {
  background: rgba(14, 1, 80, 0.5) !important;
}

.dof-slideshow-nav__dot--active {
  background: #0E0150 !important;
}

.dof-slideshow-nav__dot--active:hover {
  background: #0E0150 !important;
}

/* === ARROWS === */
.dof-slideshow-nav__arrows {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

.dof-slideshow-nav__arrow {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(14, 1, 80, 0.35) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
  color: #0E0150 !important;
  flex-shrink: 0 !important;
}

.dof-slideshow-nav__arrow:hover {
  border-color: #0E0150 !important;
  background: rgba(14, 1, 80, 0.06) !important;
}

.dof-slideshow-nav__arrow svg {
  width: 14px !important;
  height: 14px !important;
  stroke: rgba(14, 1, 80, 0.6) !important;
  stroke-width: 2.5 !important;
  fill: none !important;
}

.dof-slideshow-nav__arrow:hover svg {
  stroke: #0E0150 !important;
}

/* --- KEYBOARD FOCUS — visible indicators for slideshow controls --- */
.dof-slideshow-nav__dot:focus-visible {
  outline: 2px solid #0E0150 !important;
  outline-offset: 2px !important;
}
.dof-slideshow-nav__arrow:focus-visible {
  outline: 2px solid #0E0150 !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ============================================================================
   SLIDE CONTENT LAYOUT — Bottom-Aligned Black Bar (v3)
   ============================================================================
   Consistent height across all slides. Title + description each clamped
   to 1 line. Description forced to consistent height regardless of
   whether content is plain text or wrapped in <p> tags.
   ============================================================================ */

/* Reset slide layout */
.user-items-list-section .list-item {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

/* Background image fills entire slide */
.user-items-list-section .slide-media-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}

.user-items-list-section .slide-media-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Content bar — full width, black background */
.user-items-list-section .slide-content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #000000 !important;
  padding: 18px 28px 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* Title — see "FINAL FIX — prevent list title clipping" (line ~930) for wrapping rules */
.user-items-list-section .list-item-content__title {
  color: #ffffff !important;
  font-size: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Description — single line, fixed height for consistency */
.user-items-list-section .list-item-content__description {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 15px !important;
  line-height: 21px !important;
  height: 21px !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Inner <p> tags must match exactly */
.user-items-list-section .list-item-content__description p {
  font-size: 15px !important;
  line-height: 21px !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hide button */
.user-items-list-section .list-item-content__button-container {
  display: none !important;
}

/* Navigation link hover — purple */
.header-nav-item a:hover {
  color: #5200e2 !important;
}

/* Dropdown nav links hover */
.header-nav-folder-item a:hover {
  color: #5200e2 !important;
}

/* Mobile nav links hover */
.header-menu-nav-item a:hover {
  color: #5200e2 !important;
}

.header-menu-nav-folder-content a:hover {
  color: #5200e2 !important;
}

/* --- LATEST PODCASTS — Metadata Tag Restructuring --- */

/* Hide the bullet dot before tags */
[data-section-id="698ccc7de67f8d36306c6032"] .summary-metadata-item--tags::before {
  display: none !important;
}

/* Remove left padding/margin that the dot occupied */
[data-section-id="698ccc7de67f8d36306c6032"] .summary-metadata-item--tags {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Hide the duplicate below-title and below-content metadata containers */
[data-section-id="698ccc7de67f8d36306c6032"] .summary-metadata-container--below-title,
[data-section-id="698ccc7de67f8d36306c6032"] .summary-metadata-container--below-content {
  display: none !important;
}

/* Style the JS-created date tag element below the title */
[data-section-id="698ccc7de67f8d36306c6032"] .dof-date-tag {
  font-family: var(--dof-font-serif) !important;
  color: #888888 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  margin-top: 6px !important;
  display: block !important;
}

/* Ensure above-title tags left-align with the title */
[data-section-id="698ccc7de67f8d36306c6032"] .summary-metadata-container--above-title {
  text-align: left !important;
  padding-left: 0 !important;
}

/* --- HOMEPAGE BANNER SLIDESHOW — THICKER BLACK BAR ---
   Makes the black overlay bar ~30% of slide height.
   Equal padding top/bottom centers text vertically.
   Adjust padding values to fine-tune bar thickness. */

.user-items-list-banner-slideshow .slide-content.list-item-card-background {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.user-items-list-banner-slideshow .list-item-content__title {
  font-size: 28px !important;
  line-height: 1.2 !important;
}

@media only screen and (max-width: 767px) {
  .user-items-list-banner-slideshow .slide-content.list-item-card-background {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .user-items-list-banner-slideshow .list-item-content__title {
    font-size: 22px !important;
  }
}

/* ==========================================================================
   DOF — GLOBAL NATIVE SQUARESPACE FORM STYLING
   Targets all Squarespace form blocks site-wide
   ========================================================================== */

/* Root target: native Squarespace form blocks */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper,
.sqs-block-form .form-wrapper {
  box-sizing: border-box;
}

/* Field spacing */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field-list .form-item,
.sqs-block-form .form-wrapper .field-list .form-item {
  margin: 0 0 28px 0 !important;
  padding: 0 !important;
}

/* Label styling */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field-list .title,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field-list legend,
.sqs-block-form .form-wrapper .field-list .title,
.sqs-block-form .form-wrapper .field-list legend {
  font-family: var(--dof-font-brand, "Libre Franklin", sans-serif) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--dof-form-label-color) !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}

/* Hide required helper text + first/last sublabels */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .required-label,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .description.required,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field.first-name > label,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field.last-name > label,
.sqs-block-form .form-wrapper .required-label,
.sqs-block-form .form-wrapper .description.required,
.sqs-block-form .form-wrapper .field.first-name > label,
.sqs-block-form .form-wrapper .field.last-name > label {
  display: none !important;
}

/* Hide Squarespace honeypot field */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .lRuEnDB8VFYJAFVX,
.sqs-block-form .form-wrapper .lRuEnDB8VFYJAFVX {
  display: none !important;
}

/* Input + textarea core style */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field textarea,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field select,
.sqs-block-form .form-wrapper .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.sqs-block-form .form-wrapper .field textarea,
.sqs-block-form .form-wrapper .field select {
  width: 100% !important;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 20px 28px !important;
  border: 1px solid var(--dof-form-border) !important;
  border-radius: 24px !important;
  background: transparent !important;
  color: var(--dof-form-input-text) !important;
  box-shadow: none !important;
  outline: none !important;

  font-family: var(--dof-font-sans, "Inter", sans-serif) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;

  -webkit-appearance: none !important;
  appearance: none !important;
}

/* React form border effect layer */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .form-input-effects-border,
.sqs-block-form .form-wrapper .form-input-effects-border {
  border: 1px solid var(--dof-form-border) !important;
  border-radius: 24px !important;
}

/* Textarea size */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field textarea,
.sqs-block-form .form-wrapper .field textarea {
  min-height: 190px !important;
  resize: vertical !important;
  padding-top: 22px !important;
}

/* Focus */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field input:focus,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field textarea:focus,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field select:focus,
.sqs-block-form .form-wrapper .field input:focus,
.sqs-block-form .form-wrapper .field textarea:focus,
.sqs-block-form .form-wrapper .field select:focus {
  border-color: var(--dof-form-focus) !important;
  background: #ffffff !important;
}

/* Placeholder look */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper input::placeholder,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper textarea::placeholder,
.sqs-block-form .form-wrapper input::placeholder,
.sqs-block-form .form-wrapper textarea::placeholder {
  color: var(--dof-form-placeholder) !important;
  opacity: 1 !important;
  font-family: var(--dof-font-sans, "Inter", sans-serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* Submit wrapper alignment */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .form-button-wrapper,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .form-button-wrapper--align-left,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .form-button-wrapper--align-center,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .form-button-wrapper--align-right,
.sqs-block-form .form-wrapper .form-button-wrapper,
.sqs-block-form .form-wrapper .form-button-wrapper--align-left,
.sqs-block-form .form-wrapper .form-button-wrapper--align-center,
.sqs-block-form .form-wrapper .form-button-wrapper--align-right {
  text-align: center !important;
  margin-top: 18px !important;
}

/* Submit button style */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper button[type="submit"],
.sqs-block[data-definition-name="website.components.form"] .form-wrapper input[type="submit"],
.sqs-block-form .form-wrapper button[type="submit"],
.sqs-block-form .form-wrapper input[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 560px) !important;
  min-height: 84px !important;
  padding: 0 28px !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, var(--dof-form-btn-top) 0%, var(--dof-form-btn-bottom) 100%) !important;
  color: #ffffff !important;

  font-family: var(--dof-font-brand, "Libre Franklin", sans-serif) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Add arrow on button-label variant */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper button[type="submit"] .form-submit-button-label::after,
.sqs-block-form .form-wrapper button[type="submit"] .form-submit-button-label::after {
  content: " \2192";
}

.sqs-block[data-definition-name="website.components.form"] .form-wrapper button[type="submit"]:hover,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper input[type="submit"]:hover,
.sqs-block-form .form-wrapper button[type="submit"]:hover,
.sqs-block-form .form-wrapper input[type="submit"]:hover {
  filter: brightness(0.97) !important;
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .sqs-block[data-definition-name="website.components.form"] .form-wrapper .field-list .form-item,
  .sqs-block-form .form-wrapper .field-list .form-item {
    margin-bottom: 18px !important;
  }

  .sqs-block[data-definition-name="website.components.form"] .form-wrapper .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
  .sqs-block[data-definition-name="website.components.form"] .form-wrapper .field textarea,
  .sqs-block[data-definition-name="website.components.form"] .form-wrapper .field select,
  .sqs-block-form .form-wrapper .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
  .sqs-block-form .form-wrapper .field textarea,
  .sqs-block-form .form-wrapper .field select {
    min-height: 56px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
  }

  .sqs-block[data-definition-name="website.components.form"] .form-wrapper .field textarea,
  .sqs-block-form .form-wrapper .field textarea {
    min-height: 130px !important;
  }

  .sqs-block[data-definition-name="website.components.form"] .form-wrapper button[type="submit"],
  .sqs-block[data-definition-name="website.components.form"] .form-wrapper input[type="submit"],
  .sqs-block-form .form-wrapper button[type="submit"],
  .sqs-block-form .form-wrapper input[type="submit"] {
    width: 100% !important;
    min-height: 58px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
  }
}


/* Squarespace React input effect layer */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .form-input-effects,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .form-input-effects-border,
.sqs-block-form .form-wrapper .form-input-effects,
.sqs-block-form .form-wrapper .form-input-effects-border {
  background: transparent !important;
}

/* Same default look for ALL fields */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field textarea,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field select,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .form-item > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .form-item > textarea,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .form-item > select,
.sqs-block-form .form-wrapper .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.sqs-block-form .form-wrapper .field textarea,
.sqs-block-form .form-wrapper .field select {
  background-color: var(--dof-form-field-bg) !important;
  border: 1px solid var(--dof-form-border) !important;
  box-shadow: none !important;
}

/* React effect layer border (Squarespace forms) */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .form-input-effects-border,
.sqs-block-form .form-wrapper .form-input-effects-border {
  border: 1px solid var(--dof-form-border) !important;
}

/* Same focus behavior for ALL fields (name, email, message, etc.) */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field:focus-within input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field:focus-within textarea,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field:focus-within select,
.sqs-block-form .form-wrapper .field:focus-within input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]),
.sqs-block-form .form-wrapper .field:focus-within textarea,
.sqs-block-form .form-wrapper .field:focus-within select {
  background-color: #ffffff !important;
  border-color: var(--dof-form-focus) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure the purple border appears on first/last name too */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper .field:focus-within .form-input-effects-border,
.sqs-block-form .form-wrapper .field:focus-within .form-input-effects-border {
  border-color: var(--dof-form-focus) !important;
}

/* Prevent autofill white/yellow mismatch */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper input:-webkit-autofill,
.sqs-block[data-definition-name="website.components.form"] .form-wrapper textarea:-webkit-autofill,
.sqs-block-form .form-wrapper input:-webkit-autofill,
.sqs-block-form .form-wrapper textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--dof-form-field-bg) inset !important;
  -webkit-text-fill-color: #111 !important;
  transition: background-color 9999s ease-out 0s !important;
}


/* Force visible arrow on native Squarespace form submit buttons */
.sqs-block[data-definition-name="website.components.form"] .form-wrapper button[type="submit"],
.sqs-block-form .form-wrapper button[type="submit"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.sqs-block[data-definition-name="website.components.form"] .form-wrapper button[type="submit"]::after,
.sqs-block-form .form-wrapper button[type="submit"]::after {
  content: "\2192" !important;
  display: inline-block !important;
  font-size: 1.05em !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

/* Typography Stability Layer */
h1 { font-size: var(--dof-h1-size) !important; line-height: 1.1 !important; }
h2 { font-size: var(--dof-h2-size) !important; line-height: 1.15 !important; }
h3 { font-size: var(--dof-h3-size) !important; line-height: 1.2 !important; }

/* Squarespace components that look like headings but aren't always plain h-tags */
.sqs-block-summary-v2 .summary-title,
.summary-heading,
.list-section-title,
.list-section-title__text,
.user-items-list-item-container .list-item-content__title {
  font-size: var(--dof-h2-size) !important;
  line-height: 1.15 !important;
}

/* Fix homepage list/slideshow title clipping */
.collection-type-index .user-items-list-section .list-item-content__title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  height: auto !important;
  max-height: none !important;
  line-height: 1.15 !important;
}

/* Optional: keep large but safer scaling for these titles */
.collection-type-index .user-items-list-banner-slideshow .list-item-content__title {
  font-size: clamp(1.8rem, 1.2rem + 1.4vw, 3rem) !important;
}

/* FINAL FIX — prevent list title clipping on homepage sliders/cards */
.user-items-list-section .list-item-content__title {
  line-height: 1.18 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0.08em !important;
}

.user-items-list-banner-slideshow .list-item-content__title {
  font-size: clamp(1.9rem, 1.35rem + 1.15vw, 2.45rem) !important;
  line-height: 1.14 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0.08em !important;
}

/* ============================================================================
   SUMMARY / THUMBNAIL TITLE SIZE NORMALIZATION
   ============================================================================ */
/* Squarespace Summary Blocks */
.sqs-block-summary-v2 .summary-title,
.sqs-block-summary-v2 .summary-title a,
.sqs-block-summary-v2 .summary-title-link,
.sqs-block-summary-v2 .summary-heading {
  font-size: var(--dof-thumbnail-title-size) !important;
  line-height: var(--dof-thumbnail-title-line) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* Blog grid/card titles (media thumbnails) */
.blog-basic-grid .blog-item .blog-item-title h1,
.blog-basic-grid .blog-item .blog-item-title a,
.blog-item-title h1.entry-title,
.blog-item-title a {
  font-size: var(--dof-thumbnail-title-size) !important;
  line-height: var(--dof-thumbnail-title-line) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

@media only screen and (max-width: 767px) {
  :root {
    --dof-thumbnail-title-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  }
}

article.blog-item img, .blog-basic-grid .image-wrapper {
  border-radius: 20px !important;
}

.blog-item-top-wrapper {
  margin-bottom: 0 !important;
}


/* ============================================================================ */
/* Post Blog Item styles migrated from Post Item Injection to main stylesheet   */
/* ============================================================================ */

/* ===== Post Injection Style Block 1 ===== */
/* ============================================================================
   RELATED POSTS — SCOPED STYLES
   ============================================================================ */

#dof-related-posts {
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--dof-font-sans, 'Inter', sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 60px 0 40px;
  padding: 48px 4vw 0;
  border-top: 1px solid #e0e0e0;
}

#dof-related-posts *,
#dof-related-posts *::before,
#dof-related-posts *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- HEADING --- */
#dof-related-posts .dof-rp-heading {
  font-family: var(--dof-font-brand, 'Libre Franklin', sans-serif) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  margin-bottom: 32px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

/* --- GRID (3 columns desktop) --- */
#dof-related-posts .dof-rp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 2.4vw, 38px);
}

/* --- CARD --- */
#dof-related-posts .dof-rp-card {
  display: flex;
  flex-direction: column;
  padding: 0 2px 4px;
}

/* --- THUMBNAIL --- */
#dof-related-posts .dof-rp-thumb {
  position: relative;
  width: 100%;
  padding-bottom: 66.66%; /* 3:2 aspect ratio */
  overflow: hidden;
  border-radius: 10px;
  background-color: #f0f0f0;
  margin-bottom: 16px;
}

#dof-related-posts .dof-rp-thumb a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#dof-related-posts .dof-rp-thumb img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* --- META SECTION (badges + date) --- */
#dof-related-posts .dof-rp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* Category badge pills: see END-OF-FILE CATEGORY PILL OVERRIDE (authoritative) */

/* --- DATE --- */
#dof-related-posts .dof-rp-date {
  font-family: var(--dof-font-sans, 'Inter', sans-serif) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: #555555 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}

/* --- TITLE --- */
#dof-related-posts .dof-rp-title {
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
  text-transform: none !important;
}

#dof-related-posts .dof-rp-title a {
  text-decoration: none !important;
  color: inherit !important;
}

#dof-related-posts .dof-rp-title a:hover {
  color: #000000 !important;
}

/* --- EXCERPT --- */
#dof-related-posts .dof-rp-excerpt {
  font-family: var(--dof-font-serif, Georgia, 'Times New Roman', serif) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #555555 !important;
}

/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */
@media only screen and (max-width: 767px) {
  #dof-related-posts {
    margin: 40px 0 30px;
    padding: 32px 20px 0;
  }

  #dof-related-posts .dof-rp-heading {
    margin-bottom: 24px !important;
  }

  #dof-related-posts .dof-rp-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  #dof-related-posts .dof-rp-title {
    font-size: 16px !important;
  }

  #dof-related-posts .dof-rp-excerpt {
    font-size: 13px !important;
  }
}

/* ===== Post Injection Style Block 2 ===== */
/* ============================================================================
   BLOG POST HERO HEADER — SCOPED STYLES
   ============================================================================ */

/* --- HERO WRAPPER --- */
#dof-blog-hero {
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--dof-font-sans, 'Inter', sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-bottom: 32px;
}

#dof-blog-hero *,
#dof-blog-hero *::before,
#dof-blog-hero *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- THUMBNAIL (preserve original uploaded aspect ratio) --- */
#dof-blog-hero .dof-hero-thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background-color: #f0f0f0;
  line-height: 0;
}

#dof-blog-hero .dof-hero-thumb img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* --- TITLE --- */
#dof-blog-hero .dof-hero-title {
  margin-top: 28px !important;
  margin-bottom: 0 !important;
  /* Font-family, size, weight inherit from global h1 / site-compact.css */
}

/* --- EXCERPT --- */
#dof-blog-hero .dof-hero-excerpt {
  font-family: var(--dof-font-serif, Georgia, 'Times New Roman', serif) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: #555555 !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* --- DIVIDER --- */
#dof-blog-hero .dof-hero-divider {
  border: none !important;
  border-top: 1px solid #e0e0e0 !important;
  margin: 24px 0 !important;
}

/* --- META SECTION (badges + date) --- */
#dof-blog-hero .dof-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* Category badge pills: see END-OF-FILE CATEGORY PILL OVERRIDE (authoritative) */

/* --- DATE --- */
#dof-blog-hero .dof-hero-date {
  font-family: var(--dof-font-sans, 'Inter', sans-serif) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: #555555 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}

/* --- HIDE NATIVE TITLE & META (only when hero is active) --- */
.dof-hero-active .blog-item-title {
  display: none !important;
}
.dof-hero-active .blog-item-meta-wrapper {
  display: none !important;
}

/* ============================================================================
   MOBILE RESPONSIVE
   ============================================================================ */
@media only screen and (max-width: 767px) {
  #dof-blog-hero {
    margin-bottom: 24px;
  }

  #dof-blog-hero .dof-hero-thumb {
    border-radius: 8px;
  }

  #dof-blog-hero .dof-hero-thumb img {
    border-radius: 8px;
  }

  #dof-blog-hero .dof-hero-title {
    margin-top: 20px !important;
  }

  #dof-blog-hero .dof-hero-excerpt {
    font-size: 15px !important;
    margin-top: 12px !important;
  }

  #dof-blog-hero .dof-hero-divider {
    margin: 20px 0 !important;
  }
}

/* ============================================================================
   HOMEPAGE HERO LIST TYPOGRAPHY
   - Keep title case exactly as typed in Squarespace (no forced uppercase)
   - Use Inter for description (not Georgia)
   ============================================================================ */
.user-items-list-banner-slideshow .list-item-content__title {
  text-transform: none !important;
  letter-spacing: -0.015em !important;
  line-height: 1.08 !important;
}

.user-items-list-banner-slideshow .list-item-content__description,
.user-items-list-banner-slideshow .list-item-content__description p {
  font-family: var(--dof-font-sans, 'Inter', sans-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.15rem, 0.95rem + 0.5vw, 1.45rem) !important;
  line-height: 1.32 !important;
  letter-spacing: -0.008em !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================================================
   END-OF-FILE CATEGORY PILL OVERRIDE (authoritative)
   ============================================================================ */
.blog-categories-list .blog-categories,
.blog-meta-item--categories a,
.blog-meta-section .blog-categories,
#dof-blog-hero .dof-hero-meta a.dof-hero-cat,
.blog-item-top-wrapper #dof-blog-hero a.dof-hero-cat,
#dof-related-posts .dof-rp-cat {
  background: var(--dof-pill-bg) !important;
  color: var(--dof-pill-text) !important;
  border: 0 !important;
  border-radius: var(--dof-pill-radius) !important;
  height: var(--dof-pill-height) !important;
  padding: 0 var(--dof-pill-pad-x) !important;
  margin-right: 8px !important;
  margin-bottom: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-family: var(--dof-font-brand, 'Libre Franklin', sans-serif) !important;
  font-weight: 800 !important;
  font-size: var(--dof-pill-font-size) !important;
  letter-spacing: var(--dof-pill-letter-spacing) !important;
  line-height: 1 !important;
}

.blog-categories-list .blog-categories:hover,
.blog-meta-item--categories a:hover,
.blog-meta-section .blog-categories:hover,
#dof-blog-hero .dof-hero-meta a.dof-hero-cat:hover,
.blog-item-top-wrapper #dof-blog-hero a.dof-hero-cat:hover,
#dof-related-posts .dof-rp-cat:hover {
  background: var(--dof-pill-bg-hover) !important;
  color: var(--dof-pill-text) !important;
}

/* --- KEYBOARD FOCUS — category pill focus-visible --- */
.blog-categories-list .blog-categories:focus-visible,
.blog-meta-item--categories a:focus-visible,
#dof-blog-hero .dof-hero-meta a.dof-hero-cat:focus-visible,
#dof-related-posts .dof-rp-cat:focus-visible {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
}

/* --- Slide category pill (top-right of homepage slider) --- */
.dof-slide-cat-pill {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--dof-pill-height, 38px);
  padding: 0 var(--dof-pill-pad-x, 22px);
  background: var(--dof-pill-bg-hover, #5200eb);
  color: var(--dof-pill-text, #ffffff);
  border-radius: var(--dof-pill-radius, 15px);
  font-family: 'Libre Franklin', sans-serif;
  font-size: var(--dof-pill-font-size, 10.5px);
  font-weight: 800;
  letter-spacing: var(--dof-pill-letter-spacing, 0.06em);
  text-transform: uppercase;
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}
@media only screen and (max-width: 767px) {
  .dof-slide-cat-pill {
    top: 12px;
    right: 12px;
    height: 30px;
    padding: 0 16px;
    font-size: 9px;
  }
}

/* ============================================================================
   SUMMARY BLOCKS — FORCE 3-COLUMN GRID
   SQS autogrid JS sets inline widths that drop to 2 columns at narrower
   desktop widths. Override with flexbox to lock 3 columns until mobile.
   Applies to: Featured Stories + Latest Podcasts + Consulting "How we think".
   ============================================================================ */
[data-section-id="6983d85dedfc387f22447bb7"] .sqs-gallery-design-autogrid,
[data-section-id="698ccc7de67f8d36306c6032"] .sqs-gallery-design-autogrid,
[data-section-id="698e79c7ef53fc192c407dd1"] .sqs-gallery-design-autogrid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
}

[data-section-id="6983d85dedfc387f22447bb7"] .sqs-gallery-design-autogrid-slide,
[data-section-id="698ccc7de67f8d36306c6032"] .sqs-gallery-design-autogrid-slide,
[data-section-id="698e79c7ef53fc192c407dd1"] .sqs-gallery-design-autogrid-slide {
  width: calc(33.333% - 20px) !important;
  float: none !important;
  clear: none !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

@media only screen and (max-width: 767px) {
  [data-section-id="6983d85dedfc387f22447bb7"] .sqs-gallery-design-autogrid,
  [data-section-id="698ccc7de67f8d36306c6032"] .sqs-gallery-design-autogrid,
  [data-section-id="698e79c7ef53fc192c407dd1"] .sqs-gallery-design-autogrid {
    flex-direction: column !important;
    gap: 24px !important;
  }

  [data-section-id="6983d85dedfc387f22447bb7"] .sqs-gallery-design-autogrid-slide,
  [data-section-id="698ccc7de67f8d36306c6032"] .sqs-gallery-design-autogrid-slide,
  [data-section-id="698e79c7ef53fc192c407dd1"] .sqs-gallery-design-autogrid-slide {
    width: 100% !important;
  }
}

/* ============================================================================
   HOMEPAGE FEATURED STORIES — CATEGORY TAG PILLS
   Matches media + related-post category pill design exactly.
   Targeted directly to block ID + section marker fallback.
   ============================================================================ */
#block-yui_3_17_2_1_1770247284948_6338 .summary-header-text,
#block-yui_3_17_2_1_1770247284948_6338 .summary-block-header,
#block-yui_3_17_2_1_1770247284948_6338 h2,
body.collection-type-index .dof-featured-stories-section .summary-header-text,
body.collection-type-index .dof-featured-stories-section .summary-block-header,
body.collection-type-index .dof-featured-stories-section h2 {
  font-family: var(--dof-font-brand, 'Libre Franklin', sans-serif) !important;
  font-weight: var(--dof-font-brand-black, 900) !important;
  font-size: var(--dof-h2-size) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--tags::before,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--cats::before,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--categories::before,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--tags::before,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--cats::before,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--categories::before {
  display: none !important;
}

#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--tags,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--cats,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--categories,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--tags,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--cats,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--categories {
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--tags .summary-metadata-item--delimiter,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--cats .summary-metadata-item--delimiter,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--categories .summary-metadata-item--delimiter,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--tags .summary-metadata-item--comma,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--cats .summary-metadata-item--comma,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--categories .summary-metadata-item--comma,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--tags .summary-metadata-item--delimiter,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--cats .summary-metadata-item--delimiter,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--categories .summary-metadata-item--delimiter,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--tags .summary-metadata-item--comma,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--cats .summary-metadata-item--comma,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--categories .summary-metadata-item--comma {
  display: none !important;
}

/* Category links styled as plain purple text (matching Latest Podcasts section) */
#block-yui_3_17_2_1_1770247284948_6338 .dof-featured-cat-pill,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--tags a,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--cats a,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--categories a,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item a,
body.collection-type-index .dof-featured-stories-section .dof-featured-cat-pill,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--tags a,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--cats a,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--categories a,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item a {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #5200eb !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 4px 0 0 !important;
  display: inline !important;
  vertical-align: baseline !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-family: var(--dof-font-brand, 'Libre Franklin', sans-serif) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease !important;
}

#block-yui_3_17_2_1_1770247284948_6338 .dof-featured-cat-pill:hover,
#block-yui_3_17_2_1_1770247284948_6338 .dof-featured-cat-pill:focus-visible,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--tags a:hover,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--tags a:focus-visible,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--cats a:hover,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--cats a:focus-visible,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--categories a:hover,
#block-yui_3_17_2_1_1770247284948_6338 .summary-metadata-item--categories a:focus-visible,
body.collection-type-index .dof-featured-stories-section .dof-featured-cat-pill:hover,
body.collection-type-index .dof-featured-stories-section .dof-featured-cat-pill:focus-visible,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--tags a:hover,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--tags a:focus-visible,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--cats a:hover,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--cats a:focus-visible,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--categories a:hover,
body.collection-type-index .dof-featured-stories-section .summary-metadata-item--categories a:focus-visible {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #3d00b3 !important;
}

/* ============================================================================
   CONSULTING "HOW WE THINK" — SUMMARY BLOCK DATE STYLING
   Matches the metadata typography of the homepage summary blocks.
   ============================================================================ */
[data-section-id="698e79c7ef53fc192c407dd1"] .summary-metadata-item--date {
  font-family: var(--dof-font-brand, 'Libre Franklin', sans-serif) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #888888 !important;
  display: inline-block !important;
  line-height: 1.4 !important;
}

/* ============================================================================
   CONSULTING RESULTS — MOBILE STAT CARD SPACING
   More breathing room between the stacked black stat boxes on mobile.
   ============================================================================ */
@media only screen and (max-width: 767px) {
  #dof-stats .stats-grid {
    gap: 50px !important;
  }

  #dof-stats .stat-card {
    padding-bottom: 10px !important;
  }

  #dof-stats .stat-desc {
    margin: 20px 0 0 0 !important;
  }
}

/* ============================================================================
   END-OF-FILE SUMMARY TITLE NORMALIZATION (authoritative)
   ============================================================================ */
.sqs-block-summary-v2 .summary-title,
.sqs-block-summary-v2 .summary-title a,
.sqs-block-summary-v2 .summary-title-link,
.sqs-block-summary-v2 .summary-heading {
  font-family: var(--dof-font-brand, 'Libre Franklin', sans-serif) !important;
  font-size: var(--dof-summary-title-size) !important;
  line-height: var(--dof-summary-title-line) !important;
  font-weight: 800 !important;
  letter-spacing: -0.012em !important;
  text-transform: none !important;
}

/* ============================================================================
   HOMEPAGE "MOST POPULAR" — LIST SUMMARY TITLE BUMP
   Scoped to homepage list-design summary blocks only.
   ============================================================================ */
body.collection-type-index .sqs-block-summary-v2.summary-block-setting-design-list .summary-title,
body.collection-type-index .sqs-block-summary-v2.summary-block-setting-design-list .summary-title a,
body.collection-type-index .sqs-block-summary-v2.summary-block-setting-design-list .summary-title-link,
body.collection-type-index .summary-v2-block-list .summary-title,
body.collection-type-index .summary-v2-block-list .summary-title a,
body.collection-type-index .summary-v2-block-list .summary-title-link {
  font-size: var(--dof-most-popular-title-size) !important;
  line-height: var(--dof-most-popular-title-line) !important;
  letter-spacing: -0.014em !important;
  text-transform: none !important;
}

/* Fallback scope: footer JS tags the section that contains heading text "Most Popular" */
.dof-most-popular-section .summary-title,
.dof-most-popular-section .summary-title a,
.dof-most-popular-section .summary-title-link,
.dof-most-popular-section .summary-heading,
.dof-most-popular-section .list-item-content__title,
.dof-most-popular-section .list-item-content__title a {
  font-size: var(--dof-most-popular-title-size) !important;
  line-height: var(--dof-most-popular-title-line) !important;
  letter-spacing: -0.014em !important;
  text-transform: none !important;
}

@media only screen and (max-width: 767px) {
  :root {
    --dof-most-popular-title-size: clamp(1.16rem, 1rem + 0.44vw, 1.4rem);
  }
}

/* ============================================================================
   END-OF-FILE HEADER RIGHT SPACING SYNC (authoritative)
   JS sets --dof-header-right-pad from homepage slider geometry.
   ============================================================================ */
@media only screen and (min-width: 768px) {
  header#header .header-inner {
    box-sizing: border-box !important;
    padding-right: var(--dof-header-right-pad, 60px) !important;
  }
}

/* MOBILE HEADER — Remove desktop slideshow-alignment padding on mobile */
@media only screen and (max-width: 767px) {
  header#header .header-inner {
    box-sizing: border-box !important;
    padding-right: 0 !important;
  }

  /* Mobile nav menu — reduce oversized nav links and center properly */
  .header-menu-nav-item a,
  .header-menu-nav-folder-content a {
    font-size: 22px !important;
    padding: 10px 0 !important;
  }

  /* ========================================================================
     HOMEPAGE HERO SLIDER — MOBILE OPTIMIZATION
     - Hide pink Squarespace mobile arrows
     - Reduce slide height from 73vh → 45vh (less zoom, more image visible)
     - Pin content overlay flush to bottom of slide
     - Fix description text clipping (allow 2-line wrap)
     - Compact title + custom nav dots for mobile
     ======================================================================== */

  /* Hide the ugly pink Squarespace mobile arrows */
  .user-items-list-section .mobile-arrows {
    display: none !important;
  }

  /* Reduce slide height — SQS sets inline min-height:73vh which fills the
     entire screen. 45vh shows more image, leaves room for nav + next section */
  .user-items-list-banner-slideshow .slides {
    min-height: 45vh !important;
  }
  .user-items-list-banner-slideshow .slideshow-holder,
  .user-items-list-banner-slideshow .slideshow-gutter,
  .user-items-list-banner-slideshow .list-item,
  .user-items-list-banner-slideshow .slide-media-container {
    max-height: 45vh !important;
  }
  .user-items-list-banner-slideshow .slide-media-container img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Pin content overlay flush to bottom of slide — override SQS inline styles.
     Remove overlay's own border-radius/clip-path to prevent title text clipping
     in the top-left corner (parent .list-item already clips to rounded corners) */
  .user-items-list-banner-slideshow .slide-content.list-item-card-background {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 20px 14px !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    overflow: visible !important;
  }

  /* NUCLEAR ANTI-CLIP FIX: Remove clip-path from the ENTIRE slider chain on
     mobile. The end-of-file desktop rules apply clip-path: inset(0 round 10px)
     to .list-item, .slides, and all wrapper elements. These parent-level
     clip-paths clip the overlay text at rounded corners. On mobile the slider
     is nearly full-width so rounded corners matter less — visual rounding is
     preserved via border-radius alone (without the aggressive clip-path). */
  .user-items-list-section .user-items-list-banner-slideshow,
  .user-items-list-section .user-items-list-banner-slideshow .slides,
  .user-items-list-section .user-items-list-banner-slideshow .list-item,
  .user-items-list-section .user-items-list-banner-slideshow .slide-media-container,
  .user-items-list-section [class*="banner-slideshow"] [class*="viewport"],
  .user-items-list-section [class*="banner-slideshow"] [class*="gutter"],
  .user-items-list-section [class*="banner-slideshow"] [class*="carousel"],
  .user-items-list-section [class*="banner-slideshow"] [class*="track"],
  .user-items-list-section [class*="banner-slideshow"] [class*="list"],
  .user-items-list-section [class*="banner-slideshow"] ul.slides {
    clip-path: none !important;
    -webkit-mask-image: none !important;
  }

  /* Title — remove ALL clipping sources: SQS inline clip-path/border-radius,
     and the desktop fixed height (32.5px) that can crop ascenders/descenders */
  .user-items-list-banner-slideshow .list-item-content__title {
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    overflow: visible !important;
    height: auto !important;
    font-size: 19px !important;
    line-height: 1.18 !important;
  }

  /* Fix description text clipping — allow wrapping up to 2 lines */
  .user-items-list-banner-slideshow .list-item-content__description,
  .user-items-list-banner-slideshow .list-item-content__description p {
    white-space: normal !important;
    text-overflow: clip !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
  }

  /* Compact custom nav wrapper (dots + arrows) for mobile */
  #dof-nav-wrapper {
    padding: 8px 0 !important;
  }

  #dof-nav-wrapper .dof-slideshow-nav {
    gap: 8px !important;
  }

  /* Smaller arrow buttons on mobile */
  #dof-nav-wrapper .dof-slideshow-nav__arrow {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  #dof-nav-wrapper .dof-slideshow-nav__arrow svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Remove section top/bottom padding for tighter layout */
  .user-items-list-section .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ============================================================================
   END-OF-FILE BUTTON SHAPE NORMALIZATION (authoritative)
   Unifies corner radius + padding + height across site buttons/forms.
   Colors are intentionally untouched.
   ============================================================================ */
.sqs-button-element--primary,
.sqs-button-element--secondary,
.sqs-button-element--tertiary,
.newsletter-form-button {
  border-radius: var(--dof-btn-radius) !important;
  min-height: var(--dof-btn-min-height) !important;
  padding: var(--dof-btn-pad-y) var(--dof-btn-pad-x) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.sqs-block[data-definition-name="website.components.form"] .form-wrapper button[type="submit"],
.sqs-block[data-definition-name="website.components.form"] .form-wrapper input[type="submit"],
.sqs-block-form .form-wrapper button[type="submit"],
.sqs-block-form .form-wrapper input[type="submit"] {
  border-radius: var(--dof-btn-radius) !important;
  min-height: var(--dof-btn-min-height) !important;
  padding: 0 var(--dof-btn-pad-x) !important;
}

@media only screen and (max-width: 767px) {
  :root {
    --dof-btn-radius: 16px;
    --dof-btn-min-height: 58px;
    --dof-btn-pad-x: 24px;
    --dof-btn-pad-y: 14px;
  }
}

/* ============================================================================
   END-OF-FILE HOMEPAGE SLIDER RADIUS CLIP FIX (authoritative)
   Keeps rounded corners visible while slides are moving.
   ============================================================================ */
.user-items-list-section .user-items-list-banner-slideshow,
.user-items-list-section .user-items-list-banner-slideshow__gutter,
.user-items-list-section .user-items-list-banner-slideshow__viewport,
.user-items-list-section .user-items-list-banner-slideshow__carousel-holder,
.user-items-list-section .user-items-list-banner-slideshow .slides,
.user-items-list-section .user-items-list-banner-slideshow .slide-list,
.user-items-list-section .user-items-list-banner-slideshow__list {
  border-radius: var(--dof-home-slider-radius) !important;
  overflow: hidden !important;
  clip-path: inset(0 round var(--dof-home-slider-radius)) !important;
  transform: translateZ(0);
  contain: paint;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.user-items-list-section .user-items-list-banner-slideshow .list-item,
.user-items-list-section .user-items-list-banner-slideshow .slide-media-container,
.user-items-list-section .user-items-list-banner-slideshow .slide-media-container img {
  border-radius: var(--dof-home-slider-radius) !important;
}

/* Fallback for Squarespace runtime class variants */
.user-items-list-section [class*="banner-slideshow"] [class*="viewport"],
.user-items-list-section [class*="banner-slideshow"] [class*="gutter"],
.user-items-list-section [class*="banner-slideshow"] [class*="carousel"],
.user-items-list-section [class*="banner-slideshow"] [class*="track"],
.user-items-list-section [class*="banner-slideshow"] [class*="list"],
.user-items-list-section [class*="banner-slideshow"] ul.slides {
  border-radius: var(--dof-home-slider-radius) !important;
  overflow: hidden !important;
  clip-path: inset(0 round var(--dof-home-slider-radius)) !important;
  transform: translateZ(0);
  contain: paint;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* ============================================================================
   MOBILE ANTI-CLIP OVERRIDE (must come AFTER end-of-file slider radius rules)
   The wildcard selector [class*="list"] above matches .list-item-content__title
   (because "list" appears in the class name) and applies clip-path: inset(0 round
   10px) !important at specificity 0-3-0. Our earlier mobile rules at 0-2-0 lose.
   This block uses 0-4-0 specificity + later source order to guarantee the override.
   ============================================================================ */
@media only screen and (max-width: 767px) {
  /* Remove clip-path from ALL slider elements on mobile */
  .user-items-list-section .user-items-list-banner-slideshow .list-item,
  .user-items-list-section .user-items-list-banner-slideshow .slides,
  .user-items-list-section .user-items-list-banner-slideshow .slideshow-holder,
  .user-items-list-section .user-items-list-banner-slideshow .slideshow-gutter,
  .user-items-list-section .user-items-list-banner-slideshow .slide-media-container,
  .user-items-list-section [class*="banner-slideshow"] [class*="viewport"],
  .user-items-list-section [class*="banner-slideshow"] [class*="gutter"],
  .user-items-list-section [class*="banner-slideshow"] [class*="carousel"],
  .user-items-list-section [class*="banner-slideshow"] [class*="track"],
  .user-items-list-section [class*="banner-slideshow"] [class*="list"],
  .user-items-list-section [class*="banner-slideshow"] ul.slides {
    clip-path: none !important;
    -webkit-mask-image: none !important;
  }

  /* Title: override desktop fixed height + clip-path from wildcard selector */
  .user-items-list-section .user-items-list-banner-slideshow .list-item-content__title {
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* Overlay: remove clip-path inherited from parent selectors */
  .user-items-list-section .user-items-list-banner-slideshow .slide-content.list-item-card-background {
    clip-path: none !important;
    -webkit-mask-image: none !important;
  }
}

/* ============================================================================
   END-OF-FILE MEDIA TYPOGRAPHY TWEAKS (authoritative)
   - Media page excerpt/description uses Georgia
   - Date metadata uses normal case (e.g. "Feb 9, 2026"), not all caps
   ============================================================================ */
body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-excerpt,
body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-excerpt p,
body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-item-content-wrapper p,
body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-item-content p {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: var(--dof-media-excerpt-size, var(--dof-desc-size-desktop, 1.18rem)) !important;
  color: var(--dof-media-excerpt-color, var(--dof-desc-color, inherit)) !important;
  line-height: var(--dof-media-excerpt-line, var(--dof-desc-line-height, 1.58)) !important;
}

body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-date,
body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-meta-item--date,
body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-meta-item--date time,
body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-meta-item time,
#dof-blog-hero .dof-hero-date {
  text-transform: none !important;
  font-variant-caps: normal !important;
  letter-spacing: normal !important;
}

/* ============================================================================
   END-OF-FILE BROWSE-BY-CATEGORY BUTTON SIZE TUNE (scoped)
   Section ID: 698cd321e098891969d3bf33
   ============================================================================ */
section[data-section-id="698cd321e098891969d3bf33"] .sqs-button-element--primary,
section[data-section-id="698cd321e098891969d3bf33"] .sqs-button-element--secondary,
section[data-section-id="698cd321e098891969d3bf33"] .sqs-button-element--tertiary,
section[data-section-id="698cd321e098891969d3bf33"] .sqs-block-button-element,
section[data-section-id="698cd321e098891969d3bf33"] .list-item-content__button {
  min-height: 54px !important;
  padding: 10px 26px !important;
  line-height: 1 !important;
}

@media only screen and (max-width: 767px) {
  /* Force every button to fill its grid cell exactly — prevents
     long labels like "Deconstructions" from overflowing wider. */
  section[data-section-id="698cd321e098891969d3bf33"] .sqs-button-element--primary,
  section[data-section-id="698cd321e098891969d3bf33"] .sqs-button-element--secondary,
  section[data-section-id="698cd321e098891969d3bf33"] .sqs-button-element--tertiary,
  section[data-section-id="698cd321e098891969d3bf33"] .sqs-block-button-element,
  section[data-section-id="698cd321e098891969d3bf33"] .list-item-content__button {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px !important;
    padding: 9px 12px !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================================
   END-OF-FILE GLOBAL HEADER LINE-HEIGHT BUMP (authoritative)
   Requested increase: approx +0.2
   ============================================================================ */
h1 { line-height: 1.3 !important; }
h2 { line-height: 1.35 !important; }
h3 { line-height: 1.4 !important; }
h4 { line-height: 1.45 !important; }

@media only screen and (max-width: 767px) {
  h1 { line-height: 1.4 !important; }
  h2 { line-height: 1.4 !important; }
  h3 { line-height: 1.5 !important; }
  h4 { line-height: 1.5 !important; }
}

/* ============================================================================
   END-OF-FILE BLOG POST HEADING CASE NORMALIZATION (authoritative)
   Ensures blog post page headings render in regular case (no forced ALL CAPS).
   ============================================================================ */
body.view-item #dof-blog-hero .dof-hero-title,
body.view-item .blog-item-title h1.entry-title,
body.view-item .blog-item-content-wrapper h1,
body.view-item .blog-item-content-wrapper h2,
body.view-item .blog-item-content-wrapper h3,
body.view-item .blog-item-content-wrapper h4,
body.view-item .blog-item-content-wrapper h5,
body.view-item .blog-item-content-wrapper h6,
body.view-item #dof-related-posts .dof-rp-heading,
body.view-item #dof-related-posts .dof-rp-title,
body.view-item .item-pagination-title,
body.view-item .item-pagination a {
  text-transform: none !important;
  font-variant-caps: normal !important;
}

/* ============================================================================
   END-OF-FILE BLOG POST PAGINATION TITLE SIZE TUNE (authoritative)
   Keep prev/next post links significantly smaller than page headers.
   ============================================================================ */
body.view-item .item-pagination .item-pagination-title,
body.view-item .item-pagination .item-pagination-title a,
body.view-item .item-pagination a.item-pagination-link,
body.view-item .item-pagination .item-pagination-link-title,
body.view-item .item-pagination h1,
body.view-item .item-pagination h2,
body.view-item .item-pagination h3,
body.view-item .item-pagination h4 {
  font-size: 16px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.006em !important;
  text-transform: none !important;
  color: #000 !important;
}

@media only screen and (max-width: 767px) {
  /* Add gap between prev/next so titles don't clash */
  body.view-item .item-pagination {
    gap: 16px !important;
    padding: 15px 20px !important;
  }

  /* Smaller, lighter titles that fit the narrow mobile columns */
  body.view-item .item-pagination .item-pagination-title,
  body.view-item .item-pagination .item-pagination-title a,
  body.view-item .item-pagination a.item-pagination-link,
  body.view-item .item-pagination .item-pagination-link-title,
  body.view-item .item-pagination h1,
  body.view-item .item-pagination h2,
  body.view-item .item-pagination h3,
  body.view-item .item-pagination h4 {
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #000 !important;
  }

  /* Clamp titles to 2 lines with ellipsis */
  body.view-item .item-pagination h2.item-pagination-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Shrink the "Previous" / "Next" labels */
  body.view-item .item-pagination-link > div:first-child,
  body.view-item .item-pagination-link span[class*="label"],
  body.view-item .item-pagination-link > div > div:first-child {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #000 !important;
  }

  /* Shrink prev/next arrow icons — force black */
  body.view-item .item-pagination .item-pagination-icon {
    width: 16px !important;
    min-width: 16px !important;
    color: #000 !important;
  }
}

/* ============================================================================
   END-OF-FILE DESCRIPTION SIZE UNIFICATION (authoritative)
   Increase summary/media/related-post descriptions by ~15-20%.
   ============================================================================ */
.sqs-block-summary-v2 .summary-excerpt,
.sqs-block-summary-v2 .summary-excerpt p,
#dof-related-posts .dof-rp-excerpt {
  font-size: var(--dof-desc-size-desktop) !important;
  line-height: var(--dof-desc-line-height) !important;
  color: var(--dof-desc-color) !important;
}

/* Keep excerpt/summary color consistent everywhere */
body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-excerpt,
body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-excerpt p,
body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-item-content-wrapper p,
body[class*="collection-type-blog"] .blog-basic-grid article.blog-item .blog-item-content p {
  color: var(--dof-desc-color) !important;
}

/* Mobile: more breathing room between stacked blog cards on the media page */
@media only screen and (max-width: 767px) {
  body[class*="collection-type-blog"] .blog-basic-grid article.blog-item {
    margin-bottom: 50px !important;
  }
}

/* Fix: filter buttons "sticky hover" on mobile touch devices.
   On touch screens, :hover state persists after a tap, making deselected
   buttons appear active (same black bg + white text). This resets :hover
   to the default style on devices without a true hover pointer, while
   keeping the .active class styling intact.
   NOTE: "body" prefix raises specificity to beat the inline <style> in
   the Code Block (which loads after this CDN stylesheet). */
@media (hover: none) {
  body #dof-blog-filter .dof-filter-btn:hover {
    background-color: #f0f0f0 !important;
    color: #1a1a1a !important;
  }
  body #dof-blog-filter .dof-filter-btn.active:hover {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
  }
}

/* --- KEYBOARD FOCUS — blog filter buttons --- */
body #dof-blog-filter .dof-filter-btn:focus-visible {
  outline: 2px solid #000 !important;
  outline-offset: 2px !important;
}

@media only screen and (max-width: 767px) {
  .sqs-block-summary-v2 .summary-excerpt,
  .sqs-block-summary-v2 .summary-excerpt p,
  #dof-related-posts .dof-rp-excerpt {
    font-size: var(--dof-desc-size-mobile) !important;
  }
}

/* ============================================================================
   END-OF-FILE HOMEPAGE CAROUSEL DESCRIPTION CLIP FIX (authoritative)
   Prevent glyph descenders (p/g/y) from getting clipped in the black bar.
   ============================================================================ */
.user-items-list-banner-slideshow .list-item-content__description,
.user-items-list-banner-slideshow .list-item-content__description p {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.36 !important;
  padding-bottom: 0.1em !important;
}

.user-items-list-banner-slideshow .list-item-content__description p {
  margin: 0 !important;
}

/* Mobile: allow description to wrap to 2 lines with ellipsis instead of
   single-line truncation — gives readers a clearer "there's more" signal. */
@media only screen and (max-width: 767px) {
  .user-items-list-banner-slideshow .list-item-content__description,
  .user-items-list-banner-slideshow .list-item-content__description p {
    white-space: normal !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.35 !important;
    font-size: 14px !important;
  }
}

/* ============================================================================
   SECTION HEADING CASING — match "Featured Stories" / "Latest Podcasts" style
   Squarespace defaults some sections to uppercase; override to capitalize
   for a consistent title-case look across all homepage sections.
   ============================================================================ */
section[data-section-id="6983d9ca53a304164aa7eebc"] h2,  /* "New to Deconstructor of Fun? Start here." */
section[data-section-id="698cd321e098891969d3bf33"] h2,  /* "Browse by Category" */
section[data-section-id="698cd47a2b5733565535b89a"] h2 { /* "Gaming's most-read weekly briefing." */
  text-transform: capitalize !important;
}

/* ============================================================================
   END-OF-FILE FOOTER SUBLINK TYPOGRAPHY
   Inter font, slightly smaller size, tighter spacing.
   ============================================================================ */
footer#footer-sections .sqs-block-content a {
  font-family: var(--dof-font-sans, 'Inter', sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  background-image: none !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

footer#footer-sections .sqs-block-content a:hover {
  opacity: 0.7 !important;
}

footer#footer-sections .sqs-block-content li,
footer#footer-sections .sqs-block-content p {
  font-size: 13px !important;
  margin-bottom: 4px !important;
  line-height: 1.25 !important;
}

/* Footer sublinks in explicit footer section block */
section[data-section-id="6983deee39c3513f76f0ab5d"] .sqs-block-content a,
section[data-section-id="6983deee39c3513f76f0ab5d"] .sqs-block-content p,
section[data-section-id="6983deee39c3513f76f0ab5d"] .sqs-block-content li {
  font-family: var(--dof-font-sans, 'Inter', sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.28 !important;
  letter-spacing: 0 !important;
}

section[data-section-id="6983deee39c3513f76f0ab5d"] .sqs-block-content li,
section[data-section-id="6983deee39c3513f76f0ab5d"] .sqs-block-content p {
  margin-bottom: 4px !important;
}

section[data-section-id="6983deee39c3513f76f0ab5d"] .sqs-block-content h1,
section[data-section-id="6983deee39c3513f76f0ab5d"] .sqs-block-content h2,
section[data-section-id="6983deee39c3513f76f0ab5d"] .sqs-block-content h3,
section[data-section-id="6983deee39c3513f76f0ab5d"] .sqs-block-content h4,
section[data-section-id="6983deee39c3513f76f0ab5d"] .sqs-block-content h5,
section[data-section-id="6983deee39c3513f76f0ab5d"] .sqs-block-content h6 {
  font-size: 15px !important;
  line-height: 1.15 !important;
}

/* Mobile: tighter footer link sizing */
@media only screen and (max-width: 767px) {
  footer#footer-sections .sqs-block-content a {
    font-size: 11px !important;
  }
  footer#footer-sections .sqs-block-content li,
  footer#footer-sections .sqs-block-content p {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }
  /* Copyright line: slightly smaller than nav links (2 IDs beats 1 ID + 1 class) */
  footer#footer-sections #block-yui_3_17_2_1_1770259180897_7611 p {
    font-size: 10px !important;
    margin-bottom: 0 !important;
  }
}

/* Load More button — prevent full-width on mobile */
@media only screen and (max-width: 767px) {
  button#dof-load-more-btn {
    width: auto !important;
    display: inline-block !important;
  }
}

/* ============================================================================
   HERO SECTION CONSISTENCY — TALENT & NEWSLETTER PAGES
   ============================================================================
   Same issue as Media/Community: Squarespace's CSS overrides the boilerplate.
   ============================================================================ */

/* --- TALENT PAGE HERO --- */
@media only screen and (max-width: 767px) {
  #collection-69a49d241d6dd2373d8b721f [data-section-id="69a49e2f15c04e7f9470d82b"] h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  #collection-69a49d241d6dd2373d8b721f [data-section-id="69a49e2f15c04e7f9470d82b"] h4 {
    font-size: 14px !important;
  }
}

/* --- NEWSLETTER PAGE HERO --- */
/* Newsletter uses H2 as its main heading, not H1 */
@media only screen and (max-width: 767px) {
  #collection-69961597fa57f00f95b21f12 [data-section-id="699615a06b568d75d197ac7d"] h2 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  #collection-69961597fa57f00f95b21f12 [data-section-id="699615a06b568d75d197ac7d"] h4 {
    font-size: 14px !important;
  }
}

/* ============================================================================
   HERO SECTION CONSISTENCY — MEDIA & COMMUNITY PAGES
   ============================================================================
   Squarespace's own CSS overrides our boilerplate h1 { font-size: 28px }
   with higher specificity, so we need collection-specific selectors to
   match the Consulting page hero sizing.
   ============================================================================ */

/* --- MEDIA PAGE HERO --- */
@media only screen and (max-width: 767px) {
  #collection-699510657f24c6220ff3e0ec [data-section-id="6995c73cfb8257221b08d4cc"] h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  #collection-699510657f24c6220ff3e0ec [data-section-id="6995c73cfb8257221b08d4cc"] h4 {
    font-size: 14px !important;
  }
}

/* --- COMMUNITY PAGE HERO --- */
@media only screen and (max-width: 767px) {
  #collection-69961ae03d7a2e1c015c15ef [data-section-id="69961ae03d7a2e1c015c15f2"] h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  #collection-69961ae03d7a2e1c015c15ef [data-section-id="69961ae03d7a2e1c015c15f2"] h4 {
    font-size: 14px !important;
  }

  #collection-69961ae03d7a2e1c015c15ef [data-section-id="69961ae03d7a2e1c015c15f2"] p.sqsrte-large {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================================
   CONSULTING PAGE — MOBILE OPTIMIZATIONS
   ============================================================================
   Collection ID: 6988bc468a60db61447fc02a
   ============================================================================ */

/* --- HERO SECTION: Tighten heading + body text --- */
@media only screen and (max-width: 767px) {
  #collection-6988bc468a60db61447fc02a [data-section-id="6988bc4e71330321ee74b5eb"] h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  #collection-6988bc468a60db61447fc02a [data-section-id="6988bc4e71330321ee74b5eb"] p,
  #collection-6988bc468a60db61447fc02a [data-section-id="6988bc4e71330321ee74b5eb"] p.sqsrte-large {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  #collection-6988bc468a60db61447fc02a [data-section-id="6988bc4e71330321ee74b5eb"] h4 {
    font-size: 14px !important;
  }
}

/* --- ALL SECTION H2s: Reduce size on mobile --- */
@media only screen and (max-width: 767px) {
  #collection-6988bc468a60db61447fc02a .page-section h2 {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
}

/* --- TESTIMONIAL CAROUSEL: Shrink quote text + fix photo overlap --- */
@media only screen and (max-width: 767px) {
  #collection-6988bc468a60db61447fc02a #dof-testimonials .testimonial-text {
    font-size: 17px !important;
    line-height: 1.45 !important;
    margin: 0 0 20px 0 !important;
  }

  #collection-6988bc468a60db61447fc02a #dof-testimonials .testimonial-card {
    padding: 32px 24px 64px !important;
  }

  #collection-6988bc468a60db61447fc02a #dof-testimonials .testimonial-photo-wrapper {
    width: 100px !important;
    height: 100px !important;
    margin-top: -50px !important;
  }
}

/* --- SECTION DESCRIPTION TEXT: Match all p.sqsrte-large to pillar description size --- */
@media only screen and (max-width: 767px) {
  #collection-6988bc468a60db61447fc02a .page-section p.sqsrte-large {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}

/* --- STATS / ENGAGEMENTS DELIVER: Stacked 1-per-row --- */
@media only screen and (max-width: 767px) {
  #dof-stats .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  #dof-stats .stat-box {
    padding: 32px 20px 28px !important;
    border-radius: 16px !important;
  }

  #dof-stats .stat-number {
    font-size: 48px !important;
  }

  #dof-stats .stat-label {
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
  }

  #dof-stats .stat-desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 14px 0 0 0 !important;
  }
}

/* --- OPERATORS NOT THEORISTS: Names/titles to Inter font --- */
@media only screen and (max-width: 767px) {
  #collection-6988bc468a60db61447fc02a [data-section-id="698e7e69f9bd3c2ddf91843a"] p.sqsrte-large {
    font-family: var(--dof-font-sans, 'Inter', sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.03em !important;
  }

  /* Keep the intro paragraph block in Georgia at readable size */
  #collection-6988bc468a60db61447fc02a [data-section-id="698e7e69f9bd3c2ddf91843a"] #block-11255024e0efaf033f4a p.sqsrte-large {
    font-family: var(--dof-font-serif, Georgia, 'Times New Roman', serif) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }

  /* Bio descriptions */
  [data-section-id="698e7e69f9bd3c2ddf91843a"] p:not(.sqsrte-large) {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Section H4 subheading */
  [data-section-id="698e7e69f9bd3c2ddf91843a"] h4 {
    font-size: 12px !important;
  }
}

/* Operators section: names/titles to Inter on all viewports
   Using #collection ID for maximum specificity vs FOUC fix + Squarespace defaults */
#collection-6988bc468a60db61447fc02a [data-section-id="698e7e69f9bd3c2ddf91843a"] p.sqsrte-large {
  font-family: var(--dof-font-sans, 'Inter', sans-serif) !important;
}

/* Restore the intro paragraph block to Georgia */
#collection-6988bc468a60db61447fc02a [data-section-id="698e7e69f9bd3c2ddf91843a"] #block-11255024e0efaf033f4a p.sqsrte-large {
  font-family: var(--dof-font-serif, Georgia, 'Times New Roman', serif) !important;
}

/* --- GENERAL SECTION SPACING: Tighten on mobile --- */
@media only screen and (max-width: 767px) {
  #collection-6988bc468a60db61447fc02a .page-section .content-wrapper {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* Hero gets a bit more breathing room */
  #collection-6988bc468a60db61447fc02a [data-section-id="6988bc4e71330321ee74b5eb"] .content-wrapper {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* H4 subheadings (section labels like "What we do", "Results") */
  #collection-6988bc468a60db61447fc02a .page-section h4 {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  /* Hero H4 stays slightly larger than inner section labels */
  #collection-6988bc468a60db61447fc02a [data-section-id="6988bc4e71330321ee74b5eb"] h4 {
    font-size: 14px !important;
  }
}

/* --- SUMMARY BLOCK SPACING FIX: Collapse extra space in "Read Analyses" --- */
/* The mobile Fluid Engine grid has 41 rows with minmax(24px, auto).
   The summary block spans rows 8-40 (32 rows). Even when content is short,
   each row is forced to 24px minimum + 11px gap = massive extra space.
   Fix: Change row minimum to 0 so empty/under-filled rows collapse. */
@media only screen and (max-width: 767px) {
  /* Collapse the grid row minimums — empty rows go to 0 height */
  [data-section-id="698e79c7ef53fc192c407dd1"] .fe-698e79c7d911bd6e863ad7fb {
    grid-template-rows: repeat(41, minmax(0, auto)) !important;
  }

  /* Remove last summary item's inline margin */
  #collection-6988bc468a60db61447fc02a [data-section-id="698e79c7ef53fc192c407dd1"] .summary-item:last-child {
    margin-bottom: 0 !important;
  }
}

/* --- LET'S TALK SECTION: Center text + more top space --- */
@media only screen and (max-width: 767px) {
  /* Center all text in this section */
  #collection-6988bc468a60db61447fc02a [data-section-id="698e854443d8587dac3ac56d"] h2,
  #collection-6988bc468a60db61447fc02a [data-section-id="698e854443d8587dac3ac56d"] p {
    text-align: center !important;
  }

  /* More breathing room above this section */
  #collection-6988bc468a60db61447fc02a [data-section-id="698e854443d8587dac3ac56d"] .content-wrapper {
    padding-top: 48px !important;
  }
}

/* --- FOOTER GAP FIX: Prevent white flash below dark footer on iOS overscroll --- */
@media only screen and (max-width: 767px) {
  footer#footer-sections {
    box-shadow: 0 200px 0 0 #000 !important;
  }
}

/* ============================================================================
   SLIDER NEWSLETTER FORM — HUBERMAN-STYLE LAYOUT
   ============================================================================
   Injected via JS into any banner-slideshow slide whose title contains
   "newsletter". The JS also adds .dof-newsletter-slide to the <li>.

   Layout: Full-width background image (same as other slides). No black
   card container. Title + description + email form sit left-aligned and
   vertically centered over the image. Slide is still draggable.
   ============================================================================ */

/* --- SLIDE LAYOUT ---
   Image stays full-width as the background (Squarespace default).
   Content is absolutely positioned to vertically centre it on the
   left side — Squarespace's justify-content:flex-end on the parent
   slide cannot be overridden via CSS specificity alone. */

/* Remove the black card background, absolutely position center-left.
   pointer-events: none lets drag events pass through the title/description
   to the underlying slide (for drag-to-navigate). Only the form overrides
   this with pointer-events: auto so users can type and click Sign Up. */
.dof-newsletter-slide .slide-content.list-item-card-background {
  background: none !important;
  background-color: transparent !important;
  width: 55% !important;
  max-width: 55% !important;
  padding: 32px 40px 32px 48px !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* --- Title — large, bold, left-aligned --- */
.dof-newsletter-slide .list-item-content__title {
  font-family: 'Libre Franklin', sans-serif !important;
  font-weight: 800 !important;
  font-size: 48px !important;
  line-height: 1.1 !important;
  color: #ffffff !important;
  text-align: left !important;
  margin-bottom: 16px !important;
}

/* --- Description — lighter weight, subtle --- */
.dof-newsletter-slide .list-item-content__description,
.dof-newsletter-slide .list-item-content__description p {
  font-family: var(--dof-font-sans, 'Inter', sans-serif) !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  text-align: left !important;
  margin-bottom: 8px !important;
}

/* --- Form layout — pill input + separate rounded button (matches footer form) --- */
.dof-slider-form {
  margin-top: 24px;
  max-width: 560px;
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
}

.dof-slider-form * {
  pointer-events: auto !important;
}

.dof-slider-form-fields {
  display: flex;
  gap: 16px;
  align-items: stretch;
  position: relative;
}

/* --- Email input — pill-shaped, white, its own container --- */
.dof-slider-form-input {
  flex: 1;
  padding: 18px 24px;
  font-family: var(--dof-font-sans, 'Inter', sans-serif);
  font-size: 16px;
  color: #333;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  outline: none;
  box-sizing: border-box;
  min-width: 0;
  cursor: text !important;
}

.dof-slider-form-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
  font-size: 16px;
}

.dof-slider-form-input:focus {
  outline: none;
}

/* --- Submit button — rounded rectangle, separate from input (matches footer) --- */
.dof-slider-form-btn {
  padding: 18px 44px;
  font-family: 'Libre Franklin', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: #5100ea;
  border: none;
  border-radius: 18px;
  cursor: pointer !important;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background 0.2s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.dof-slider-form-btn:hover {
  background: #4600cc;
  transform: translateY(-1px);
}

.dof-slider-form-btn:active {
  transform: translateY(1px);
}

.dof-slider-form-btn:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

/* --- Success / error messages --- */
.dof-slider-form-msg {
  font-family: var(--dof-font-sans, 'Inter', sans-serif);
  font-size: 13px;
  margin-top: 10px;
  text-align: left;
  padding-left: 24px;
}

.dof-slider-form-msg.success {
  color: #2ecc71;
}

.dof-slider-form-msg.error {
  color: #e74c3c;
}

/* --- Mobile: newsletter slide --- */
@media only screen and (max-width: 767px) {
  .dof-newsletter-slide .slide-content.list-item-card-background {
    /* Reset absolute positioning back to normal flow on mobile */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 5% 32px !important;
    text-align: center !important;
    align-items: center !important;
  }

  .dof-newsletter-slide .list-item-content__title {
    font-size: 28px !important;
    text-align: center !important;
    margin-bottom: 10px !important;
  }

  .dof-newsletter-slide .list-item-content__description,
  .dof-newsletter-slide .list-item-content__description p {
    font-size: 15px !important;
    text-align: center !important;
  }

  .dof-slider-form {
    max-width: 100%;
    margin-top: 16px;
  }

  .dof-slider-form-fields {
    flex-direction: column;
    gap: 10px;
  }

  .dof-slider-form-input {
    padding: 16px 20px;
    font-size: 16px; /* prevent iOS auto-zoom */
  }

  .dof-slider-form-btn {
    width: 100%;
    padding: 16px 24px;
    border-radius: 18px;
  }

  .dof-slider-form-msg {
    text-align: center;
    padding-left: 0;
  }
}