/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/landing/Footer.module.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.Footer_footer__LQHwI {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
  width: 100%;
  background: var(--theme-bg);
  padding: var(--margin);
  transition: background-color 0.4s ease;
}

.Footer_container__9VfQF {
  display: flex;
  gap: 40px;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* ─── Brand panel (flowers + Caddy logo) ─── */

.Footer_brandPanel__pYOab {
  position: relative;
  flex: 1 1;
  min-height: 326px;
  border-radius: 8px;
  overflow: hidden;
  background: #d35050;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Footer_flowers__LdF1W {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Footer_logo__5Tyzx {
  /* 424 / 640 of the panel — capped at the design size on wide screens. */
  position: relative;
  z-index: 1;
  width: 66.25%;
  max-width: 424px;
  height: auto;
}

/* ─── Links panel ─── */

.Footer_links__CJ4HL {
  flex: 1 1;
  min-height: 326px;
  background: var(--theme-surface);
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
  transition: background-color 0.4s ease;
}

.Footer_linkGroup__iw6PT {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.Footer_label__aZCJi {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: var(--font-p1-size);
  line-height: var(--font-p1-lh);
  letter-spacing: var(--font-p1-tracking);
  color: var(--theme-footer-text-muted);
}

.Footer_buttonRow__U4c3R {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.Footer_learnMoreRow__PW33B {
  column-gap: 12px;
}

.Footer_arrow__3_R2o {
  width: 9.375px;
  height: 9.375px;
  flex-shrink: 0;
}

/* ─── Mobile (Figma node 6613:48085) ─── */

@media (max-width: 899.98px) {
  .Footer_footer__LQHwI {
    padding: 30px;
  }

  /* Mobile stacks links on top, brand panel below. In a column the base
     `flex: 1` (flex-basis: 0%) would override the panels' heights on the
     main axis, so reset to content/explicit sizing. */
  .Footer_container__9VfQF {
    flex-direction: column-reverse;
    gap: 20px;
  }

  .Footer_brandPanel__pYOab {
    flex: none;
    min-height: 0;
    height: 282px;
  }

  .Footer_logo__5Tyzx {
    /* 234 / mobile panel width — capped at the design size. */
    width: 71%;
    max-width: 234px;
  }

  .Footer_links__CJ4HL {
    flex: none;
    min-height: 0;
    padding: 20px;
    gap: 20px;
    justify-content: flex-start;
  }
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/landing/Button.module.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************/
.Button_button__3UETu {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--button-radius);
  border: 1.5px solid color-mix(in srgb, var(--theme-text) 10%, transparent);
  box-shadow: var(--button-shadow), var(--button-inset-shadow);
  padding: 6px 18px;
  font-family: var(--font-family);
  font-size: var(--font-p1-size);
  line-height: var(--font-p1-lh);
  letter-spacing: var(--font-p1-tracking);
  font-weight: 400;
  color: var(--theme-cta-text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.4s ease,
    color 0.4s ease;
}

.Button_button__3UETu:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .Button_button__3UETu:hover:not(:disabled):not(:active) {
    transform: translateY(-1px);
  }
}

.Button_button__3UETu:disabled {
  cursor: default;
  opacity: 0.6;
  pointer-events: none;
}

.Button_secondary__eDdbX {
  background: var(--theme-cta-secondary-bg);
  color: var(--theme-cta-secondary-text);
  height: 36px;
  padding: 0 18px;
}

/* Primary action — themed accent pill, secondary's size. */
.Button_primary__P6jcw,
.Button_compactCta__uCBwF {
  background: var(--theme-cta-bg);
  height: 36px;
  padding: 0 18px;
}

.Button_primary__P6jcw {
  color: var(--theme-cta-text);
}

/* Compact CTAs use regular body type, so keep every theme at AA contrast.
   Mono's large CTA uses off-white, while the smaller pill uses black. */
.Button_compactCta__uCBwF {
  color: var(--theme-on-accent);
}

/* Medium action for backgrounds that change color beneath the button. */
.Button_contrastCta__BMdrc {
  height: 50px;
  padding: 0 28px;
  border-color: color-mix(in srgb, var(--color-black) 10%, transparent);
  background: var(--color-off-white);
  color: var(--color-black);
  box-shadow:
    var(--button-shadow),
    inset 0 3px 0 rgba(255, 255, 255, 0.85);
}

.Button_cta__X4zfF {
  background: var(--theme-cta-bg);
  color: var(--theme-cta-text);
  height: 72px;
  padding: 0 28px;
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-lh);
  letter-spacing: var(--font-h3-tracking);
}

/* Mobile CTA matches Figma: H3 mobile type (20/29), 52px tall. */
@media (max-width: 899.98px) {
  .Button_cta__X4zfF {
    height: 52px;
    font-size: 20px;
    line-height: 29px;
    letter-spacing: -0.4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Button_button__3UETu,
  .Button_button__3UETu:hover,
  .Button_button__3UETu:active {
    transition: none;
    transform: none;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/landing/MarketingChrome.module.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.MarketingChrome_page__glz8P {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--theme-bg);
  font-family: var(--font-family);
  color: var(--theme-text);
  /* Prevent any section from causing a horizontal scrollbar. `clip` (not
     `hidden`) so the sticky nav keeps working. */
  overflow-x: clip;
  transition:
    background-color 0.4s ease,
    color 0.4s ease;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/ui/ColorSwatches.module.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Color-variant swatch dots — shared between the marketing nav and the
 * signed-in settings page. Ring colors derive from the theme so the active
 * indicator stays visible on every variant; `--swatch-ring-gap` lets a host
 * surface (e.g. a white settings card) match the gap ring to its own bg.
 */

.ColorSwatches_dots__oM5YX {
  --swatch-ring-gap: var(--theme-bg);
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.ColorSwatches_dot__OXVK3 {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-text) 18%, transparent);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

/* Expand the touch target to ~44px without changing the visible 14px swatch. */
.ColorSwatches_dot__OXVK3::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 44px;
}

.ColorSwatches_dotActive__JVsyj {
  transform: scale(1.2);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--theme-text) 22%, transparent),
    0 0 0 2px var(--swatch-ring-gap),
    0 0 0 3.5px light-dark(var(--color-grey-700), var(--color-grey-200));
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/landing/Nav.module.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
.Nav_nav__VwDLV {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

/* Progressive background blur — strongest at the top edge, fading to none at the
   bottom (Figma: PROGRESSIVE background blur, 20px → 0). A single backdrop-blur
   layer masked opaque→transparent cross-fades into the unblurred page below.
   z-index: -1 keeps this and the gradient tint behind the nav content without
   trapping the mobile menu in a new stacking context. */
.Nav_nav__VwDLV::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  pointer-events: none;
}

/* Soft gradient tint over the blur (per color mode via --theme-nav-bg). */
.Nav_nav__VwDLV::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--theme-nav-bg);
  pointer-events: none;
}

.Nav_container__CBdPG {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 30px var(--margin);
}

.Nav_left__3oiks {
  display: flex;
  align-items: center;
  gap: 10px;
}

.Nav_logoLink__3d_7h {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--theme-logo);
  transition: color 0.4s ease;
}

