/* ==========================================================================
   Habi – Custom Overrides
   Layered on top of the Framer-generated CSS (line 147 of index.html).
   IMPORTANT: Framer uses two-class selectors (specificity 0,2,0).
   Always use !important when overriding Framer styles or inline styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Responsive Breakpoint Visibility
   Framer renders all breakpoint variants in the HTML and hides/shows them
   via these classes.  Non-ssr-variant elements (decorative images, layout
   helpers) are correctly hidden at the wrong breakpoint.
   Homepage:     torpu9 = desktop ≥1300    m8p21b = tablet 1024-1299
                 2444vp = mobile ≤1023
   Features:     1ast0l4 = desktop ≥1300   tv3b6l = tablet 1024-1299
                 1dm8t61 = mobile ≤1023
   Contact:      1hivnua = desktop ≥1300   14o0yxw = tablet 1024-1299
                 1cgg4wp = mobile ≤1023
   Company:      1yi09p7 = desktop ≥1300   x969dv = tablet 1024-1299
                 1hy7nbs = mobile ≤1023
   Insights:     dm7rm6 = desktop ≥1300    93uwhf = tablet 1024-1299
                 q8pp8c = mobile ≤1023
   Ins/Cat-1:    6kxm6m = desktop ≥1300   v804gy = tablet 1024-1299
                 1opr8k2 = mobile ≤1023
   Ins/Cat-3:    ciitli = desktop ≥1300    17mtrsb = tablet 1024-1299
                 h6pp70 = mobile ≤1023
   Articles:     ggtqpm = desktop ≥1300   5v68jj = tablet 1024-1299
                 f3x2n3 = mobile ≤1023
   Legal:        5gx7jr = desktop ≥1300   17qnk94 = tablet 1024-1299
                 1vjvvxm = mobile ≤1023
   404:          19davg0 = desktop ≥1300   68avyr = tablet 1024-1299
                 1czu73e = mobile ≤1023
   -------------------------------------------------------------------------- */
