/* Bebas Neue headings — PinLayout
   ------------------------------------------------------------------
   Every heading on the theme pages uses Bebas Neue, EXCEPT the
   "About PinLayout" section (.pinlayout-element-9956835), which keeps
   the theme's original faces (Clash Display title + Six Caps words).

   The exclusion is done with :not(.pinlayout-element-9956835 *) on the
   subject, so nothing inside the About section is ever touched — no
   restore rules needed.

   Sizing notes:
   - Bebas Neue is condensed but noticeably WIDER than Six Caps, so the
     theme's giant .ft-six display headings (92–115px, often nowrap) get
     a proportional size correction to stay inside their containers.
   - .tt-cap-word / .first-char are per-word wrappers the split-text JS
     injects into EVERY animated string (headings AND body copy). They
     must inherit — never give them their own family or size. */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/theme/v1/fonts/bebas/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/theme/v1/fonts/bebas/bebas-neue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Family swap: all headings -> Bebas Neue (About section excluded).
   The theme sets its families with element-qualified !important rules
   (e.g. h3.ft-six), so these match that specificity and load later. */
h1:not(.pinlayout-element-9956835 *),
h2:not(.pinlayout-element-9956835 *),
h3:not(.pinlayout-element-9956835 *),
h4:not(.pinlayout-element-9956835 *),
h5:not(.pinlayout-element-9956835 *),
h6:not(.pinlayout-element-9956835 *),
.pxl-item--title:not(.pinlayout-element-9956835 *),
.pxl-post--title:not(.pinlayout-element-9956835 *),
.pxl-caption-title:not(.pinlayout-element-9956835 *),
.ft-six:not(.pinlayout-element-9956835 *),
h1.ft-six:not(.pinlayout-element-9956835 *),
h2.ft-six:not(.pinlayout-element-9956835 *),
h3.ft-six:not(.pinlayout-element-9956835 *),
h4.ft-six:not(.pinlayout-element-9956835 *),
h5.ft-six:not(.pinlayout-element-9956835 *),
h6.ft-six:not(.pinlayout-element-9956835 *),
.error404 .pxl-error-title,
.error404 .pxl-error-subtitle,
.pxl-service-list.layout-service-list-1 .pxl-grid-item .pxl-post--title:not(.pinlayout-element-9956835 *),
.pxl-service-carousel1 .pxl-swiper-thumbs .pxl-post--title:not(.pinlayout-element-9956835 *) {
  font-family: 'Bebas Neue', 'Clash Display', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .015em !important;
  word-spacing: normal !important;
}

/* ---- Size correction: Six Caps sizes assume an ultra-condensed face.
   Bebas is ~1.6x wider at the same size, so bring the giant display
   headings down proportionally (responsive, wraps allowed). */
.ft-six:not(.pinlayout-element-9956835 *),
h1.ft-six:not(.pinlayout-element-9956835 *),
h2.ft-six:not(.pinlayout-element-9956835 *),
h3.ft-six:not(.pinlayout-element-9956835 *),
h4.ft-six:not(.pinlayout-element-9956835 *),
h5.ft-six:not(.pinlayout-element-9956835 *),
h6.ft-six:not(.pinlayout-element-9956835 *) {
  font-size: clamp(38px, 5.8vw, 75px) !important;
  line-height: 1.06 !important;
  white-space: normal !important;
}

/* Service/pillar card titles ("Layout Engine", "AI Smart Setup", …):
   h2s sized like the how-it-works section title — 72px on desktop. */
.pxl-service-list.layout-service-list-1 .pxl-grid-item .pxl-post--title:not(.pinlayout-element-9956835 *),
.pxl-service-carousel1 .pxl-swiper-thumbs .pxl-post--title:not(.pinlayout-element-9956835 *) {
  font-size: clamp(30px, 5.5vw, 72px) !important;
  line-height: 1.05 !important;
}

.error404 .pxl-error-title { font-size: clamp(56px, 9.5vw, 130px) !important; line-height: 1 !important; }
.error404 .pxl-error-subtitle { font-size: clamp(26px, 3.6vw, 44px) !important; }

/* ---- Section headings: one shared display size site-wide (home AND the
   internal pages), matching the how-it-works title — 72px on desktop,
   scaling down below ~1310px.

   The theme marked most section titles as <h1> at assorted sizes (40–50px)
   and differently per page; those are now <h2> in the section templates,
   with page heroes left as the single <h1>. So "h2.pxl-item--title" is the
   section-title slot. Excluded: .ft-six display words (own 75px rule
   above), and anything inside the About section carve-out. */
