/* ============================================================
   PIWOT temporary bridge — brand layer ONLY
   Font + button chrome. No layout, spacing, opacity, or motion.
   ============================================================ */

@font-face {
  font-family: "Piwot Sans";
  src: url("../fonts/PiwotSans-400.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Piwot Sans";
  src: url("../fonts/PiwotSans-500.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Piwot Sans";
  src: url("../fonts/PiwotSans-550.otf") format("opentype");
  font-weight: 550;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Piwot Sans";
  src: url("../fonts/PiwotSans-600.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Piwot Sans";
  src: url("../fonts/PiwotSans-700.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --pw-near-black: #080808;
  --pw-orange: #ff4701;
  --pw-gray-pill: #4f4c4c;
  --pw-muted: #9a9a9a;
  --pw-white: #ffffff;
  --font-piwot-sans: "Piwot Sans", ui-sans-serif, system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
}

/* Text selection = brand orange (user-facing “red”) */
::selection {
  background: #ff4701;
  color: #0a0a0a;
}
::-moz-selection {
  background: #ff4701;
  color: #0a0a0a;
}

/* Type: Piwot Sans 500 default — do not force weight on every descendant */
html,
body {
  font-family: var(--font-piwot-sans);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
textarea,
select {
  font-family: var(--font-piwot-sans);
}

/* Headings only: Piwot Sans 500 (beats Webflow Generalsans on h2 / .heading-style-*) */
h1,
h2,
h3,
h4,
h5,
h6,
.heading-style-h1,
.heading-style-h2,
.heading-style-h3,
.heading-style-h4,
.heading-style-h5,
.heading-style-h6,
.footer-h2,
.h1-n {
  font-family: var(--font-piwot-sans) !important;
  font-weight: 500 !important;
}

/* Primary = orange square (beUI / betaweb) */
.button_1_layout,
.button_1_layout.is-2x,
.button_1_layout.is-3x,
.button_1_layout.is-100,
.button_1_layout.is-100.is,
.button_1_layout.is-pricing,
.button_1_layout.is-big,
a.button_1_wrap .button_1_layout,
.nav-btn_link.is-pc,
.nav-btn_link,
a.nav-btn_link,
input.button.w-button,
input.button-2.w-button,
.button.w-button:not(.is-secondary):not(.cw-button_secondary) {
  background-color: var(--pw-orange) !important;
  background-image: none !important;
  color: var(--pw-near-black) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-piwot-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  box-shadow: none !important;
}

.button_1_layout,
.button_1_layout.is-2x,
.button_1_layout.is-3x {
  min-height: 2.75rem;
  height: 2.75rem;
  padding: 0 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.button_1_wrap,
a.button_1_wrap {
  border-radius: 0 !important;
  text-decoration: none !important;
}

.button_1_glow,
[class*="button_1_glow"] {
  display: none !important;
}

.btn_text,
.button_1_layout .btn_text {
  color: var(--pw-near-black) !important;
  font-weight: 600 !important;
  font-family: var(--font-piwot-sans) !important;
}

.nav-btn_link,
a.nav-btn_link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0 1.25rem !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

@media (min-width: 640px) {
  .nav-btn_link,
  a.nav-btn_link {
    min-height: 2.75rem;
    height: 2.75rem;
    font-size: 15px !important;
  }
}

/* Sitewide CTA row (same pair as hero: See plans + Book a demo) */
.pw-site-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.pw-site-ctas._2btn-wrap,
._2btn-wrap.vertical .pw-site-ctas {
  flex-direction: row;
}

/* Primary orange square — sitewide (hero + mid-page + footer) */
.pw-btn-primary,
a.pw-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0 1.25rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: var(--pw-orange) !important;
  background-image: none !important;
  color: var(--pw-near-black) !important;
  font-family: var(--font-piwot-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none !important;
  cursor: pointer;
}

@media (min-width: 640px) {
  .pw-btn-primary,
  a.pw-btn-primary {
    min-height: 2.75rem;
    height: 2.75rem;
    font-size: 15px !important;
  }
}

.pw-btn-primary:hover,
a.pw-btn-primary:hover {
  filter: brightness(1.1);
}

/* Secondary pill — hero / site CTAs (not testimonial case-study links) */
.pw-btn-secondary,
a.pw-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0 1.25rem !important;
  border-radius: 24px !important;
  border: 0 !important;
  background-color: var(--pw-gray-pill) !important;
  color: #f4f4f4 !important;
  font-family: var(--font-piwot-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap;
  cursor: pointer;
}

@media (min-width: 640px) {
  .pw-btn-secondary,
  a.pw-btn-secondary {
    min-height: 2.75rem;
    height: 2.75rem;
    font-size: 15px !important;
  }
}

/* Nav secondary wraps only (e.g. Book an Intro) — still pill */
.nav_wrapper .button_secondary-wrap,
.nav_wrapper a.button_secondary-wrap,
.div-block-172 .button_secondary-wrap,
.div-block-172 a.button_secondary-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0 1.25rem !important;
  border-radius: 24px !important;
  border: 0 !important;
  background-color: var(--pw-gray-pill) !important;
  color: #f4f4f4 !important;
  font-family: var(--font-piwot-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap;
  cursor: pointer;
}

.button_secondary-line {
  display: none !important;
}

/* Case study / portfolio CTAs: plain text links with → (not pills) */
.pw-case-link,
a.pw-case-link,
.case-study-btn .pw-case-link {
  display: inline !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: var(--font-piwot-sans) !important;
  font-weight: 500 !important;
  font-size: 0.94rem !important;
  letter-spacing: -0.01em !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  white-space: normal;
  cursor: pointer;
}

.pw-case-link:hover,
a.pw-case-link:hover,
.case-study-btn .pw-case-link:hover {
  color: rgba(255, 255, 255, 0.78) !important;
  filter: none !important;
  text-decoration: none !important;
}

/* Hide leftover Webflow arrows next to portfolio text links */
.case-study-btn .btn_arrow {
  display: none !important;
}

/* Hide Webflow arrows only — do not delete DOM */
.btn_arrow,
.button_1_layout .btn_arrow {
  display: none !important;
}

/* Solution headline: lottie always opens on line 2 after forced <br> */
.problem_head-h2.is-solution .solution-wrap.span-wrapper {
  display: inline-block;
  vertical-align: middle;
}

/* Soften hard Webflow lift on primary wrappers */
.button_1_wrap:hover {
  transform: none !important;
}

.button_1_layout:hover,
.nav-btn_link:hover,
.pw-btn-secondary:hover,
a.pw-btn-secondary:hover {
  filter: brightness(1.1);
}

/* Footer legal row: tuned by the single remaining static-site DialKit panel. */
.footer_section .pw-footer-legal,
.footer_section.pw-cta-section > .pw-footer-legal {
  color: var(--pw-dial-footer-legal-color, #ffffff) !important;
  font-family: var(--font-piwot-sans, "Piwot Sans", system-ui, sans-serif) !important;
  font-size: var(--pw-dial-footer-legal-size, 10px) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  opacity: var(--pw-dial-footer-legal-opacity, 0.4) !important;
  letter-spacing: 0 !important;
}

.footer_section .pw-footer-legal .copy-right,
.footer_section .pw-footer-legal .footer-link,
.footer_section .pw-footer-legal .pw-cookie-settings,
.footer_section .pw-footer-legal .text-block-83 {
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  opacity: 1 !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
}

.footer_section .pw-footer-legal .footer-link:hover,
.footer_section .pw-footer-legal .pw-cookie-settings:hover {
  color: inherit !important;
  opacity: 0.85 !important;
}

.footer_section .footer-h2 {
  max-width: var(--pw-dial-footer-heading-max, 47.5rem) !important;
  font-size: var(--pw-dial-footer-heading-size, 3.05rem) !important;
  line-height: var(--pw-dial-footer-heading-lh, 110%) !important;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--pw-dial-footer-heading-copy-gap, 1rem) !important;
}

.footer_section .footer-copy {
  max-width: var(--pw-dial-footer-copy-max, 32rem) !important;
  font-size: var(--pw-dial-footer-copy-size, 0.99rem) !important;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--pw-dial-footer-copy-buttons-gap, 1.5rem) !important;
}

.footer_section .footer-copy + ._2btn-wrap,
.footer_section ._2btn-wrap.vertical {
  margin-top: 0 !important;
}

/* ---- Sitewide homepage-style nav (work / case / pricing / legal) ---- */
.pw-hide-webflow-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pw-site-nav .pw-btn-ghost,
a.pw-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  background: transparent !important;
  color: var(--pw-muted) !important;
  font-family: var(--font-piwot-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer;
}

.pw-site-nav .pw-btn-ghost:hover,
a.pw-btn-ghost:hover {
  color: var(--pw-white) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.pw-site-nav.is-nav-scrolled .pw-btn-ghost,
.pw-site-nav.is-nav-scrolled a.pw-btn-ghost {
  color: var(--pw-muted) !important;
}

.pw-site-nav.is-nav-scrolled .pw-btn-ghost:hover,
.pw-site-nav.is-nav-scrolled a.pw-btn-ghost:hover {
  color: var(--pw-white) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Case study rich quotes use PIWOT brand orange, not the Webflow pink token. */
.cs_rich blockquote,
.cs_text blockquote,
.pp_rich blockquote,
.text-rich-text blockquote {
  color: var(--pw-orange) !important;
  border-left-color: var(--pw-orange) !important;
}

.cs_next-link:hover .cs_portfolio-lottie,
.cs_next-link:hover img {
  transform: scale(1.025);
}

.cs_next-link .cs_portfolio-lottie,
.cs_next-link img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs_related-section .cs_next-wrapper {
  width: 100%;
}

.cs_related-section .cs_next-wrapper > .caption_heading,
.cs_related-section .cs_next-wrapper > h2,
.cs_related-section .cs_next-wrapper > .cs-next-text,
.cs_related-section .cs_next-wrapper > .spacer-small,
.cs_related-section .cs_next-wrapper > .spacer-medium {
  display: none !important;
}

.cs_related-section .cs_next-wrapper .cs_portfolio_wrap {
  width: 100%;
  max-width: min(100%, 48rem);
  margin-inline: auto;
  overflow: visible;
}

.cs_related-section .cs_next-link {
  display: block;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.cs_related-section .cs_next-link .cs_portfolio-lottie,
.cs_related-section .cs_next-link img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  .cs_related-section {
    overflow-x: hidden;
  }

  .cs_related-section .cs_next-wrapper .cs_portfolio_wrap {
    max-width: 100%;
  }
}

/* "Last few spots left for this month" — removed sitewide */
.off-white-2:has([current-month]),
.div-block-171:has([current-month]),
.div-block-136:has([current-month]),
._2btn-wrap.aaa:has([current-month]) {
  display: none !important;
}

/* Section gaps: driven by DialKit Spacing panel via css/pw-dial.css
   (--pw-dial-pad-section-large / medium / between). Do not hardcode here. */