@media (min-width: 1300px) {
  .hidden-torpu9, .hidden-1ast0l4, .hidden-1hivnua, .hidden-1yi09p7, .hidden-dm7rm6, .hidden-6kxm6m, .hidden-ciitli, .hidden-ggtqpm, .hidden-5gx7jr, .hidden-19davg0 { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1299.98px) {
  .hidden-m8p21b, .hidden-tv3b6l, .hidden-14o0yxw, .hidden-x969dv, .hidden-93uwhf, .hidden-v804gy, .hidden-17mtrsb, .hidden-5v68jj, .hidden-17qnk94, .hidden-68avyr { display: none !important; }
}
@media (max-width: 1023.98px) {
  .hidden-2444vp, .hidden-1dm8t61, .hidden-1cgg4wp, .hidden-1hy7nbs, .hidden-q8pp8c, .hidden-1opr8k2, .hidden-h6pp70, .hidden-f3x2n3, .hidden-1vjvvxm, .hidden-1czu73e { display: none !important; }
}

/* --- Homepage SSR-variant overrides ---
   The homepage SSR has only one content variant.  Force ssr-variant wrappers
   to display:contents so Framer responsive CSS can restyle the same elements. */
@media (min-width: 1024px) and (max-width: 1299.98px) {
  .framer-jSJlD .ssr-variant.hidden-m8p21b { display: contents !important; }
}
@media (max-width: 1023.98px) {
  .framer-jSJlD .ssr-variant.hidden-2444vp { display: contents !important; }
}

/* --- Features SSR-variant overrides ---
   The Features SSR has desktop, tablet, AND phone variant trees.
   At desktop and tablet the base hidden-* rules handle visibility correctly.
   At mobile, 2-class content pairs (desktop: hidden-tv3b6l only) lack
   hidden-1dm8t61, so they'd be visible alongside the tablet variant.
   We hide them explicitly; the :not(.hidden-1ast0l4) guard keeps 3-variant
   phone elements (which carry both hidden-1ast0l4 + hidden-tv3b6l) visible. */
@media (max-width: 1023.98px) {
  .framer-r1lmy .ssr-variant.hidden-tv3b6l:not(.hidden-1ast0l4) {
    display: none !important;
  }
}

/* Prevent horizontal overflow on all viewports. */
.framer-jSJlD.framer-torpu9,
.framer-r1lmy.framer-1ast0l4,
.framer-iqEIW.framer-1hivnua,
.framer-QjdAs.framer-1yi09p7,
.framer-6Rs7l.framer-dm7rm6,
.framer-L0tZc.framer-6kxm6m,
.framer-DqsSN.framer-ciitli,
.framer-1jUhT.framer-ggtqpm,
.framer-4lhYo.framer-5gx7jr,
.framer-g7GQI.framer-19davg0 {
  max-width: 100% !important;
}
@media (max-width: 1023.98px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .framer-jSJlD.framer-torpu9,
  .framer-r1lmy.framer-1ast0l4,
  .framer-iqEIW.framer-1hivnua,
  .framer-QjdAs.framer-1yi09p7,
  .framer-6Rs7l.framer-dm7rm6,
  .framer-L0tZc.framer-6kxm6m,
  .framer-DqsSN.framer-ciitli,
  .framer-1jUhT.framer-ggtqpm,
  .framer-4lhYo.framer-5gx7jr,
  .framer-g7GQI.framer-19davg0,
  #main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* Ensure text containers don't clip button effects (homepage) */
  .framer-jSJlD .framer-2ttlah,
  .framer-jSJlD .framer-9k5v5p {
    overflow: visible !important;
  }
}

/* --------------------------------------------------------------------------
   Rotating Word Reveal
   Three-phrase cycling animation: blur in → hold → blur out on a 12s loop.
   Used in the hero tagline area.
   -------------------------------------------------------------------------- */
.rwc { display: block; position: relative; padding-bottom: 0.15em; }
.rw { white-space: nowrap; }
.rw:first-child { position: relative; }
.rw:not(:first-child) { position: absolute; left: 0; top: 0; }
.rc { display: inline-block; opacity: 0; filter: blur(16px); color: rgba(207, 189, 255, 0.96); }

.rw-0 .rc { animation: s0 12s infinite both; }
@keyframes s0 {
  0%, 0.0% { opacity: 0; filter: blur(16px); }
  3.3% { opacity: 1; filter: blur(0px); }
  29.2% { opacity: 1; filter: blur(0px); }
  33.3%, 100% { opacity: 0; filter: blur(0px); }
}
.rw-1 .rc { animation: s1 12s infinite both; }
@keyframes s1 {
  0%, 33.3% { opacity: 0; filter: blur(16px); }
  36.7% { opacity: 1; filter: blur(0px); }
  62.5% { opacity: 1; filter: blur(0px); }
  66.7%, 100% { opacity: 0; filter: blur(0px); }
}
.rw-2 .rc { animation: s2 12s infinite both; }
@keyframes s2 {
  0%, 66.7% { opacity: 0; filter: blur(16px); }
  70.0% { opacity: 1; filter: blur(0px); }
  95.8% { opacity: 1; filter: blur(0px); }
  100.0%, 100% { opacity: 0; filter: blur(0px); }
}

/* The navigation scroll trigger is a 1px red bar (opacity:0 on live site).
   Build scripts may flip opacity:0→1; force it invisible on all pages. */
[data-framer-name="Trigger: Navigation"] {
  opacity: 0 !important;
}

/* --------------------------------------------------------------------------
   Sticky Header  (desktop + tablet only)
   Transparent in hero, blurred dark background after scrolling past trigger.
   The .scrolled class is toggled by JS (IntersectionObserver).
   On mobile the header is static (position: relative per Framer CSS).
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .framer-xxwixa,
  .framer-15d22ku,
  .framer-1wilm9a,
  .framer-1v4jc4,
  .framer-1u1eqtj,
  .framer-1uzgi35,
  .framer-1m99cdn,
  .framer-1y7fg1h,
  .framer-x7jgdr,
  .framer-oywby8 {
    position: sticky !important;
    top: 0px !important;
    z-index: 4;
  }
}
nav.framer-ou8xH .framer-4j4vvm {
  transition: backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease,
              background-color 0.4s ease, box-shadow 0.4s ease,
              border-color 0.4s ease;
  border: 1px solid transparent;
}
nav.framer-ou8xH.scrolled .framer-4j4vvm {
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  background-color: rgba(14, 15, 17, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}

/* --------------------------------------------------------------------------
   Mobile Nav Adaptation
   The static clone only has the desktop nav — no mobile hamburger variant.
   Hide the center nav links on mobile; keep logo (Left) + CTA (Right).
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .framer-xxwixa,
  .framer-15d22ku,
  .framer-1wilm9a,
  .framer-1v4jc4,
  .framer-1u1eqtj,
  .framer-1uzgi35,
  .framer-1m99cdn,
  .framer-1y7fg1h,
  .framer-x7jgdr,
  .framer-oywby8 {
    padding: 0 24px !important;
    position: relative !important;
    z-index: 6 !important;
  }
  nav.framer-ou8xH {
    max-width: 100% !important;
  }
  nav.framer-ou8xH .framer-4j4vvm {
    padding: 0 16px !important;
  }
  /* Hide center nav links and CTA on mobile */
  nav.framer-ou8xH .framer-1ni7j8s {
    display: none !important;
  }
  nav.framer-ou8xH .framer-112u9ki {
    display: none !important;
  }
  /* Ensure logo fits */
  nav.framer-ou8xH .framer-5q1umm {
    flex: 1 0 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile Hamburger Menu
   Injected by scripts.js on mobile viewports.
   -------------------------------------------------------------------------- */
/* Hamburger button: two lines, becomes X when open */
.mobile-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 48px;
  height: 48px;
  padding: 14px;
  z-index: 10;
  flex-shrink: 0;
}
.mobile-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-hamburger span:first-child {
  margin-bottom: 6px;
}
.mobile-hamburger.open span:first-child {
  opacity: 0;
}
.mobile-hamburger.open span:last-child {
  transform: translateY(-4px);
}
/* Native Framer hamburger (Features page): collapse two lines into one dash */
[data-framer-name="Mobile icon"] .framer-1rup4we,
[data-framer-name="Mobile icon"] .framer-16ln8w7 {
  transition: top 0.3s ease !important;
}
[data-framer-name="Mobile icon"].open .framer-1rup4we,
[data-framer-name="Mobile icon"].open .framer-16ln8w7 {
  top: calc(50% - 0.5px) !important;
}
@media (max-width: 1023.98px) {
  .mobile-hamburger {
    display: block;
  }
}

/* Mobile menu overlay — full-screen, matches habi.app */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 28%, rgba(255, 255, 255, 0.07) 0%, transparent 100%),
    radial-gradient(ellipse 50% 30% at 40% 85%, rgba(255, 255, 255, 0.04) 0%, transparent 100%),
    rgba(14, 14, 17, 0.98);
  z-index: 5;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu-overlay.open {
  display: block;
}
.mobile-menu-content {
  display: flex;
  flex-direction: column;
  padding: 120px 32px 48px;
  min-height: 100%;
}

