/* ==========================================================================
   THEME: Tablehopp identity on the Mobiapp base (V2).
   Rule of this file: the template's components stay; we restyle them as
   Tablehopp. Nothing is hidden except the template seller's promo panel.
   Every value is measured from the live tablehopp.app (V1) with
   getComputedStyle:
     ink #1a1a1a · muted #555 · white · grey #f6f6f6 · sky #98cdea
     lilac #efccff · yellow #efdf5c · mint #a1e9a1 · peach #ffc29f
     periwinkle #c8cbff · purple #9c93e8 · red #f24
     H1 Boldonse 65px / 1.42 / -0.02em · H2 48px · body Geist 16px / 1.7
     Button: radius 6px, padding 5px 5px 5px 24px, gap 24px,
             Geist 600 16px uppercase, 40px arrow tile radius 6px
     App Store button (cloud section): #111, 2px white border, radius 10px,
             6px hard shadow, Geist 500 13px uppercase, Apple mark 17x20
     Offset: 2px ink border + hard ink shadow where it earns it
   ========================================================================== */

html body {
  --token-f1097729-7ee4-49f2-88d7-51793cb9132a: #1a1a1a; /* ink */
  --token-1de996ba-7c03-4fe5-b0c6-0765ef51759a: #ffffff; /* surface */
  --token-8c11ca0a-fb2c-433e-a4dd-afd06c0c042c: #555555; /* muted text */
  --token-a4c86bc0-76c1-4fcc-ad73-f151acf06b75: #f6f6f6; /* subtle surface (cards) */
  --token-04356970-d842-4477-a9ee-da136b4d0f16: #1a1a1a; /* brand: V1 accents are ink, colour lives in surfaces */
  --token-02d1823d-e872-4254-b868-964ab265b3ed: #ffca00; /* rating stars: the template's own yellow */
  --token-440e3333-0ceb-443f-9a20-9bc632c4320c: #1a1a1a; /* was orange (review stars): ink */
  --token-bd5d7eec-f41c-4194-a881-aca79d668ed0: #1a1a1a; /* was orange: ink */
  --token-ca955b38-734b-46b6-b000-bdb9a0e8e66d: #ff2244; /* red */
  --token-52f6b291-61ff-4748-aa62-46a6691c517f: #9c93e8; /* purple */

  --th-ink: #1a1a1a;
  --th-sky: #98cdea;
  --th-lilac: #efccff;
  --th-yellow: #efdf5c;
  --th-mint: #a1e9a1;
  --th-peach: #ffc29f;
  --th-spring: cubic-bezier(.34, 1.56, .64, 1);
  --th-arrow-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%231A1A1A' d='M9.6 14.4a.8.8 0 0 1-.566-1.366L13.27 8.8H.8a.8.8 0 1 1 0-1.6h12.469L9.034 2.966a.8.8 0 1 1 1.132-1.132l5.6 5.6a.8.8 0 0 1 0 1.132l-5.6 5.6a.798.798 0 0 1-.566.234Z'/%3E%3C/svg%3E");
  --th-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%23FFFFFF' d='M9.6 14.4a.8.8 0 0 1-.566-1.366L13.27 8.8H.8a.8.8 0 1 1 0-1.6h12.469L9.034 2.966a.8.8 0 1 1 1.132-1.132l5.6 5.6a.8.8 0 0 1 0 1.132l-5.6 5.6a.798.798 0 0 1-.566.234Z'/%3E%3C/svg%3E");
  background: #fff;
}

/* ---- Fonts: the same files tablehopp.app serves. Geist is a variable font
   (V1 maps weights 400–700 to one file), so real weights, no synthetic bold. */