h2.pxl-item--title:not(.ft-six):not(.pinlayout-element-9956835 *),
h2.pxl-post--title:not(.ft-six):not(.pinlayout-element-9956835 *) {
  font-size: clamp(30px, 5.5vw, 72px) !important;
  line-height: 1.05 !important;
}

/* ---- Pricing/roadmap card titles ("only here", "$4/mo", "roadmap").
   The theme anchors these display words flush to their card edge inside an
   overflow:hidden card, which cropped them. The cards keep their masks (the
   split-glitch reveal needs them); instead they get padding so the heading
   sits fully inside. Padding is on the CARD, not the heading widget — the
   widget isn't the clipper. */
.pinlayout-element-3e6c40f { padding-bottom: 34px !important; }  /* "only here" card */
.pinlayout-element-73c770d { padding-bottom: 68px !important; }  /* "$4/mo" card     */
.pinlayout-element-ed99df8 { padding-top: 28px !important; }     /* "roadmap" card   */

/* "roadmap" specifically: the theme pulls this heading's widget up with
   margin-top:-70px so the word bleeds above its card — but the card masks
   with overflow:hidden, so the top of the word was sliced off (only shows
   at wide viewports, where the card sits higher than the heading). Drop the
   negative pull so the word sits inside the card. */
.pinlayout-element-8526594 .pinlayout-widget-container { margin-top: 0 !important; }

/* ---- "download for mac & windows": the theme gives this button a fixed
   min-width and its (hover) arrow icon an 88px left margin — sized for a
   much shorter stock label. Our longer label plus that margin overflows the
   pill, and justify-content:center pushed the text out past the left edge,
   clipping the first letter. Let the button size to its own content. */
.pinlayout-element-3e6c40f .btn {
  min-width: 0 !important;
  width: auto !important;
  /* The theme also pins max-width per breakpoint (250px at ~1200px), which
     re-clipped the label even with width:auto. Cap at the container instead. */
  max-width: 100% !important;
  white-space: nowrap !important;
}
.pinlayout-element-3e6c40f .btn > svg { margin-left: 10px !important; }

/* Last-resort safety: if the card ever gets narrower than the label needs,
   tighten the pill rather than slicing letters off. */
@media (max-width: 640px) {
  .pinlayout-element-3e6c40f .btn { padding-left: 16px !important; padding-right: 16px !important; }
  .pinlayout-element-3e6c40f .btn > svg { margin-left: 6px !important; }
}

.pinlayout-element-9967f81 h2.pxl-item--title,
.pinlayout-element-33e89d1 h2.pxl-item--title,
.pinlayout-element-8526594 h2.pxl-item--title {
  font-size: clamp(30px, 5.5vw, 72px) !important;
  line-height: 1.12 !important;
  padding-bottom: .08em !important;   /* room for Bebas's tall caps */
  overflow: visible !important;
}

/* ---- Exception to the About-section carve-out: the three display words
   ("Detect / Suggest / Automate") DO take the heading face, at 120px.
   Everything else inside .pinlayout-element-9956835 keeps the theme's
   original Clash Display + Six Caps. Sized viewport-relative so the words
   still fit their column below desktop widths. */
.pinlayout-element-9956835 .pinlayout-element-8086b5d .pxl-item--title,
.pinlayout-element-9956835 .pinlayout-element-8086b5d .pxl-item--title *,
.pinlayout-element-9956835 .pinlayout-element-5890c7c .pxl-item--title,
.pinlayout-element-9956835 .pinlayout-element-5890c7c .pxl-item--title *,
.pinlayout-element-9956835 .pinlayout-element-e42590c .pxl-item--title,
.pinlayout-element-9956835 .pinlayout-element-e42590c .pxl-item--title * {
  font-family: 'Bebas Neue', 'Clash Display', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .015em !important;
  word-spacing: normal !important;
}
.pinlayout-element-9956835 .pinlayout-element-8086b5d .pxl-item--title,
.pinlayout-element-9956835 .pinlayout-element-5890c7c .pxl-item--title,
.pinlayout-element-9956835 .pinlayout-element-e42590c .pxl-item--title {
  font-size: min(8vw, 120px) !important;
  line-height: 1.04 !important;
  white-space: normal !important;
}

/* ---- Buttons all share one face: DM Sans bold, as on "let's work
   together". Bebas is a display face for headings only — never button text. */
.btn .pxl--btn-text,
.btn .pxl--btn-text *,
.btn-readmore .pxl--btn-text,
.btn-readmore .pxl--btn-text * {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
}

/* ---- Split-text wrappers must always inherit (safety — the theme's JS
   injects these into every animated string, body copy included). */
.tt-cap-word,
.first-char {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}