/* Download CTA at top */
.mobile-menu-overlay .mobile-menu-cta {
  display: inline-block;
  background: #fff;
  color: #0e0f11;
  padding: 14px 32px;
  border-radius: 40px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  align-self: center;
  margin-bottom: 8px;
  transition: opacity 0.2s;
}
.mobile-menu-overlay .mobile-menu-cta:hover {
  opacity: 0.85;
}

/* Divider lines */
.mobile-menu-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 24px 0;
  width: 100%;
}

/* Section groups */
.mobile-menu-section {
  display: flex;
  flex-direction: column;
}
.mobile-menu-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}
.mobile-menu-section a {
  color: #fff;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.6;
  transition: opacity 0.2s;
}
.mobile-menu-section a:hover {
  opacity: 0.7;
}

/* Social links at bottom */
.mobile-menu-social {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.mobile-menu-social a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  transition: opacity 0.2s;
}
.mobile-menu-social a:hover {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Mobile: "Examples" Image Grid
   Desktop has 5 columns in a row — wrap into 2 columns on mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .framer-jSJlD .framer-1oljpaz {
    overflow: hidden !important;
  }
  .framer-jSJlD .framer-fodszk {
    flex-wrap: wrap !important;
    gap: 12px !important;
    overflow: hidden !important;
    max-width: calc(100vw - 48px) !important;
    margin: 0 auto !important;
  }
  .framer-jSJlD .framer-fodszk > div {
    flex: 0 0 calc(50% - 6px) !important;
    width: calc(50% - 6px) !important;
    min-width: 0 !important;
    padding-top: 0 !important;
    overflow: hidden !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile Footer Layout
   The Framer runtime would apply variant class .framer-v-1f30o6c on mobile
   to switch the footer from row to column. Since the runtime doesn't run,
   replicate those variant styles here.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  /* Stack footer columns vertically */
  .framer-8dYlN .framer-1ksnwjy {
    flex-direction: column !important;
    min-height: unset !important;
  }
  /* Logo column: full width */
  .framer-8dYlN .framer-u4jp5n {
    max-width: unset !important;
    flex: none !important;
    width: 100% !important;
    padding: 32px !important;
  }
  /* Links + description column: full width, stacked */
  .framer-8dYlN .framer-1gsg2v9 {
    min-width: unset !important;
    flex: none !important;
    width: 100% !important;
    height: min-content !important;
    padding: 0 32px 32px !important;
    gap: 40px !important;
    justify-content: flex-start !important;
  }
  /* Sitemap row */
  .framer-8dYlN .framer-dwycy3 {
    padding: 0 !important;
  }
  /* Sitemap link groups */
  .framer-8dYlN .framer-fpkhay,
  .framer-8dYlN .framer-zcq6xp {
    gap: 4px !important;
  }
  /* Bottom row: stack vertically */
  .framer-8dYlN .framer-8v2zua {
    flex-direction: column !important;
    align-content: flex-start !important;
    align-items: flex-start !important;
    gap: 40px !important;
  }
  /* Subscription/tagline comes first on mobile */
  .framer-8dYlN .framer-ozn9p4 {
    order: 0 !important;
    min-width: unset !important;
    flex: none !important;
    width: 100% !important;
  }
  /* Copyright comes second on mobile; needs full width to prevent text stacking */
  .framer-8dYlN .framer-by3e3a {
    order: 1 !important;
    flex: none !important;
    width: 100% !important;
    padding: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   Insights Category Tabs
   Desktop variant shows 3 horizontal pills; phone variant shows 1 dropdown
   button ("Category ↓").  On mobile, hide the desktop tab component and
   only show the phone variant.  JS clones the other tabs from Desktop into
   the Phone container and toggles the framer-v-123ywlg class to open/close.
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  [data-framer-name^="Desktop:"].framer-Tk8cD {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  [data-framer-name^="Phone:"].framer-Tk8cD {
    display: none !important;
  }
}
/* Cloned tab options: hidden until dropdown opens */
.phone-tab-option {
  display: none !important;
}
[data-framer-name^="Phone:"].framer-Tk8cD.framer-v-123ywlg .phone-tab-option {
  display: flex !important;
}
/* Dropdown open state: appear above content */
[data-framer-name^="Phone:"].framer-Tk8cD.framer-v-123ywlg {
  z-index: 10 !important;
}

/* --------------------------------------------------------------------------
   Insight Cards Hover
   Border-radius 40px → 120px (matches Framer motion spring curve).
   -------------------------------------------------------------------------- */
.framer-A2f3D .framer-170ar9t {
  transition: border-radius 0.5s cubic-bezier(0.22, 0.87, 0.39, 0.94);
}
.framer-A2f3D.framer-18f0ttf:hover .framer-170ar9t {
  border-radius: 120px !important;
}

/* --------------------------------------------------------------------------
   Company: Team Photo Card Hover
   Border-radius 40px → 120px (matches Framer motion spring curve).
   Large founder cards (framer-ieXp7) and small team cards (framer-aazK3).
   -------------------------------------------------------------------------- */
.framer-ieXp7 .framer-3zbjjx,
.framer-aazK3 .framer-1e7gkn7,
.framer-FIKSy .framer-18bbht0 {
  transition: border-radius 0.5s cubic-bezier(0.22, 0.87, 0.39, 0.94);
}
.framer-ieXp7.framer-66dqtv:hover .framer-3zbjjx,
.framer-aazK3.framer-1amoo5p:hover .framer-1e7gkn7,
.framer-FIKSy.framer-5hckh1:hover .framer-18bbht0 {
  border-radius: 120px !important;
}

/* --------------------------------------------------------------------------
   Audio Play Button
   -------------------------------------------------------------------------- */
button[data-framer-name="Button"] {
  cursor: pointer;
  transition: transform 0.2s ease;
}
button[data-framer-name="Button"]:hover {
  transform: scale(1.05);
}
button[data-framer-name="Button"]:active {
  transform: scale(0.95);
}

/* --------------------------------------------------------------------------
   Nav: Ghost Button Hover
   On habi.app, hovering a nav link shows a dark pill background.
   -------------------------------------------------------------------------- */
a[data-framer-name="Ghost"] {
  transition: background-color 0.3s ease !important;
}
a[data-framer-name="Ghost"]:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* --------------------------------------------------------------------------
   Button & Link Hover / Press
   Replicates the Framer data-highlight overlay brightness effect.
   -------------------------------------------------------------------------- */
[data-highlight="true"],
[data-framer-name="White"] {
  transition: filter 0.2s ease;
  cursor: pointer;
}
[data-highlight="true"]:hover,
[data-framer-name="White"]:hover {
  filter: brightness(0.85) !important;
}
[data-highlight="true"]:active,
[data-framer-name="White"]:active {
  filter: brightness(0.75) !important;
}

/* --------------------------------------------------------------------------
   FAQ Accordion
   Styles for dynamically injected answer paragraphs.
   -------------------------------------------------------------------------- */
.faq-answer p {
  font-family: var(--framer-font-family, Inter, sans-serif);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   Tonner Card Hover  (Features: "One more thing" carousel)
   On hover the text+button slides up and the "Try now" button fades in.
   Default: .framer-ljp160 is at bottom:-88px (from Framer CSS).
   Hover:  bottom:0 reveals the hidden button area.
   -------------------------------------------------------------------------- */
.framer-1g17vfv-container .framer-ZrtQx.framer-hgxung .framer-ljp160 {
  transition: bottom 0.4s cubic-bezier(0.22, 0.87, 0.39, 0.94) !important;
}
.framer-1g17vfv-container .framer-ZrtQx.framer-hgxung:hover .framer-ljp160 {
  bottom: 0px !important;
}
.framer-1g17vfv-container .framer-ZrtQx .framer-k2mye9-container {
  transition: opacity 0.3s ease 0.1s !important;
}
.framer-1g17vfv-container .framer-ZrtQx.framer-hgxung:hover .framer-k2mye9-container {
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Carousel Controls  (Features: "One more thing" arrows)
   JS moves the <fieldset> out of the overflow:hidden container to be a
   sibling after .framer-1g17vfv-container inside the "More" section.
   The original Framer fieldset is absolutely positioned (bottom:-96px),
   overlapping into the section's bottom padding.  Now that the arrows are
   in-flow flex children, reduce the bottom padding to compensate.
   -------------------------------------------------------------------------- */
.framer-r1lmy .framer-1ykonbb {
  padding-bottom: 96px !important;
}
@media (min-width: 1024px) and (max-width: 1299.98px) {
  .framer-r1lmy .framer-1ykonbb { padding-bottom: 56px !important; }
}
@media (max-width: 1023.98px) {
  .framer-r1lmy .framer-1ykonbb { padding-bottom: 40px !important; }
}
.framer-1ykonbb > fieldset.framer--slideshow-controls {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  inset: auto !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}
.framer-1ykonbb > fieldset.framer--slideshow-controls > div {
  position: relative !important;
  display: flex !important;
  gap: 8px !important;
  inset: auto !important;
  pointer-events: auto !important;
}
.framer-1ykonbb > fieldset.framer--slideshow-controls button {
  cursor: pointer !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}
.framer-1ykonbb > fieldset.framer--slideshow-controls button:hover {
  transform: scale(1.08) !important;
}
.framer-1ykonbb > fieldset.framer--slideshow-controls button:active {
  transform: scale(0.95) !important;
  opacity: 0.8 !important;
}

/* --------------------------------------------------------------------------
   Company Page – Founder card links
   -------------------------------------------------------------------------- */
.framer-lexoiv-container > a,
.framer-r4n4oy-container > a {
  cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   Article Cover Image — match text content width
   -------------------------------------------------------------------------- */
.framer-1jUhT .framer-y6gqaf {
  max-width: 640px !important;
}

/* --------------------------------------------------------------------------
   Author Profile Pages
   Author pages reuse the article template breakpoints (ggtqpm/5v68jj/f3x2n3).
   -------------------------------------------------------------------------- */
.author-hero img {
  border-radius: 50% !important;
}

/* Ensure author bio paragraphs have proper spacing */
.author-bio p {
  margin-bottom: 16px !important;
}