@font-face { font-family: 'Boldonse'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/_fonts/Boldonse-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+20AC, U+2122; }
@font-face { font-family: 'Boldonse'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/_fonts/Boldonse-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/_fonts/Geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/_fonts/Geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==========================================================================
   Type
   ========================================================================== */

html body, html body .framer-text {
  font-family: 'Geist', system-ui, -apple-system, sans-serif !important;
}

/* Display: Boldonse, uppercase, V1 tracking */
html body h1.framer-text,
html body h2.framer-text,
html body h3.framer-text,
html body h4.framer-text,
html body h5.framer-text,
html body h6.framer-text,
html body .framer-text.framer-styles-preset-1v8l85j {
  font-family: 'Boldonse', 'Geist', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance;
}
html body h1.framer-text {
  font-size: clamp(34px, 4.52vw, 65px) !important;
  line-height: 1.95 !important;
}
html body h3.framer-text, html body h4.framer-text, html body h6.framer-text { line-height: 1.95 !important; }
/* Section titles (h2 + the CTA's h6 share Mobiapp preset 1t1oc7p). Boldonse's
   caps are about 1.5x the height of the template's at the same px size, so at
   V1's 48px the titles ate the template's whitespace; 36px keeps its rhythm. */
html body h2.framer-text,
html body .framer-text.framer-styles-preset-1t1oc7p {
  font-size: clamp(26px, 2.5vw, 36px) !important;
  line-height: 1.95 !important;
}
/* The security card's title sits in a narrow column: smaller, so it breaks on
   two lines like the template's instead of four. */
html body [data-framer-name="Security Section "] h3.framer-text { font-size: clamp(22px, 1.95vw, 28px) !important; }
/* The "Discover" panel's title is an h3 at the template's 40px: same size as
   the section titles. */
html body .framer-hl49x5 h3.framer-text { font-size: clamp(26px, 2.5vw, 36px) !important; line-height: 1.95 !important; }
/* Card and panel titles: small Boldonse, like V1's CYKLA / ÄTA / GISSA & TÄVLA */
html body h5.framer-text,
html body .framer-text.framer-styles-preset-1glm7t5,
html body .framer-text.framer-styles-preset-1v8l85j {
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.95 !important;
}
html body :is(h1, h2, h3, h4, h5, h6).framer-text,
html body .framer-text.framer-styles-preset-1v8l85j,
html body .framer-text.framer-styles-preset-1glm7t5 {
  line-height: 1.95 !important;
  padding: .18em .06em .06em !important;
  overflow: visible !important;
}
html body [data-framer-component-type="RichTextContainer"] { overflow: visible !important; }
/* Body copy: V1 is Geist 16px / 1.7 in #555 */
html body .framer-text.framer-styles-preset-1fj015a { line-height: 1.7 !important; }

/* Nav links: V1 is Geist 600 16px uppercase ink */
html body nav .framer-text.framer-styles-preset-di9xin {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: var(--th-ink) !important;
}
html body nav [data-framer-name="Down"] { filter: brightness(0); }
html body nav :is([data-framer-name="Burger Lines"]:not(:has(*)), [data-framer-name="Burger Lines Transform"]) { background-color: var(--th-ink) !important; }

/* ==========================================================================
   Signature button (V1 "Button Black/Blue" + "Button Yellow/Black"):
   label left, 40px arrow tile right, radius 6px. The arrow slides out and
   back in on hover, like V1's two-icon swap.
   ========================================================================== */

html body a[data-framer-name="Primary Button"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 24px !important;
  width: auto !important;
  height: auto !important;
  min-height: 50px !important;
  padding: 5px 5px 5px 24px !important;
  border-radius: 6px !important;
  border: 0 !important;
  box-shadow: none !important;
  background-color: var(--th-yellow) !important;
  transition: transform .15s ease, filter .2s ease !important;
}
html body a[data-framer-name="Primary Button"] .framer-text {
  font-family: 'Geist', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: var(--th-ink) !important;
}
html body a[data-framer-name="Primary Button"]::after {
  content: "" !important;
  position: relative !important;
  inset: auto !important;
  display: block !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: var(--th-ink) var(--th-arrow-white) no-repeat 50% 50% / 16px 16px !important;
}
html body a[data-framer-name="Primary Button"]:hover { filter: brightness(1.03); }
html body a[data-framer-name="Primary Button"]:hover::after { animation: th-arrow .42s cubic-bezier(.16, 1, .3, 1); }
html body a[data-framer-name="Primary Button"]:active { transform: translateY(1px); }
@keyframes th-arrow {
  0% { background-position: 50% 50%; }
  45% { background-position: 44px 50%; }
  46% { background-position: -28px 50%; }
  100% { background-position: 50% 50%; }
}

/* Nav CTA = V1 header CTA: black button, white label, yellow tile */
html body nav a[data-framer-name="Primary Button"] { background-color: var(--th-ink) !important; }
html body nav a[data-framer-name="Primary Button"] .framer-text { color: #fff !important; }
html body nav a[data-framer-name="Primary Button"]::after {
  background: var(--th-yellow) var(--th-arrow-ink) no-repeat 50% 50% / 16px 16px !important;
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* Sky: the template's own "Hero Bg" layer stays, painted with V1's sky
   gradient and the clouds from Tablehopp's cloud section. */
html body [data-framer-name="Hero Section"] {
  --hero-gutter: clamp(20px, 2.0833vw, 40px);
  --hero-top: clamp(112px, 16vh, 140px);
  --hero-copy-width: clamp(320px, 44vw, 600px);
  --hero-art-width: clamp(720px, calc(16.9vw + 627px), 960px);
  --hero-inset: max(var(--hero-gutter), calc((100vw - 1200px) / 2));
  background-color: var(--th-sky) !important;
  height: auto !important;
  min-height: calc(var(--hero-top) + var(--hero-art-width) * .7 + 76px) !important;
  padding: var(--hero-top) var(--hero-gutter) clamp(64px, 10vh, 100px) !important;
}
html body [data-framer-name="Hero Section"] > [data-framer-name="Container"] {
  flex: none !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: auto !important;
  margin-inline: auto;
}
html body [data-framer-name="Hero Section"] h1.framer-text { font-size: clamp(30px, 3.65vw, 52px) !important; }
html body [data-framer-name="Hero Bg"] {
  background: linear-gradient(180deg, #7cbde2 0%, #98cdea 46%, #b8e2fa 100%) !important;
  overflow: hidden !important;
}
html body [data-framer-name="Hero Bg"] img { opacity: 0 !important; }
html body [data-framer-name="Hero Bg"]::before {
  content: "";
  position: absolute;
  inset: -4% -3%;
  pointer-events: none;
  background:
    url(/_brand/clouds/cloud-long-b.png) no-repeat 40% 9% / min(30vw, 430px) auto,
    url(/_brand/clouds/cloud-long-a.png) no-repeat 104% 14% / min(44vw, 640px) auto,
    url(/_brand/clouds/cloud-wisp.png) no-repeat 47% 72% / min(30vw, 430px) auto,
    url(/_brand/clouds/cloud-puff-b.png) no-repeat 108% 98% / min(42vw, 600px) auto,
    url(/_brand/clouds/cloud-puff-a.png) no-repeat -9% 104% / min(46vw, 660px) auto;
  animation: th-drift 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes th-drift { from { transform: translate3d(-18px, 0, 0); } to { transform: translate3d(18px, 0, 0); } }

html body [data-framer-name="Hero Section"] .framer-text { color: var(--th-ink) !important; }
html body [data-framer-name="Hero Section"] p.framer-text { color: #2b2b2b !important; }
html body [data-framer-name="Hero Section"] [data-framer-name="Vector "] { opacity: .45; }
html body [data-framer-name="Hero Content"] {
  width: var(--hero-copy-width) !important;
  max-width: var(--hero-copy-width) !important;
  gap: 0 !important;
}
html body [data-framer-name="Hero Section"] [data-framer-name="Title & Button"] { padding-bottom: 28px !important; }
html body [data-framer-name="Hero Section"] .framer-1c2ybkf { width: 100% !important; max-width: 420px !important; }
html body [data-framer-name="Hero Section"] .framer-1c2ybkf p { font-size: clamp(16px, 1.25vw, 18px) !important; }
html body [data-framer-name="Hero Section"] .framer-fspxk4 {
  width: var(--hero-art-width) !important;
  min-width: 0 !important;
  max-width: none !important;
  top: calc(var(--hero-top) + 12px) !important;
  left: calc(var(--hero-inset) + var(--hero-copy-width) + 48px + var(--hero-art-width) * .42) !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}
@media (max-width: 767px) {
  html body [data-framer-name="Hero Section"] {
    --hero-art-width: clamp(550px, calc(60vw + 320px), 780px);
    min-height: 0 !important;
    padding: 112px 20px 0 !important;
    gap: 24px !important;
  }
  html body [data-framer-name="Hero Content"] { width: 100% !important; max-width: 600px !important; }
  html body [data-framer-name="Hero Section"] h1.framer-text { font-size: clamp(28px, 6.4vw, 38px) !important; }
  html body [data-framer-name="Hero Section"] .framer-1c2ybkf p { font-size: 16px !important; }
  html body [data-framer-name="Hero Section"] .framer-fspxk4 {
    position: relative !important;
    align-self: center;
    top: auto !important;
    left: calc(var(--hero-art-width) * .257) !important;
    transform: none !important;
    margin-bottom: calc(var(--hero-art-width) * -.1);
  }
}

/* Rating badge: the template's own component, without its white pill, so
   the stars sit straight on the sky, aligned with the H1. */
html body [data-framer-name="Title & Button"] [data-framer-name="Desktop 01"] {
  background-color: transparent !important;
  padding-left: 0 !important;
}

/* Users row (kept, placeholder for the real user count): V1 waitlist avatars */
html body [data-framer-name="User Info"] [data-framer-name="User Image"] {
  border: 2px solid #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18) !important;
  box-sizing: border-box !important;
}
html body [data-framer-name="User Info"] .framer-text { color: rgba(25, 25, 25, .72) !important; font-size: 15px !important; }
html body [data-framer-name="Hero Section"] [data-framer-name="User Info"] [data-framer-name="User Image"] { display: none !important; }
html body [data-framer-name="Hero Section"] [data-framer-name="User Info"] { display: none !important; }

/* Hero button (kept) = the App Store button from Tablehopp's cloud section */
html body [data-framer-name="Title & Button"] a[data-framer-name="Primary Button"] {
  gap: 10px !important;
  min-height: 60px !important;
  padding: 16px 34px !important;
  border: 2px solid #fff !important;
  border-radius: 10px !important;
  background-color: #111 !important;
  filter: none !important;
  box-shadow: 6px 6px 0 #111 !important;
  transition: transform .2s var(--th-spring), box-shadow .2s var(--th-spring) !important;
}
html body [data-framer-name="Title & Button"] a[data-framer-name="Primary Button"]::before {
  content: "";
  flex: 0 0 17px;
  width: 17px;
  height: 20px;
  background: url(/_brand/apple-logo-white.svg) no-repeat center / contain;
}
html body [data-framer-name="Title & Button"] a[data-framer-name="Primary Button"]::after { display: none !important; }
html body [data-framer-name="Title & Button"] a[data-framer-name="Primary Button"] .framer-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 17px !important;
  letter-spacing: .04em !important;
  color: #fff !important;
}
@media (hover: hover) and (pointer: fine) {
  html body [data-framer-name="Title & Button"] a[data-framer-name="Primary Button"]:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 4px 4px 0 #111 !important;
  }
}
html body [data-framer-name="Title & Button"] a[data-framer-name="Primary Button"]:focus-visible {
  outline: 3px solid var(--th-ink);
  outline-offset: 5px;
}
html body [data-framer-name="Title & Button"] a[data-framer-name="Primary Button"]:active {
  transform: translate(4px, 4px) !important; box-shadow: 2px 2px 0 #111 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body [data-framer-name="Hero Bg"]::before { animation: none !important; }
  html body a[data-framer-name="Primary Button"],
  html body a[data-framer-name="Primary Button"]:hover::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Sections: V1's rhythm of white, sky, lilac and grey.
   ========================================================================== */

/* Cards: the template's grey cards, each carrying V1's offset (2px ink border,
   hard 6px shadow). Classes are the three card components in this export;
   the security card's transparent rows (framer-FjzQK) stay as they are. */
html body :is(.framer-PfotK, .framer-V50B7, .framer-D8D92).framer-o9bFC {
  border: 2px solid var(--th-ink) !important;
  border-radius: 16px !important;
  box-shadow: 6px 6px 0 var(--th-ink) !important;
  box-sizing: border-box !important;
}
html body [data-framer-name="Problem Section "] [data-framer-name="Card"] { border-radius: 16px !important; }

/* Large media panels get the signature offset (like V1's lilac phone card) */
html body :is([data-framer-name="Feature Card"], [data-framer-name="Feature Card "]) {
  border: 2px solid var(--th-ink) !important;
  box-shadow: 8px 8px 0 var(--th-ink) !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}
html body [data-framer-name="Feature Section "] [data-framer-name^="Container"],
html body [data-framer-name="Feature Section "] [data-framer-name^="Main Content"],
html body [data-framer-name="Feature Section "] [data-framer-name="Card Wrapper"] { overflow: visible !important; }

html body [data-framer-name="Benefit Section"] :is([data-framer-name="Card Wrapper"], [data-framer-name="Title & Card Wrapper"], [data-framer-name="Container"]) { overflow: visible !important; }
html body [data-framer-name="Benefit Section"] [data-framer-name="Card Wrapper"] > [data-framer-name="Image"] {
  border: 2px solid var(--th-ink) !important;
  box-shadow: 8px 8px 0 var(--th-ink) !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

/* "Discover how it works" panel: same sky and clouds as the hero, ink type,
   media-card offset. (.framer-hl49x5 pins this one of the three sections the
   template names "Problem Section ".) */
html body .framer-hl49x5 { overflow: visible !important; padding-bottom: 8px !important; }
html body .framer-hl49x5 > [data-framer-name="Container "] {
  border: 2px solid var(--th-ink) !important;
  box-shadow: 8px 8px 0 var(--th-ink) !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}
html body .framer-hl49x5 [data-framer-name="BG"] {
  background: linear-gradient(180deg, #7cbde2 0%, #98cdea 46%, #b8e2fa 100%) !important;
  overflow: hidden !important;
}
html body .framer-hl49x5 [data-framer-name="BG"] img { opacity: 0 !important; }
html body .framer-hl49x5 [data-framer-name="BG"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    url(/_brand/clouds/cloud-long-a.png) no-repeat 96% 6% / min(38vw, 520px) auto,
    url(/_brand/clouds/cloud-puff-a.png) no-repeat -6% 108% / min(40vw, 560px) auto,
    url(/_brand/clouds/cloud-wisp.png) no-repeat 60% 96% / min(26vw, 360px) auto;
}
html body .framer-hl49x5 .framer-text { color: var(--th-ink) !important; }

/* Icon tiles: pastel square, ink glyph, 2px ink border, 3px offset (V1 feature list) */
html body .framer-o9bFC > :is([data-framer-name="Icon"], [data-framer-name="Icon "]),
html body [data-framer-name="Icon & Text"] > [data-framer-name="Icon"] {
  background-color: var(--th-sky) !important;
  border: 2px solid var(--th-ink) !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px 0 var(--th-ink) !important;
  box-sizing: border-box !important;
}
html body .framer-o9bFC > :is([data-framer-name="Icon"], [data-framer-name="Icon "]) > div:not(:has(img)),
html body [data-framer-name="Icon & Text"] > [data-framer-name="Icon"] > div:not(:has(img)) { background-color: var(--th-ink) !important; }
html body [data-framer-name="Icon & Text"] > [data-framer-name="Icon"] img { filter: brightness(0); }
/* Second feature section: the cards carry no buttons (one CTA per page). */
html body [data-framer-name="Card Right"] > [class*="-container"]:has(> a[data-framer-name="Primary Button"]) { display: none !important; }

/* Security card stays an ink panel; text white on it */
html body [data-framer-name="Security Section "] .framer-text { color: #fff; }

/* ---- Brand mark: the Tablehopp logo in the template's logo slots -------- */
html body nav [data-framer-name="Logo & Menu Wrapper"] > div:first-child > a {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  background: url(/_brand/tablehopp-mark.svg) no-repeat center / contain !important;
}
html body nav [data-framer-name="Logo & Menu Wrapper"] > div:first-child > a > * { visibility: hidden !important; }
html body [data-framer-name="Logo & Text"] > :first-child {
  background: url(/_brand/tablehopp-mark.svg) no-repeat left center / 40px 40px !important;
  min-height: 40px;
}
html body [data-framer-name="Logo & Text"] > :first-child > * { visibility: hidden !important; }

/* ---- Template seller's promo panel ("Get this template / Unlock 350+ ...") */
[data-framer-name="Remove This"] { display: none !important; }

/* ==========================================================================
   COMPOSITION (29 Sep): William's section list.
   Kept: hero (M1), feature panels (M3), feature rows (M4), Trusted by (M8).
   Habitline's About, Use Case + AI Suggestions and the cloud CTA are embeds
   (th-embed.js). The build removes unused template sections, navigation,
   footer and closing CTA from HTML and JavaScript. These selectors remain
   as a defensive fallback for previously cached template modules.
   ========================================================================== */
html body .framer-1rprj3a-container,   /* template nav */
html body .framer-h4mxu-container,     /* template footer */
html body .framer-1pgsuuy-container,   /* template closing CTA (M11) */
html body section.framer-13h3pub,      /* M2 Problem */
html body section.framer-1o6iibx,      /* M5 Benefit */
html body section.framer-hl49x5,       /* M6 Discover */
html body section.framer-7sf3vo,       /* M7 How it works */
html body section.framer-1lf3y2l,      /* M9 Security */
html body section.framer-6zbuu7 {      /* M10 FAQ */
  display: none !important;
}

/* ---- Embeds ---------------------------------------------------------- */
.th-embed { position: relative; width: 100%; box-sizing: border-box; background: #fff; }
.th-embed-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity .5s ease; }
.th-embed-frame.th-ready { opacity: 1; }
/* off screen and laid out: the frame stops rendering, and with it Habitline's tickers and animation loops
   (they share this page's thread). th-embed.js wakes it 250px before it is needed. */
.th-embed-frame.th-off { content-visibility: hidden; }
.th-embed-auto .th-embed-frame { position: relative; z-index: 1; }
#th-embed-footer { background: linear-gradient(#fff, #f6f6f6 140px); }
@media (min-width: 600px) and (max-width: 1023px) {
  #th-embed-footer { background: linear-gradient(var(--th-sky), #f6f6f6 140px); }
}
#th-embed-footer::before {
  content: "";
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: clamp(220px, 22vw, 300px);
  pointer-events: none;
  background:
    url(/_brand/clouds/cloud-long-a.png) no-repeat -12vw 0 / max(65vw, 700px) auto,
    url(/_brand/clouds/cloud-long-b.png) no-repeat 55vw -25px / max(60vw, 600px) auto,
    linear-gradient(transparent 0%, #fff 35%, transparent 100%);
  -webkit-mask-image: linear-gradient(transparent 0%, #000 30%, transparent 100%);
          mask-image: linear-gradient(transparent 0%, #000 30%, transparent 100%);
}
section.framer-10sip8d .framer-1xm6rv4 { display: none !important; }
section.framer-10sip8d .framer-59jdeo { display: none !important; }
section.framer-10sip8d .framer-2htn7h-container .framer-wfgac2-container { display: none !important; }
section.framer-10sip8d .framer-2htn7h-container .framer-1egysrn > .framer-mGvfp { display: none !important; }
section.framer-10sip8d .framer-dvx2b8 .framer-gjhya {
  width: 100% !important;
  min-height: 340px;
  padding: 32px !important;
  justify-content: flex-start !important;
}
section.framer-10sip8d .framer-b9cesk { flex: 1 0 auto !important; justify-content: space-between !important; gap: 32px !important; }
section.framer-10sip8d .framer-81txuf .framer-text { font-size: 18px !important; line-height: 1.6 !important; }
section.framer-10sip8d .framer-2htn7h-container .framer-b9cesk { padding-top: 32px; }
section.framer-10sip8d :is(.framer-olefwv-container, .framer-1abcarl-container, .framer-p7b45-container) .framer-wfgac2-container {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  align-self: center !important;
  width: min(100%, 300px) !important;
  height: 108px !important;
  flex: 0 0 auto !important;
}
section.framer-10sip8d :is(.framer-olefwv-container, .framer-1abcarl-container, .framer-p7b45-container) .framer-wfgac2-container::before,
section.framer-10sip8d :is(.framer-olefwv-container, .framer-1abcarl-container, .framer-p7b45-container) .framer-wfgac2-container::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 100px;
  background: url(/_brand/review-laurel.svg) center / contain no-repeat;
  pointer-events: none;
}
section.framer-10sip8d :is(.framer-olefwv-container, .framer-1abcarl-container, .framer-p7b45-container) .framer-wfgac2-container::before { left: 0; }
section.framer-10sip8d :is(.framer-olefwv-container, .framer-1abcarl-container, .framer-p7b45-container) .framer-wfgac2-container::after { right: 0; transform: scaleX(-1); }
section.framer-10sip8d :is(.framer-olefwv-container, .framer-1abcarl-container, .framer-p7b45-container) .framer-ArmLh { width: auto !important; height: auto !important; gap: 4px !important; }
section.framer-10sip8d :is(.framer-olefwv-container, .framer-1abcarl-container, .framer-p7b45-container) [data-framer-name="Rating"] {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
}
@media (max-width: 1199px) {
  section.framer-10sip8d .framer-dvx2b8 .framer-gjhya { padding: 24px !important; }
  section.framer-10sip8d :is(.framer-olefwv-container, .framer-1abcarl-container, .framer-p7b45-container) .framer-wfgac2-container { width: min(100%, 268px) !important; height: 96px !important; }
  section.framer-10sip8d :is(.framer-olefwv-container, .framer-1abcarl-container, .framer-p7b45-container) .framer-wfgac2-container::before,
  section.framer-10sip8d :is(.framer-olefwv-container, .framer-1abcarl-container, .framer-p7b45-container) .framer-wfgac2-container::after { width: 38px; height: 88px; }
  section.framer-10sip8d :is(.framer-olefwv-container, .framer-1abcarl-container, .framer-p7b45-container) [data-framer-name="Rating"] { width: 26px !important; height: 26px !important; flex-basis: 26px !important; }
}
@media (max-width: 767px) {
  section.framer-10sip8d .framer-dvx2b8 .framer-gjhya { min-height: 0; }
  section.framer-10sip8d .framer-2htn7h-container .framer-b9cesk { padding-top: 0; }
}

section.framer-10sip8d :is(.framer-1abcarl-container, .framer-p7b45-container) .framer-gjhya {
  position: relative;
  justify-content: center !important;
  min-height: 340px !important;
}
section.framer-10sip8d :is(.framer-1abcarl-container, .framer-p7b45-container) .framer-81txuf,
section.framer-10sip8d :is(.framer-1abcarl-container, .framer-p7b45-container) .framer-1egysrn > .framer-mGvfp { display: none !important; }
section.framer-10sip8d :is(.framer-1abcarl-container, .framer-p7b45-container) .framer-b9cesk {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  width: auto !important;
  flex: 0 0 auto !important;
  gap: 0 !important;
}
section.framer-10sip8d :is(.framer-1abcarl-container, .framer-p7b45-container) .framer-1egysrn {
  justify-content: center !important;
  width: 100% !important;
}
section.framer-10sip8d :is(.framer-1abcarl-container, .framer-p7b45-container) .framer-bezcjz .framer-text { text-align: center !important; }
section.framer-10sip8d :is(.framer-1abcarl-container, .framer-p7b45-container) [data-framer-name="Rating"] { opacity: 1 !important; }
@media (max-width: 1199px) {
  section.framer-10sip8d :is(.framer-1abcarl-container, .framer-p7b45-container) .framer-b9cesk { bottom: 24px; left: 24px; right: 24px; }
}
@media (max-width: 767px) {
  section.framer-10sip8d :is(.framer-1abcarl-container, .framer-p7b45-container) .framer-gjhya { min-height: 280px !important; }
}

/* The cloud band between About and the feature panels: Habitline's own clouds (drawn here because the frame
   would clip them) on a light sky haze, dense in the middle and light at the top and bottom. Sizes are design
   px at 1440 x --u, so it scales with the page. The panels and their heading paint over it: the Feature
   section's white background is made transparent (the page is white anyway). */
.th-fog {
  --u: max(0.0694vw, 0.45px);
  position: absolute; left: 0; right: 0; z-index: 0; overflow: hidden; pointer-events: none;
  height: calc(640 * var(--u)); bottom: calc(-364 * var(--u));
  background: linear-gradient(to bottom, rgba(152, 205, 234, 0) 0%, rgba(152, 205, 234, .30) 38%, rgba(152, 205, 234, .30) 62%, rgba(152, 205, 234, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 26%, #000 70%, transparent 100%);
}
.th-fog img { position: absolute; display: block; max-width: none; height: auto; user-select: none; opacity: 0; transition: opacity .8s ease; }
.th-fog img.th-in { opacity: 1; }
.th-fog-1 { left: calc(-380 * var(--u)); top: calc(150 * var(--u)); width: calc(2200 * var(--u)); }
.th-fog-2 { left: calc(780 * var(--u));  top: calc(170 * var(--u)); width: calc(720 * var(--u)); }
.th-fog-3 { left: calc(-60 * var(--u));  top: calc(190 * var(--u)); width: calc(560 * var(--u)); }
html body section.framer-5t98mx { background-color: transparent !important; }
html body section.framer-1h6df78 .framer-rgz6wp img { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) { .th-embed-frame, .th-fog img { transition: none; } }
.th-scrub-scroll { position: relative; width: 100%; background: var(--th-sky); }
.th-scrub-pin { position: static; height: 100%; width: 100%; overflow: hidden; background: var(--th-sky); }
@media (min-width: 1024px) {
  .th-scrub-scroll { min-height: 100svh; }
  .th-scrub-pin { position: sticky; top: 0; height: 100svh; }
  .th-scrub-pin .th-embed-frame { height: 100svh; }
}

/* ---- th-chrome: nav (Habitline's three pills, Tablehopp's offset) ------- */
#th-nav {
  will-change: transform;
  position: fixed; top: 16px; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: center; align-items: stretch;
  padding: 0 16px; pointer-events: none; font-family: 'Geist', system-ui, sans-serif;
}
/* apart at the top, together when scrolling down (th-chrome.js toggles .th-joined): the row keeps
   its original width endpoints; the pill groups move with transforms instead of animated layout. */
#th-nav .th-nav-row {
  display: flex; align-items: stretch; gap: 10px; box-sizing: border-box;
  width: min(1200px, 100%);
}
#th-nav.th-joined .th-nav-row { width: var(--th-join-w, 760px); }
#th-nav .th-nav-l, #th-nav .th-nav-r { flex: 1 1 0; min-width: max-content; display: flex; }
#th-nav .th-nav-r { justify-content: flex-end; }
#th-nav .th-nav-r { align-items: center; gap: 12px; }
#th-nav .th-language { display: grid; place-items: center; flex: 0 0 40px; height: 40px; pointer-events: auto; color: var(--th-ink); background: #fff; border: 2px solid var(--th-ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--th-ink); font: 600 12px/1 'Geist', sans-serif; text-decoration: none; }
#th-nav .th-language:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--th-ink); }
#th-nav .th-language:focus-visible { outline: 3px solid var(--th-sky); outline-offset: 5px; }
@media (max-width: 480px) {
  #th-nav .th-nav-r { gap: 8px; }
  #th-nav .th-cta .th-arrow { display: none; }
  #th-nav .th-cta { padding-right: 16px; }
  html[lang="en"] body section.framer-hgiwbg .framer-1v6dcrs-container { width: 100% !important; max-width: 100% !important; }
  html[lang="en"] body section.framer-hgiwbg .framer-2xGgk { width: 100% !important; min-width: 0 !important; height: auto !important; }
  html[lang="en"] body section.framer-hgiwbg .framer-1ajhr9 { flex: 1 1 0 !important; min-width: 0 !important; overflow: visible !important; }
  html[lang="en"] body section.framer-hgiwbg .framer-slptef { flex: 1 1 0 !important; min-width: 0 !important; }
  html[lang="en"] body section.framer-hgiwbg .framer-slptef p { white-space: normal !important; }
}
#th-nav .th-pill {
  pointer-events: auto; display: flex; flex: none; align-items: center; box-sizing: border-box; height: 56px; white-space: nowrap;
  background: #fff; color: var(--th-ink); text-decoration: none;
  border: 2px solid var(--th-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--th-ink);
}
#th-nav .th-logo { gap: 10px; padding: 0 18px 0 12px; }
#th-nav .th-logo img { display: block; width: 34px; height: 34px; }
#th-nav .th-logo span { font-family: 'Boldonse', 'Geist', sans-serif; font-size: 13px; letter-spacing: -.02em; text-transform: uppercase; }
#th-nav .th-links { gap: 4px; padding: 0 8px; }
#th-nav .th-links a {
  padding: 9px 14px; border-radius: 8px; color: var(--th-ink); text-decoration: none;
  font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; transition: background .15s ease;
}
#th-nav .th-links a:hover { background: var(--th-sky); }
#th-nav .th-cta {
  gap: 16px; padding: 5px 5px 5px 20px; background: var(--th-ink); color: #fff;
  font-size: 14px; font-weight: 600; text-transform: uppercase; white-space: nowrap;
  transition: transform .2s var(--th-spring), box-shadow .2s var(--th-spring);
}
@media (hover: hover) and (pointer: fine) {
  #th-nav .th-cta:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--th-ink); }
}
#th-nav .th-cta:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--th-ink); }
#th-nav a:focus-visible { outline: 3px solid var(--th-sky); outline-offset: 5px; }
#th-nav .th-arrow, #th-footer .th-arrow {
  display: block; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 6px;
  background: var(--th-yellow) var(--th-arrow-ink) no-repeat 50% 50% / 16px 16px;
}
@media (max-width: 899px) {
  #th-nav .th-nav-row, #th-nav.th-joined .th-nav-row { width: 100%; transition: none; }
  #th-nav .th-links { display: none; }
}
@media (max-width: 479px) {
  #th-nav { top: 12px; padding: 0 12px; }
  #th-nav .th-logo { padding: 0 10px; }
  #th-nav .th-logo span { display: none; }
  #th-nav .th-cta { gap: 12px; padding-left: 16px; font-size: 13px; }
}

/* ---- th-chrome: footer (Habitline's layout, Tablehopp's tokens) --------- */
#th-footer { background: #fff; color: var(--th-ink); font-family: 'Geist', system-ui, sans-serif; padding: 72px 30px 0; box-sizing: border-box; }
#th-footer .th-foot-in { max-width: 1320px; margin: 0 auto; display: flex; justify-content: space-between; gap: 48px 64px; flex-wrap: wrap; }
#th-footer .th-foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 420px; }
#th-footer .th-foot-logo { display: flex; align-items: center; gap: 12px; color: var(--th-ink); text-decoration: none; }
#th-footer .th-foot-logo span { font-family: 'Boldonse', 'Geist', sans-serif; font-size: 18px; letter-spacing: -.02em; text-transform: uppercase; }
#th-footer .th-foot-tag { margin: 0; font-size: 18px; line-height: 1.5; color: #555; }
#th-footer .th-store {
  display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 16px 34px; box-sizing: border-box;
  background: #111; color: #fff; text-decoration: none; border: 2px solid #fff; border-radius: 10px; box-shadow: 6px 6px 0 #111;
  font-size: 13px; font-weight: 500; letter-spacing: .04em; line-height: 17px; text-transform: uppercase;
  transition: transform .2s var(--th-spring), box-shadow .2s var(--th-spring);
}
#th-footer .th-store svg { width: 17px; height: 20px; flex: none; fill: #fff; }
#th-footer .th-store:hover, #th-footer .th-store:focus-visible { transform: translate(3px, 3px); box-shadow: 3px 3px 0 #111; outline: none; }
#th-footer .th-foot-cols { display: flex; gap: 40px 64px; flex-wrap: wrap; }
#th-footer .th-foot-cols div { display: flex; flex-direction: column; gap: 14px; min-width: 150px; }
#th-footer h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--th-ink); }
#th-footer .th-foot-cols a { color: #555; text-decoration: none; font-size: 17px; line-height: 1.4; }
#th-footer .th-foot-cols a:hover { color: var(--th-ink); text-decoration: underline; }
#th-footer .th-foot-bar { max-width: 1320px; margin: 56px auto 0; padding: 24px 0 32px; border-top: 1px solid #e6e6e6; font-size: 15px; color: #555; }
@media (max-width: 599px) {
  #th-footer { padding: 56px 20px 0; }
  #th-footer .th-foot-cols { gap: 32px 40px; }
  #th-footer .th-store { padding: 14px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  #th-nav .th-cta, #th-footer .th-store, #th-nav .th-nav-row { transition: none !important; }
}

/* ==========================================================================
   Seams: one white page. The two sky set pieces (hero, cloud CTA) dissolve
   into it instead of ending in a hard edge.
   ========================================================================== */
html body [data-framer-name="Hero Section"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 12vw, 180px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); pointer-events: none; z-index: 3;
}
.th-scrub-scroll::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(90px, 12vw, 180px);
  background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0)); pointer-events: none; z-index: 2;
}