.Nav_right__5et7j {
  display: flex;
  align-items: center;
}

/* Action groups — only one shows per breakpoint. */
.Nav_desktopActions__T4DQ2 {
  display: flex;
  align-items: center;
  gap: 20px;
}

.Nav_desktopUseCases__elpKQ {
  margin-left: 8px;
}

.Nav_mobileActions__R878Z {
  display: none;
  align-items: center;
  gap: 14px;
}

/* Swatch dots come from the shared ColorSwatches component; the mobile row
   just widens the gap between dots. */
.Nav_dotsMobile__hY1wU {
  gap: 10px;
}

/* Text-only login link — same size as the button, regular weight. */
.Nav_loginButton__O7RkU {
  font-family: var(--font-family);
  font-size: var(--font-p1-size);
  line-height: var(--font-p1-lh);
  letter-spacing: var(--font-p1-tracking);
  font-weight: 400;
  color: var(--theme-text);
  cursor: pointer;
  padding: 0 4px;
  transition: opacity 0.15s ease;
}

.Nav_loginButton__O7RkU:hover {
  opacity: 0.7;
}

/* Button shadow override */
.Nav_navButton__llP3i {
  box-shadow:
    0px 2px 4px rgba(0, 0, 0, 0.08),
    inset 0px 3px 0px rgba(255, 255, 255, 0.25);
}