html body section.framer-5t98mx .framer-1vp9gu0 {
  height: 820px !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
html body section.framer-5t98mx .th-leaderboard {
  position: absolute;
  inset: 48px 0 auto;
  z-index: 1;
  width: calc(100% - 96px);
  max-width: 520px;
  margin: 0 auto;
  padding: 26px;
  box-sizing: border-box;
  border: 1.5px solid #191919;
  border-radius: 32px;
  background: linear-gradient(125deg, rgba(250, 250, 250, .94), rgba(225, 226, 226, .93) 58%, rgba(243, 243, 243, .96));
  box-shadow: -6px 6px 0 #191919, inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .55);
  color: #242527;
  font-family: 'Geist', system-ui, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -.025em;
  text-align: left;
  pointer-events: none;
}
.th-leaderboard *, .th-leaderboard *::before, .th-leaderboard *::after { box-sizing: border-box; }
.th-leaderboard-header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.th-leaderboard-event-icon, .th-leaderboard-control {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  color: #5f6164;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 12px;
  background: linear-gradient(145deg, #f9f9f9, #dedfe0);
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(0, 0, 0, .025);
}
.th-leaderboard-event-icon svg { width: 20px; height: 20px; }
.th-leaderboard-event-icon { border-color: #191919; box-shadow: -2px 2px 0 #191919, inset 0 1px 0 #fff; color: #242527; }
.th-leaderboard-event { font-size: 16px; font-weight: 500; white-space: nowrap; }
.th-leaderboard-event-chevron { width: 16px; height: 16px; color: #85878a; flex: none; }
.th-leaderboard-control { margin-left: auto; border-radius: 50%; width: 38px; height: 38px; background: rgba(255, 255, 255, .3); }
.th-leaderboard-control svg { width: 19px; height: 19px; }
.th-leaderboard-title { margin: 30px 0 26px; font-family: 'Boldonse', sans-serif; font-size: 28px; font-weight: 400; line-height: 1.9; letter-spacing: -.04em; text-transform: uppercase; }
.th-leaderboard-list {
  margin: 0;
  padding: 8px 16px;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .96);
  border-radius: 23px;
  background: linear-gradient(130deg, rgba(255, 255, 255, .76), rgba(245, 245, 245, .57));
  box-shadow: inset 0 1px 0 #fff, 0 8px 16px rgba(0, 0, 0, .035);
}
.th-leaderboard-row { display: flex; align-items: center; gap: 14px; min-height: 58px; margin: 0; padding: 0; }
.th-leaderboard-row + .th-leaderboard-row { border-top: 1px solid rgba(77, 79, 82, .07); }
.th-leaderboard-rank { width: 14px; flex: none; color: #7c7e82; font-size: 14px; text-align: center; font-variant-numeric: tabular-nums; }
.th-leaderboard-team-icon {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  flex: none;
  border: 1px solid #fff;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #e9eaeb);
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(0, 0, 0, .035);
  color: #626469;
}
.th-leaderboard-team-icon svg { width: 22px; height: 22px; }
.th-leaderboard-team-name { font-weight: 500; white-space: nowrap; }
.th-leaderboard-row-chevron { margin-left: auto; width: 17px; height: 17px; color: #9a9ca0; flex: none; }
@media (max-width: 1199px) {
  html body section.framer-5t98mx .framer-1cpl4gl { min-height: 704px; }
  html body section.framer-5t98mx .th-leaderboard { top: 36px; width: calc(100% - 48px); padding: 20px; border-radius: 26px; }
  .th-leaderboard-title { font-size: 22px; margin: 26px 0 22px; }
  .th-leaderboard-list { padding: 6px 12px; border-radius: 19px; }
  .th-leaderboard-row { min-height: 52px; gap: 10px; }
  .th-leaderboard-team-name { font-size: 16px; }
  .th-leaderboard-team-icon { width: 32px; height: 32px; border-radius: 10px; }
  .th-leaderboard-team-icon svg { width: 20px; height: 20px; }
}
@media (max-width: 430px) {
  html body section.framer-5t98mx .th-leaderboard { top: 28px; width: calc(100% - 32px); padding: 16px; border-radius: 24px; }
  .th-leaderboard-header { gap: 7px; }
  .th-leaderboard-event { font-size: 13px; }
  .th-leaderboard-event-icon { width: 29px; height: 29px; border-radius: 9px; }
  .th-leaderboard-event-icon svg { width: 17px; height: 17px; }
  .th-leaderboard-event-chevron { width: 13px; height: 13px; }
  .th-leaderboard-control { width: 29px; height: 29px; }
  .th-leaderboard-control svg { width: 16px; height: 16px; }
  .th-leaderboard-title { font-size: 19px; margin: 24px 0 20px; }
  .th-leaderboard-list { padding: 5px 10px; border-radius: 17px; }
  .th-leaderboard-row { min-height: 50px; gap: 8px; }
  .th-leaderboard-team-name { font-size: 14px; }
  .th-leaderboard-rank { width: 10px; font-size: 12px; }
  .th-leaderboard-team-icon { width: 29px; height: 29px; border-radius: 9px; }
  .th-leaderboard-team-icon svg { width: 18px; height: 18px; }
  .th-leaderboard-row-chevron { width: 14px; height: 14px; }
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-1kfvkqp {
  gap: 20px !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 :is(.framer-1romai7, .framer-14jsa70, .framer-1yi52eu) {
  height: auto !important;
  overflow: visible !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-1romai7 {
  justify-content: flex-end !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-1yi52eu {
  justify-content: flex-start !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 :is(.framer-19vrug7-container, .framer-1ijxsn9-container, .framer-1gpzo9i-container) {
  width: calc(100% - 24px) !important;
  max-width: 360px !important;
  height: auto !important;
  flex: none !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-jXRzs {
  height: auto !important;
  min-height: 88px;
  padding: 18px !important;
  gap: 12px !important;
  border: 1.5px solid #191919 !important;
  border-radius: 14px !important;
  box-shadow: -5px 5px 0 #191919 !important;
  overflow: visible !important;
  background: #fff !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-jXRzs::after {
  display: none !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-1romai7 .framer-jXRzs {
  background: var(--th-yellow) !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-1yi52eu .framer-jXRzs {
  background: #dceef9 !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-etokv6 {
  display: none !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-cx1xas {
  width: auto !important;
  height: auto !important;
  flex: 1 !important;
  min-width: 0;
}
html body section.framer-5t98mx .framer-1vp9gu0 :is(.framer-1mhrkgc, .framer-a7rkcq, .framer-18epri9) {
  width: 100% !important;
  height: auto !important;
  min-width: 0;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-1mhrkgc {
  gap: 4px !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-a7rkcq p {
  font-family: 'Boldonse', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;
  padding: .18em .06em .06em !important;
  letter-spacing: -.02em !important;
  text-transform: uppercase;
  color: #191919 !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-18epri9 p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #252422 !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-jdajiw {
  width: 30px !important;
  height: 30px !important;
  flex: none !important;
  border: 1.5px solid #191919;
  border-radius: 6px !important;
  background: #191919 !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-jdajiw > * {
  display: none !important;
}
html body section.framer-5t98mx .framer-1vp9gu0 .framer-jdajiw::after {
  content: "";
  width: 15px;
  height: 15px;
  background: var(--th-arrow-white) center / contain no-repeat;
}
@media (max-width: 1199px) {
  html body section.framer-5t98mx .framer-1vp9gu0 { height: 417px !important; }
  html body section.framer-5t98mx .framer-1vp9gu0 .framer-1kfvkqp { gap: 14px !important; }
  html body section.framer-5t98mx .framer-1vp9gu0 .framer-jXRzs { min-height: 76px; padding: 12px !important; gap: 10px !important; }
  html body section.framer-5t98mx .framer-1vp9gu0 .framer-a7rkcq p { font-size: 12px !important; }
  html body section.framer-5t98mx .framer-1vp9gu0 .framer-18epri9 p { font-size: 11.5px !important; }
}
@media (min-width: 810px) and (max-width: 1199px) {
  html body section.framer-5t98mx .framer-1vp9gu0 { height: 704px !important; }
}
@media (max-width: 809px) {
  html body section.framer-5t98mx .framer-1vp9gu0 { height: auto !important; min-height: 466px; }
  html body section.framer-5t98mx .framer-1vp9gu0 .framer-jXRzs { min-height: 80px; padding: 14px !important; }
  html body section.framer-5t98mx .framer-1vp9gu0 .framer-a7rkcq p { font-size: 13px !important; }
  html body section.framer-5t98mx .framer-1vp9gu0 .framer-18epri9 p { font-size: 12px !important; }
}