@media (max-width: 899.98px) {
  .Nav_container__CBdPG {
    padding: 24px;
  }

  .Nav_desktopActions__T4DQ2 {
    display: none;
  }

  .Nav_mobileActions__R878Z {
    display: flex;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/landing/MobileMenu.module.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
/* ─── Hamburger trigger (lives inside Nav's mobile-only group) ─── */

.MobileMenu_hamburger__KkdnX {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.MobileMenu_bar__hyxht {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--theme-text);
}

/* ─── Silk top sheet ─── */

.MobileMenu_view__tKzH_ {
  z-index: var(--z-modal);
}

.MobileMenu_backdrop__TBZ3e {
  background-color: #000;
}

.MobileMenu_content__jT1FA.MobileMenu_content__jT1FA {
  position: relative;
  width: 100%;
  /* Silk defaults a sheet to 50% viewport height; let it size to its content. */
  --silk-default-height: auto;
  height: auto;
  max-height: 100dvh;
  /* Silk sets overflow on its content primitive; the sheet itself remains the
     scroll container when expanded content exceeds a short viewport. */
  overflow-y: auto !important;
  overscroll-behavior: contain;
  background: var(--theme-bg);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 24px 28px;
}

.MobileMenu_head__4cLkR {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  /* The themed Logo paints with currentColor; match Nav's logo so it recolors
     with the variant (accent in mono/orange mode, text otherwise). */
  color: var(--theme-logo);
}

.MobileMenu_close__iltgT {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  border-radius: 50%;
  color: var(--theme-text);
  cursor: pointer;
  transition: background 0.15s ease;
}

.MobileMenu_close__iltgT:active {
  background: color-mix(in srgb, var(--theme-text) 6%, transparent);
}

.MobileMenu_srTitle__AVQ2x {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.MobileMenu_links__kev1r {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

.MobileMenu_link__tZzSa {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--theme-rule);
  padding: 18px 2px;
  font-family: var(--font-family);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.4px;
  font-weight: 500;
  color: var(--theme-text);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.MobileMenu_link__tZzSa:active {
  opacity: 0.55;
}

.MobileMenu_disclosure__45fuG {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.MobileMenu_chevron__o_V3q {
  transition: transform 0.18s ease;
}

.MobileMenu_chevron__o_V3q[data-open] {
  transform: rotate(180deg);
}

.MobileMenu_useCaseLinks__LqCcN {
  display: grid;
  grid-template-rows: repeat(5, 0fr);
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 0.2s ease,
    opacity 0.15s ease,
    visibility 0s linear 0.2s;
}

.MobileMenu_useCaseLinks__LqCcN[data-open] {
  grid-template-rows: repeat(5, 1fr);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.MobileMenu_useCaseLink__KBUMn {
  min-height: 0;
  overflow: hidden;
  padding: 0 2px 0 18px;
  font-family: var(--font-family);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.2px;
  font-weight: 400;
  color: var(--theme-text);
  opacity: 0.78;
  transition:
    padding 0.2s ease,
    opacity 0.15s ease;
}

.MobileMenu_useCaseLinks__LqCcN[data-open] .MobileMenu_useCaseLink__KBUMn {
  padding-top: 10px;
  padding-bottom: 10px;
}

.MobileMenu_useCaseLink__KBUMn:active {
  opacity: 0.5;
}

.MobileMenu_cta__EbtBk {
  width: 100%;
  height: 52px;
  margin-top: 22px;
  font-size: var(--font-h3-size);
}

@media (prefers-reduced-motion: reduce) {
  .MobileMenu_chevron__o_V3q,
  .MobileMenu_useCaseLinks__LqCcN,
  .MobileMenu_useCaseLink__KBUMn {
    transition-duration: 0.001ms;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/landing/UseCasesNavMenu.module.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.UseCasesNavMenu_menu__gJMn0 {
  position: relative;
}

.UseCasesNavMenu_trigger__c9lqq {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
  font-family: var(--font-family);
  font-size: var(--font-p1-size);
  line-height: var(--font-p1-lh);
  letter-spacing: var(--font-p1-tracking);
  font-weight: 400;
  color: var(--theme-text);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.UseCasesNavMenu_trigger__c9lqq:hover {
  opacity: 0.7;
}

.UseCasesNavMenu_chevron__klmzZ {
  transition: transform 0.18s ease;
}

.UseCasesNavMenu_chevron__klmzZ[data-open] {
  transform: rotate(180deg);
}

.UseCasesNavMenu_panel__P0p0Q {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 1;
  width: 220px;
  padding: 8px;
  border: 1px solid var(--theme-rule);
  border-radius: 14px;
  background: var(--theme-bg);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0s linear 0.15s;
}

.UseCasesNavMenu_panel__P0p0Q[data-open] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.UseCasesNavMenu_link__4zPTS {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  font-family: var(--font-family);
  font-size: var(--font-p1-size);
  line-height: var(--font-p1-lh);
  letter-spacing: var(--font-p1-tracking);
  font-weight: 400;
  color: var(--theme-text);
  transition: background 0.15s ease;
}

.UseCasesNavMenu_link__4zPTS:hover,
.UseCasesNavMenu_link__4zPTS:focus-visible {
  background: color-mix(in srgb, var(--theme-text) 7%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .UseCasesNavMenu_chevron__klmzZ,
  .UseCasesNavMenu_panel__P0p0Q {
    transition-duration: 0.001ms;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/use-cases/UseCaseTopicIllustration.module.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
.UseCaseTopicIllustration_scene__QJTjf {
  --scene-accent: var(--color-pine);
  position: relative;
  isolation: isolate;
  margin: 20px 16px 0;
  border-radius: 18px;
  background: radial-gradient(
    ellipse at 50% 20%,
    color-mix(in srgb, var(--scene-accent) 22%, var(--theme-bg)),
    color-mix(in srgb, var(--scene-accent) 8%, var(--theme-surface))
  );
  overflow: hidden;
  color: var(--color-black);
}
.UseCaseTopicIllustration_household__Gpvca {
  --scene-accent: var(--color-chestnut);
}
.UseCaseTopicIllustration_travel__gfm3n {
  --scene-accent: var(--color-navy);
}
.UseCaseTopicIllustration_shopping___Kg3N {
  --scene-accent: var(--color-pine);
}
.UseCaseTopicIllustration_budgeting__6sC1C {
  --scene-accent: var(--color-chestnut);
}
.UseCaseTopicIllustration_small-business__M9gpv {
  --scene-accent: var(--color-lavender);
}
.UseCaseTopicIllustration_canvas__lA8oO {
  position: relative;
  height: 270px;
  margin: 24px 16px 0;
  display: grid;
  place-items: center;
}
.UseCaseTopicIllustration_household__Gpvca .UseCaseTopicIllustration_canvas__lA8oO,
.UseCaseTopicIllustration_travel__gfm3n .UseCaseTopicIllustration_canvas__lA8oO {
  height: 270px;
}
.UseCaseTopicIllustration_paper__7mK1P {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--color-black) 9%, transparent);
  border-radius: 10px;
  background: var(--color-white);
  padding: 20px;
  box-shadow:
    0 2px 3px color-mix(in srgb, var(--color-black) 4%, transparent),
    0 16px 28px -10px color-mix(in srgb, var(--color-black) 20%, transparent);
  text-align: left;
}
.UseCaseTopicIllustration_paper__7mK1P strong {
  display: block;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.35px;
  margin: 7px 0 15px;
}
.UseCaseTopicIllustration_paperEyebrow__E1_u3 {
  color: var(--color-grey-600);
  font-size: 10px;
  line-height: 1.4;
}
.UseCaseTopicIllustration_photo__yhM8J {
  position: absolute;
  width: 54%;
  height: 95%;
  left: -1%;
  top: 3%;
  object-fit: contain;
  transform: rotate(-9deg);
  filter: drop-shadow(0 8px 8px color-mix(in srgb, var(--color-black) 12%, transparent));
}
.UseCaseTopicIllustration_canvas__lA8oO picture {
  display: contents;
}
.UseCaseTopicIllustration_travel__gfm3n .UseCaseTopicIllustration_photo__yhM8J {
  width: 63%;
  left: -5%;
  top: -2%;
  transform: rotate(-8deg);
}
/* The single-column cards run their motion-blur photo edge to edge behind the
   paper and let it dissolve into the scene above the message bubble. */
.UseCaseTopicIllustration_shopping___Kg3N .UseCaseTopicIllustration_photo__yhM8J,
.UseCaseTopicIllustration_budgeting__6sC1C .UseCaseTopicIllustration_photo__yhM8J,
.UseCaseTopicIllustration_small-business__M9gpv .UseCaseTopicIllustration_photo__yhM8J {
  inset: -24px auto auto -16px;
  width: calc(100% + 32px);
  max-width: none;
  height: 320px;
  object-fit: cover;
  transform: none;
  filter: none;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent);
  mask-image: linear-gradient(180deg, #000 68%, transparent);
}
.UseCaseTopicIllustration_shopping___Kg3N .UseCaseTopicIllustration_canvas__lA8oO,
.UseCaseTopicIllustration_budgeting__6sC1C .UseCaseTopicIllustration_canvas__lA8oO,
.UseCaseTopicIllustration_small-business__M9gpv .UseCaseTopicIllustration_canvas__lA8oO {
  z-index: 0;
}
.UseCaseTopicIllustration_shopping___Kg3N .UseCaseTopicIllustration_paper__7mK1P,
.UseCaseTopicIllustration_budgeting__6sC1C .UseCaseTopicIllustration_receipts__abBFC,
.UseCaseTopicIllustration_small-business__M9gpv .UseCaseTopicIllustration_emailStack__qt1mB {
  z-index: 1;
}
.UseCaseTopicIllustration_calendar__iVrn7,
.UseCaseTopicIllustration_boardingPass__Kd0PB {
  width: 55%;
  justify-self: end;
  margin-right: 4%;
  transform: rotate(4deg);
}
.UseCaseTopicIllustration_calendarEvent__VTlja {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
  border-top: 1px solid var(--color-grey-100);
  font-size: 12px;
}
.UseCaseTopicIllustration_calendarEvent__VTlja > span {
  font-size: 10px;
  color: var(--color-grey-600);
  flex-shrink: 0;
  width: 23px;
}
.UseCaseTopicIllustration_calendarEvent__VTlja p {
  margin: 0;
}
.UseCaseTopicIllustration_calendarEvent__VTlja svg {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-pine);
}
.UseCaseTopicIllustration_note__Oxz42 {
  display: block;
  margin-top: 9px;
  font-size: 10px;
  color: var(--color-pine);
}
.UseCaseTopicIllustration_boardingPass__Kd0PB {
  transform: rotate(6deg);
  width: 53%;
}
.UseCaseTopicIllustration_flightRoute__Y_h9z {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-block: 23px;
  font-size: 23px;
  letter-spacing: -0.6px;
}
.UseCaseTopicIllustration_flightRoute__Y_h9z svg {
  color: var(--color-grey-500);
  flex-shrink: 0;
}
.UseCaseTopicIllustration_flightDetails__Spxml {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.UseCaseTopicIllustration_flightDetails__Spxml span {
  display: block;
  color: var(--color-grey-600);
  font-size: 9px;
  margin-bottom: 5px;
}
.UseCaseTopicIllustration_flightDetails__Spxml b {
  font-size: 14px;
  font-weight: 500;
}
.UseCaseTopicIllustration_passStub__LJhbW {
  display: flex;
  align-items: center;
  gap: 5px;
  border-top: 1px dashed var(--color-grey-200);
  margin-top: 18px;
  padding-top: 12px;
  font-size: 9px;
  color: var(--color-pine);
}
.UseCaseTopicIllustration_passStub__LJhbW svg {
  flex-shrink: 0;
}
.UseCaseTopicIllustration_groceryRow__k1iix {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-block: 9px;
  font-size: 12px;
}
.UseCaseTopicIllustration_groceryRow__k1iix > svg {
  color: var(--color-pine);
  flex-shrink: 0;
}
.UseCaseTopicIllustration_groceries__jtdb_ {
  width: min(92%, 260px);
  transform: rotate(-4deg);
  padding: 18px 20px 0;
}
.UseCaseTopicIllustration_groceries__jtdb_ strong {
  font-size: 18px;
  margin-bottom: 12px;
}
.UseCaseTopicIllustration_groceryRow__k1iix {
  padding-block: 8px;
  border-top: 1px solid var(--color-grey-100);
}
.UseCaseTopicIllustration_groceryRow__k1iix small {
  margin-left: auto;
  color: var(--color-grey-600);
  font-size: 10px;
}
.UseCaseTopicIllustration_listTab___5_wM {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  margin: 5px -20px 0;
  border-radius: 0 0 9px 9px;
  color: var(--color-pine);
  background: var(--color-mint);
  font-size: 10px;
}
.UseCaseTopicIllustration_receipts__abBFC {
  position: relative;
  width: min(82%, 232px);
  transform: rotate(4deg);
}
.UseCaseTopicIllustration_receiptBack__KmKPq {
  position: absolute;
  inset: 7px -7px -4px 5px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding: 16px;
  background: var(--color-off-white);
  border: 1px solid var(--color-grey-200);
  transform: rotate(-13deg);
  font-size: 9px;
  color: var(--color-grey-600);
}
.UseCaseTopicIllustration_receipt__fgCvX {
  border-radius: 2px;
  padding: 17px 19px;
  background: var(--color-white);
}
.UseCaseTopicIllustration_receipt__fgCvX::after {
  content: '';
  position: absolute;
  inset: auto -1px -6px;
  height: 8px;
  background: var(--color-white);
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 50%,
    95% 100%,
    90% 50%,
    85% 100%,
    80% 50%,
    75% 100%,
    70% 50%,
    65% 100%,
    60% 50%,
    55% 100%,
    50% 50%,
    45% 100%,
    40% 50%,
    35% 100%,
    30% 50%,
    25% 100%,
    20% 50%,
    15% 100%,
    10% 50%,
    5% 100%,
    0 50%
  );
          clip-path: polygon(
    0 0,
    100% 0,
    100% 50%,
    95% 100%,
    90% 50%,
    85% 100%,
    80% 50%,
    75% 100%,
    70% 50%,
    65% 100%,
    60% 50%,
    55% 100%,
    50% 50%,
    45% 100%,
    40% 50%,
    35% 100%,
    30% 50%,
    25% 100%,
    20% 50%,
    15% 100%,
    10% 50%,
    5% 100%,
    0 50%
  );
}
.UseCaseTopicIllustration_receipt__fgCvX .UseCaseTopicIllustration_total__fYhkm {
  font-size: 36px;
  letter-spacing: -1.3px;
  margin-block: 8px 14px;
}
.UseCaseTopicIllustration_expense__SvDTG {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-top: 9px;
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.UseCaseTopicIllustration_receiptFoot__5v6gq {
  display: block;
  border-top: 1px dashed var(--color-grey-200);
  padding-top: 12px;
  margin-top: 14px;
  font-size: 9px;
  color: var(--color-grey-600);
}
.UseCaseTopicIllustration_paperclip__hmfDD {
  position: absolute;
  top: -9px;
  right: 10px;
  color: var(--color-grey-500);
  transform: rotate(-20deg);
}
.UseCaseTopicIllustration_emailStack__qt1mB {
  width: min(95%, 280px);
}
.UseCaseTopicIllustration_inquiry__Vk8k6 {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  margin: 0 12px -5px;
  border-radius: 9px 9px 0 0;
  background: var(--color-off-white);
  border: 1px solid var(--color-grey-200);
  font-size: 10px;
  transform: rotate(-4deg);
}
.UseCaseTopicIllustration_inquiry__Vk8k6 svg {
  color: var(--color-grey-600);
  flex-shrink: 0;
}
.UseCaseTopicIllustration_reply__neLEL {
  padding: 17px;
  transform: rotate(3deg);
}
.UseCaseTopicIllustration_replyHeader__BfDyP {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-grey-100);
  font-size: 11px;
}
.UseCaseTopicIllustration_replyHeader__BfDyP small {
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--color-off-white);
  color: var(--color-grey-600);
  font-size: 9px;
}
.UseCaseTopicIllustration_reply__neLEL p {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.UseCaseTopicIllustration_signatureLine__NixJM {
  width: 40px;
  height: 4px;
  margin-top: 13px;
  border-radius: 4px;
  background: var(--color-grey-100);
}
.UseCaseTopicIllustration_reviewNote__EKZa3 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 17px;
  color: var(--color-pine);
  font-size: 10px;
}
.UseCaseTopicIllustration_messageRow__XXxXi {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 83px;
  padding: 7px 18px 20px;
}
.UseCaseTopicIllustration_prompt__ojOLQ {
  margin: 0;
  padding: 11px 15px;
  max-width: 88%;
  border-radius: 18px 18px 5px 18px;
  background: color-mix(in srgb, var(--theme-imessage-sent-bg) 75%, var(--color-black));
  color: var(--theme-imessage-sent-text);
  box-shadow: 0 4px 9px color-mix(in srgb, var(--color-black) 7%, transparent);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}
@media (min-width: 900px) {
  .UseCaseTopicIllustration_household__Gpvca .UseCaseTopicIllustration_prompt__ojOLQ,
  .UseCaseTopicIllustration_travel__gfm3n .UseCaseTopicIllustration_prompt__ojOLQ {
    font-size: 14px;
    max-width: 78%;
  }
}
@media (min-width: 900px) and (max-width: 1150px) {
  .UseCaseTopicIllustration_canvas__lA8oO {
    margin-inline: 10px;
  }
  .UseCaseTopicIllustration_paper__7mK1P {
    padding: 14px;
  }
  .UseCaseTopicIllustration_groceries__jtdb_ {
    padding-bottom: 0;
  }
  .UseCaseTopicIllustration_listTab___5_wM {
    margin-inline: -14px;
    padding-inline: 14px;
  }
  .UseCaseTopicIllustration_calendar__iVrn7 {
    width: 62%;
    margin-right: 0;
  }
  .UseCaseTopicIllustration_boardingPass__Kd0PB {
    width: 58%;
    margin-right: 0;
  }
  .UseCaseTopicIllustration_paper__7mK1P strong {
    font-size: 16px;
  }
}
@media (max-width: 899.98px) {
  .UseCaseTopicIllustration_scene__QJTjf {
    margin: 18px 14px 0;
  }
  .UseCaseTopicIllustration_canvas__lA8oO {
    height: 270px;
    margin-inline: 12px;
  }
  .UseCaseTopicIllustration_household__Gpvca .UseCaseTopicIllustration_canvas__lA8oO,
  .UseCaseTopicIllustration_travel__gfm3n .UseCaseTopicIllustration_canvas__lA8oO {
    height: 270px;
  }
  .UseCaseTopicIllustration_calendar__iVrn7 {
    width: 63%;
    margin-right: 0;
    padding: 16px;
  }
  .UseCaseTopicIllustration_boardingPass__Kd0PB {
    width: 58%;
    margin-right: 0;
    padding: 16px;
  }
  .UseCaseTopicIllustration_paper__7mK1P strong {
    font-size: 17px;
  }
  .UseCaseTopicIllustration_calendarEvent__VTlja {
    gap: 7px;
    font-size: 11px;
  }
  .UseCaseTopicIllustration_photo__yhM8J {
    width: 60%;
    left: -6%;
  }
  .UseCaseTopicIllustration_travel__gfm3n .UseCaseTopicIllustration_photo__yhM8J {
    width: 64%;
    left: -8%;
  }
  .UseCaseTopicIllustration_messageRow__XXxXi {
    min-height: 75px;
  }
  .UseCaseTopicIllustration_prompt__ojOLQ {
    max-width: 90%;
  }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/use-cases/UseCasesHub.module.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
.UseCasesHub_page__Mt6yR {
  --theme-text-muted: color-mix(in srgb, var(--theme-text) 70%, transparent);
  color: var(--theme-text);
}
.UseCasesHub_hero__mvc8Z,
.UseCasesHub_section___bSMo,
.UseCasesHub_closing__CcRL7 {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--margin);
}
.UseCasesHub_hero__mvc8Z {
  padding-block: 86px 84px;
  text-align: center;
}
.UseCasesHub_eyebrow__aWhmu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--theme-text-muted);
  font-size: var(--font-p2-size);
  line-height: var(--font-p2-lh);
}
.UseCasesHub_hero__mvc8Z .UseCasesHub_eyebrow__aWhmu,
.UseCasesHub_closing__CcRL7 .UseCasesHub_eyebrow__aWhmu {
  justify-content: center;
}
.UseCasesHub_hero__mvc8Z h1 {
  margin: 25px auto 24px;
  font-size: clamp(48px, 6.3vw, 88px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -2.7px;
}
.UseCasesHub_hero__mvc8Z h1 span {
  color: var(--theme-text-muted);
}
.UseCasesHub_heroText__tA1QR {
  font-size: 19px;
  line-height: 1.6;
  color: var(--theme-text-muted);
}
.UseCasesHub_heroActions__D9gxS {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}
.UseCasesHub_primaryCta__SZk9l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 12px 25px;
  background: var(--theme-cta-bg);
  color: var(--theme-cta-text);
  border: 1px solid var(--theme-rule);
  border-radius: var(--radius-pill);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--button-shadow), var(--button-inset-shadow);
}
.UseCasesHub_secondaryCta__c_TZY {
  color: var(--theme-text);
  text-underline-offset: 5px;
  font-size: var(--font-p1-size);
  padding-block: 12px;
}
.UseCasesHub_section___bSMo {
  padding-block: 30px 58px;
  scroll-margin-top: 110px;
}
.UseCasesHub_sectionHeader__LAxhk {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 26px;
}
.UseCasesHub_sectionHeader__LAxhk h2 {
  font-size: var(--font-h2-size);
  letter-spacing: var(--font-h2-tracking);
  font-weight: 500;
  line-height: 1.15;
}
.UseCasesHub_sectionHeader__LAxhk .UseCasesHub_eyebrow__aWhmu {
  margin-bottom: 12px;
}
.UseCasesHub_sectionHeader__LAxhk > p {
  color: var(--theme-text-muted);
  font-size: var(--font-p1-size);
  line-height: 1.5;
}
.UseCasesHub_topicNav__C9ddu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}
.UseCasesHub_topicNav__C9ddu a {
  padding: 9px 17px;
  border: 1px solid var(--theme-rule);
  border-radius: var(--radius-pill);
  color: var(--theme-text);
  text-decoration: none;
  font-size: var(--font-p2-size);
  line-height: 24px;
  transition: background 0.2s;
}
.UseCasesHub_topicNav__C9ddu a:hover {
  background: var(--theme-surface);
}
.UseCasesHub_featuredGrid__bvqNy,
.UseCasesHub_secondaryGrid__dKiQ0 {
  display: grid;
  grid-gap: 22px;
  gap: 22px;
}
.UseCasesHub_featuredGrid__bvqNy {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.UseCasesHub_secondaryGrid__dKiQ0 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 22px;
}
.UseCasesHub_topic__TWdfn {
  min-width: 0;
  border: 1px solid var(--theme-rule);
  border-radius: 26px;
  background: var(--theme-bg);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--color-black) 3%, transparent);
  scroll-margin-top: 108px;
  overflow: hidden;
}
.UseCasesHub_topicLink__Z4V_W {
  display: flex;
  height: 100%;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.UseCasesHub_topicTop__CJV0j {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 28px 0;
  font-size: var(--font-p1-size);
}
.UseCasesHub_topicTop__CJV0j svg {
  transition: transform 0.2s;
}
.UseCasesHub_topicLink__Z4V_W:hover .UseCasesHub_topicTop__CJV0j svg {
  transform: translate(3px, -3px);
}
.UseCasesHub_topicCopy__CFGry {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  padding: 28px;
}
.UseCasesHub_topicCopy__CFGry h3 {
  max-width: 430px;
  font-size: 28px;
  line-height: 1.13;
  font-weight: 500;
  letter-spacing: -0.6px;
}
.UseCasesHub_featuredTopic__Bsydt .UseCasesHub_topicCopy__CFGry h3 {
  font-size: 35px;
}
.UseCasesHub_topicCopy__CFGry > p {
  color: var(--theme-text-muted);
  line-height: 1.55;
  margin-top: 14px;
  max-width: 440px;
  font-size: 16px;
}
.UseCasesHub_explore__mxlHc {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 25px;
  font-size: 14px;
}
.UseCasesHub_resources___eY8x {
  padding-top: 54px;
}
.UseCasesHub_resourceGrid__Idtct {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 18px;
  gap: 18px;
}
.UseCasesHub_directory__bWMzJ {
  padding-top: 50px;
}
.UseCasesHub_directoryGrid__nOQn_ {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 48px;
  column-gap: 48px;
}
.UseCasesHub_directoryLink__auon4 {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding-block: 26px;
  border-bottom: 1px solid var(--theme-rule);
  text-decoration: none;
  color: var(--theme-text);
}
.UseCasesHub_directoryLink__auon4 svg {
  flex-shrink: 0;
  margin-top: 4px;
}
.UseCasesHub_directoryLink__auon4 h3 {
  font-size: 20px;
  line-height: 1.25;
  font-weight: 500;
}
.UseCasesHub_directoryLink__auon4 p {
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 9px;
  max-width: 470px;
}
.UseCasesHub_closing__CcRL7 {
  padding-block: 70px 100px;
  text-align: center;
}
.UseCasesHub_closing__CcRL7 h2 {
  margin-top: 20px;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -1.2px;
  line-height: 1.12;
}
.UseCasesHub_closing__CcRL7 > p:not(.UseCasesHub_eyebrow__aWhmu) {
  color: var(--theme-text-muted);
  margin: 18px 0 26px;
}
.UseCasesHub_page__Mt6yR a:focus-visible,
.UseCasesHub_page__Mt6yR button:focus-visible {
  outline: 2px solid var(--theme-text);
  outline-offset: 5px;
}
@media (max-width: 899.98px) {
  .UseCasesHub_hero__mvc8Z,
  .UseCasesHub_section___bSMo,
  .UseCasesHub_closing__CcRL7 {
    padding-inline: 22px;
  }
  .UseCasesHub_hero__mvc8Z {
    padding-block: 52px 58px;
  }
  .UseCasesHub_hero__mvc8Z h1 {
    font-size: clamp(40px, 9.3vw, 64px);
    letter-spacing: -1.5px;
    margin-top: 22px;
  }
  .UseCasesHub_heroText__tA1QR {
    font-size: 17px;
  }
  .UseCasesHub_desktopBreak__KKAw6 {
    display: none;
  }
  .UseCasesHub_heroActions__D9gxS {
    gap: 12px 22px;
    margin-top: 24px;
  }
  .UseCasesHub_sectionHeader__LAxhk {
    display: block;
  }
  .UseCasesHub_sectionHeader__LAxhk h2 {
    font-size: 29px;
  }
  .UseCasesHub_sectionHeader__LAxhk > p {
    margin-top: 12px;
  }
  .UseCasesHub_topicNav__C9ddu {
    gap: 8px;
  }
  .UseCasesHub_topicNav__C9ddu a {
    padding: 7px 13px;
  }
  .UseCasesHub_featuredGrid__bvqNy,
  .UseCasesHub_secondaryGrid__dKiQ0 {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .UseCasesHub_secondaryGrid__dKiQ0 {
    margin-top: 18px;
  }
  .UseCasesHub_topicTop__CJV0j {
    padding: 22px 22px 0;
  }
  .UseCasesHub_topicCopy__CFGry {
    padding: 23px;
  }
  .UseCasesHub_featuredTopic__Bsydt .UseCasesHub_topicCopy__CFGry h3 {
    font-size: 31px;
  }
  .UseCasesHub_resourceGrid__Idtct {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .UseCasesHub_directoryGrid__nOQn_ {
    grid-template-columns: 1fr;
  }
  .UseCasesHub_closing__CcRL7 {
    padding-block: 32px 70px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .UseCasesHub_page__Mt6yR *,
  .UseCasesHub_page__Mt6yR *::before,
  .UseCasesHub_page__Mt6yR *::after {
    transition: none;
    scroll-behavior: auto;
  }
}

@media (max-width: 540px) {
  .UseCasesHub_resourceGrid__Idtct {
    grid-template-columns: 1fr;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/use-cases/UseCaseResourceCard.module.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************/
.UseCaseResourceCard_card__h85j1 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--theme-text);
  text-decoration: none;
  border: 1px solid var(--theme-rule);
  border-radius: 22px;
  background: var(--theme-bg);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--color-black) 3%, transparent);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.UseCaseResourceCard_card__h85j1:hover {
  border-color: color-mix(in srgb, var(--theme-text) 28%, transparent);
  box-shadow: 0 12px 25px -15px color-mix(in srgb, var(--color-black) 20%, transparent);
}
.UseCaseResourceCard_preview__Kkvsk {
  --paper-accent: var(--color-pine);
  position: relative;
  isolation: isolate;
  height: 204px;
  margin: 10px 10px 0;
  padding: 34px 22px 0;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper-accent) 14%, var(--theme-surface));
}
/* Motion-blur photo behind the paper; the hero photos carry a polaroid frame,
   so the crop scales past it. */
.UseCaseResourceCard_photo__2kI7Z {
  position: absolute;
  inset: -14%;
  z-index: -1;
  width: 128%;
  max-width: none;
  height: 128%;
  object-fit: cover;
}
.UseCaseResourceCard_preview__Kkvsk picture {
  display: contents;
}
.UseCaseResourceCard_checklist__vh23p {
  --paper-accent: var(--color-pine);
}
.UseCaseResourceCard_meal-plan__WxQTJ {
  --paper-accent: var(--color-chestnut);
}
.UseCaseResourceCard_itinerary__s4gwb {
  --paper-accent: var(--color-navy);
}
.UseCaseResourceCard_paper__REo42 {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--color-black) 8%, transparent);
  border-top: 3px solid color-mix(in srgb, var(--paper-accent) 55%, var(--color-white));
  border-radius: 7px 7px 0 0;
  background: var(--color-white);
  color: var(--color-black);
  padding: 18px 16px 25px;
  min-height: 200px;
  transform: rotate(-4deg) translateY(7px);
  transform-origin: center bottom;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--color-black) 9%, transparent);
  transition: transform 0.25s;
}
.UseCaseResourceCard_meal-plan__WxQTJ .UseCaseResourceCard_paper__REo42 {
  transform: rotate(3deg) translateY(7px);
}
.UseCaseResourceCard_itinerary__s4gwb .UseCaseResourceCard_paper__REo42 {
  transform: rotate(4deg) translateY(7px);
}
.UseCaseResourceCard_card__h85j1:hover .UseCaseResourceCard_paper__REo42 {
  transform: rotate(0) translateY(0);
}
.UseCaseResourceCard_paperTitle__X2QDr {
  display: block;
  padding-bottom: 13px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.UseCaseResourceCard_previewRow__YauGT {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--color-grey-100);
  font-size: 10px;
  line-height: 1.4;
}
.UseCaseResourceCard_previewRow__YauGT > div {
  flex: 1 1;
  min-width: 0;
}
.UseCaseResourceCard_previewRow__YauGT > div > span:first-child {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.UseCaseResourceCard_checkbox__ZxX_M {
  width: 12px;
  height: 12px;
  border: 1px solid var(--color-grey-200);
  border-radius: 3px;
  flex-shrink: 0;
}
.UseCaseResourceCard_day__miphK {
  width: 27px;
  flex-shrink: 0;
  font-size: 9px;
  color: var(--color-grey-600);
}
.UseCaseResourceCard_rule__ZLXgl {
  display: block;
  width: 65%;
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--color-grey-100);
}
.UseCaseResourceCard_copy__PhhwV {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  padding: 23px;
}
.UseCaseResourceCard_copy__PhhwV h3 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.3px;
}
.UseCaseResourceCard_copy__PhhwV p {
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-block: 12px 26px;
}
.UseCaseResourceCard_action__KRz0B {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  font-size: 14px;
}
.UseCaseResourceCard_action__KRz0B svg {
  flex-shrink: 0;
}
@media (max-width: 899.98px) {
  .UseCaseResourceCard_preview__Kkvsk {
    height: 180px;
    padding: 26px 15px 0;
  }
  .UseCaseResourceCard_paper__REo42 {
    padding: 14px 12px 20px;
  }
  .UseCaseResourceCard_copy__PhhwV {
    padding: 20px;
  }
  .UseCaseResourceCard_copy__PhhwV h3 {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .UseCaseResourceCard_card__h85j1,
  .UseCaseResourceCard_paper__REo42 {
    transition: none;
  }
}