/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/CampaignBenefits.module.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
.CampaignBenefits_section__ErXo7 {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 64px 24px 96px;
}

.CampaignBenefits_heading__MVFZh {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.CampaignBenefits_title__GEGN8 {
  margin: 0 0 16px;
  text-wrap: balance;
}

.CampaignBenefits_description__gMoLX {
  margin: 0;
  text-wrap: balance;
}

.CampaignBenefits_grid__khItF {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 32px;
  gap: 32px;
  align-items: start;
}

.CampaignBenefits_card__9dbIU {
  min-width: 0;
}

.CampaignBenefits_visual__gTR51 {
  position: relative;
  width: 100%;
  isolation: isolate;
  container-type: inline-size;
  aspect-ratio: 1;
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-neutral-50);
}

.CampaignBenefits_photo__7KLyv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The hero photos carry a baked-in polaroid frame. Scale past it so the scene
   fills the visual edge to edge instead of showing a sliver of frame. */
.CampaignBenefits_cropFrame__FnOP_ {
  inset: -14%;
  width: 128%;
  height: 128%;
}

.CampaignBenefits_note__OQC05 {
  position: absolute;
  bottom: 32px;
  left: 9%;
  width: 82%;
  padding: 28px 24px 24px;
  color: var(--color-maroon);
  background: var(--color-off-white);
  transform: rotate(-5deg);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-black) 18%, transparent);
}

.CampaignBenefits_note__OQC05::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 35%;
  width: 30%;
  height: 24px;
  background: color-mix(in srgb, var(--color-butter) 75%, transparent);
  transform: rotate(3deg);
}

.CampaignBenefits_card__9dbIU:nth-child(2) .CampaignBenefits_note__OQC05 {
  transform: rotate(4deg);
}

.CampaignBenefits_card__9dbIU:nth-child(3) .CampaignBenefits_note__OQC05 {
  transform: rotate(-3deg);
}

.CampaignBenefits_noteLabel__Etwd_ {
}

.CampaignBenefits_noteText__oco7m {
  font-size: clamp(24px, 8.8cqw, 38px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.6px;
  margin: 20px 0 24px;
  text-wrap: balance;
}

.CampaignBenefits_noteText__oco7m:first-child {
  margin-top: 0;
}

.CampaignBenefits_noteDetail__nfSMr {
}

.CampaignBenefits_avatar__ngKnO {
  position: absolute;
  top: 12px;
  right: 8px;
  width: clamp(72px, 25cqw, 100px);
  height: clamp(72px, 25cqw, 100px);
  object-fit: contain;
  transform: rotate(12deg);
  filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--color-black) 15%, transparent));
}

.CampaignBenefits_card__9dbIU:nth-child(2) .CampaignBenefits_avatar__ngKnO {
  left: 8px;
  right: auto;
  transform: rotate(-12deg);
}

.CampaignBenefits_copy__c7ieC {
  padding: 28px 0 16px;
}

.CampaignBenefits_cardTitle__i1Ks2 {
  margin: 0 0 12px;
  text-wrap: balance;
}

.CampaignBenefits_cardDescription__6TAhi {
  margin: 0;
  max-width: 360px;
}

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

  .CampaignBenefits_grid__khItF {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
    margin: 0 auto;
    gap: 48px;
  }

  .CampaignBenefits_heading__MVFZh {
    margin-bottom: 32px;
  }

  .CampaignBenefits_copy__c7ieC {
    padding-top: 24px;
  }
}

.CampaignBenefits_imageCard__o0ThE {
  position: absolute;
  bottom: 4%;
  left: 5%;
  width: 72%;
  height: auto;
  border-radius: var(--radius-md);
  transform: rotate(-5deg);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-black) 18%, transparent);
}

.CampaignBenefits_card__9dbIU:nth-child(2) .CampaignBenefits_imageCard__o0ThE {
  left: auto;
  right: 5%;
  transform: rotate(4deg);
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/Faq.module.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
.Faq_section__Il9wU {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
  width: 100%;
  background: var(--theme-bg);
  padding: 100px var(--margin);
  transition: background-color 0.4s ease;
}

.Faq_card__VJc0e {
  background: var(--theme-surface);
  border-radius: 12px;
  padding: 40px;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

.Faq_heading__Nxh4m {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: var(--font-h2-size);
  line-height: var(--font-h2-lh);
  letter-spacing: var(--font-h2-tracking);
  color: var(--theme-text);
  margin: 0 0 12px;
}

.Faq_divider__DGeLN {
  width: 100%;
  height: 1px;
  background: var(--theme-rule);
}

.Faq_list__f0RZU {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* No top margin: the first question's own padding-top (20px, matching every
     other row below its divider) already gives the Figma card gap. */
  margin-top: 0;
}

.Faq_item__p7gNW {
  display: flex;
  flex-direction: column;
}

.Faq_question__gA_wm {
  margin: 0;
}

/* The whole question row is the toggle (canonical accordion pattern): heading
   text inside a full-width button, so clicking anywhere on the row — and Enter/
   Space when focused — expands the answer. */
.Faq_questionButton__KrRVh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.Faq_questionText__pZDKt {
  flex: 1 1;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-lh);
  letter-spacing: var(--font-h3-tracking);
  color: var(--theme-text);
}

.Faq_toggle__tFgv5 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma: fixed 38×30 pill (node 6720:2486). */
  width: 38px;
  height: 30px;
  padding: 0;
  border-radius: var(--button-radius);
  border: 1.5px solid color-mix(in srgb, var(--theme-text) 10%, transparent);
  background: var(--theme-toggle-bg);
  box-shadow: var(--button-shadow), var(--button-inset-shadow);
  color: var(--theme-toggle-icon);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.4s ease,
    color 0.4s ease;
}

.Faq_toggleBarH__glKKw,
.Faq_toggleBarV__AxiNS {
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  width: 14px;
  height: 1.5px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.Faq_toggleBarV__AxiNS {
  transform: rotate(90deg);
}

.Faq_toggleOpen__UsY93 .Faq_toggleBarV__AxiNS {
  transform: rotate(180deg);
}

.Faq_questionButton__KrRVh:active .Faq_toggle__tFgv5 {
  transform: scale(0.97);
}

.Faq_answerWrapper__D_mLd {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition:
    grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.26s ease-out,
    margin-top 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.Faq_answerWrapperOpen__oG_qK {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: -8px;
}

.Faq_answerInner__O3nHm {
  min-height: 0;
}

.Faq_answer__rjQpH {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-lh);
  letter-spacing: var(--font-h3-tracking);
  color: var(--theme-faq-text-muted);
  margin: 0;
  max-width: 936px;
  padding-bottom: 20px;
}

.Faq_answerLink__SZS3a {
  color: var(--theme-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s ease;
}

.Faq_answerLink__SZS3a:hover {
  opacity: 0.7;
}

/* Same look as .answerLink, but a <button> because the sms: href is resolved
   on tap. Reset the native button chrome and inherit the surrounding text. */
.Faq_answerLinkButton__83eST {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}

.Faq_answerLinkButton__83eST:disabled {
  cursor: default;
}

/* Mobile (Figma 6720:2477): card padding 20 + 30px gutter, with the type kept
   in the standard mobile scale (the Figma's desktop H2/H3 read too large here). */
@media (max-width: 899.98px) {
  .Faq_section__Il9wU {
    /* Bottom is 10px so the gap to the footer card is 40px total
       (10 here + the footer's 30px top padding). */
    padding: 48px 30px 10px;
  }

  .Faq_card__VJc0e {
    padding: 20px;
  }

  /* The Figma's full desktop H2/H3 read too large on phones — keep the FAQ in
     the standard mobile type scale. */
  .Faq_heading__Nxh4m {
    font-size: 28px;
    line-height: 34px;
  }

  .Faq_questionText__pZDKt {
    font-size: 18px;
    line-height: 26px;
  }

  .Faq_answer__rjQpH {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Faq_answerWrapper__D_mLd {
    transition-duration: 0.01ms;
  }
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/CardCarousel.module.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************/
.CardCarousel_carousel__6ySSe {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
}

/* iMessage's "N Photos" caption: the grid glyph and count in the send blue. */
.CardCarousel_label__lkMhp {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: #0a7cff;
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.CardCarousel_label__lkMhp svg {
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
}

/* The stack reserves the front card's footprint plus the fan on the right. */
.CardCarousel_stack__eWPgx {
  --card-w: 66%;
  position: relative;
  width: var(--card-w);
  aspect-ratio: 4 / 5;
  margin-right: auto;
  margin-bottom: 4%;
}

/* Each card behind the front one shifts right and tilts a little further,
   pivoting from the bottom-left corner, and dims so the front card reads first. */
.CardCarousel_card__x1bn7 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.7em;
  transform-origin: 8% 100%;
  transform: translateX(calc(var(--layer) * 6%)) rotate(calc(var(--layer) * 2.75deg));
  filter: brightness(calc(1 - var(--layer) * 0.07));
  z-index: calc(var(--layers) - var(--layer));
  box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.12);
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/ChatPhone.module.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
/* The phone is the query container at the Figma device aspect (372 × 696);
   the chat scales from one font-size (4.226cqw ≈ 15.72px @ 372px) via em.
   overflow is visible so the soft (blurred) frame can spread past the edges. */
.ChatPhone_phone__Y56YV {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 372 / 696;
}

/* Phone outline as a PROGRESSIVE blur: a crisp white edge at the top that
   softens layer-by-layer going down and finally dissolves into the sky. CSS has
   no native variable blur, so we stack copies of the rounded border at
   increasing blur radii, each masked to its own vertical band; together they
   read as a single edge — sharp up top, melting at the bottom. Lives outside the
   screen clip so the blur can spread past the edge. The shared em scale (resolved
   against the .phone container) keeps every radius/blur proportional. */
.ChatPhone_frame__uabPP {
  position: absolute;
  inset: 0;
  font-size: 4.226cqw;
  pointer-events: none;
}

.ChatPhone_frame__uabPP span {
  position: absolute;
  inset: 0;
  border-radius: 2.544em;
  border: 1px solid #fff;
}

/* The whole progressive blur is compressed into the top ~58% of the phone so
   the border has dissolved by the time it reaches the clock watermark (Figma:
   the frame is mostly invisible by then), instead of lingering to the bottom. */

/* crisp edge — dominant across the top */
.ChatPhone_fL0__SSdDa {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 13%, transparent 30%);
  mask-image: linear-gradient(180deg, #000 0%, #000 13%, transparent 30%);
}

/* light blur — upper-middle */
.ChatPhone_fL1__c0_Nq {
  filter: blur(0.13em);
  -webkit-mask-image: linear-gradient(180deg, transparent 13%, #000 26%, #000 33%, transparent 46%);
  mask-image: linear-gradient(180deg, transparent 13%, #000 26%, #000 33%, transparent 46%);
}

/* medium blur — middle */
.ChatPhone_fL2__5qwQ7 {
  filter: blur(0.3em);
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 42%, #000 47%, transparent 56%);
  mask-image: linear-gradient(180deg, transparent 30%, #000 42%, #000 47%, transparent 56%);
}

/* heavy blur — dissolves out just above the clock */
.ChatPhone_fL3__mRhiE {
  filter: blur(0.6em);
  -webkit-mask-image: linear-gradient(180deg, transparent 40%, #000 48%, transparent 58%);
  mask-image: linear-gradient(180deg, transparent 40%, #000 48%, transparent 58%);
}

/* Clipped screen: holds the frosted glass, the conversation and the toolbar.
   The whole phone dissolves into the gradient at the bottom (mask) — it is never
   fully shown, matching the Figma. */
.ChatPhone_screen__yuKwj {
  position: absolute;
  inset: 0;
  font-size: 4.226cqw;
  font-family: -apple-system, system-ui, sans-serif;
  border-radius: 2.544em;
  overflow: hidden;
  box-shadow: 0 0.254em 0.127em rgba(0, 0, 0, 0.25);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 90%);
}

/* Frosted-glass fill — the sky reads through it, very subtly blurred. The tint
   matches Figma (0.02); anything heavier reads as a visible light box where the
   phone overlaps the clock watermark. */
.ChatPhone_glass__XhP6c {
  position: absolute;
  inset: 0;
  border-radius: 2.544em;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(0.32em);
  -webkit-backdrop-filter: blur(0.32em);
  pointer-events: none;
}

/* Conversation viewport — full phone; the track inside is top-anchored (padded
   clear of the toolbar) and translates up as the thread grows. A tall top
   fade-mask is the *only* top treatment (no backdrop blur — that read as muddy
   behind the avatar/name): messages dissolve smoothly as they scroll up, fully
   gone by the time they reach the pill (~16%), while the resting timestamp just
   below it stays crisp. */
.ChatPhone_window__sehpf {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 4%, #000 16%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 4%, #000 16%);
}

/* The track is a flex column of bubbles (matching the hero conversation): each
   message hugs its content and aligns to its sender via align-self. The track
   translates up so the newest batch rests on the read line. */
.ChatPhone_track__GynCD {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  /* Figma transcript flex gap (3.698px) — the tight, within-group spacing. */
  gap: 0.235em;
  /* Clear the avatar + name pill, then ~12px of breathing room to the first
     timestamp (the pill bottom sits at ~7.2em). Side padding matches Figma
     (14.792px). */
  padding: 7.64em 0.941em 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.ChatPhone_timeStamp__nEwQy {
  align-self: center;
  display: flex;
  justify-content: center;
  gap: 0.235em;
  margin: 0.5em 0 0.34em;
  font-size: 0.647em;
  color: rgba(60, 60, 67, 0.6);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.ChatPhone_timeEnter__OWFMK {
  animation: ChatPhone_chatTimeEnter__kXBZh 0.3s ease forwards;
}

.ChatPhone_messageEnter__b9K_M {
  animation: ChatPhone_chatMessageEnter__AO0aO 0.4s cubic-bezier(0.12, 0.8, 0.35, 1.2) forwards;
}

@keyframes ChatPhone_chatTimeEnter__kXBZh {
  from {
    opacity: 0;
  }
}

@keyframes ChatPhone_chatMessageEnter__AO0aO {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.7);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ChatPhone_timeEnter__OWFMK,
  .ChatPhone_messageEnter__b9K_M {
    animation: none;
  }
}

.ChatPhone_day__9yuoW {
  font-weight: 510;
}

.ChatPhone_bubble__7R_rj {
  position: relative;
  box-sizing: border-box;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 75.68%;
  padding: 0.529em 0.706em;
  border-radius: 1.176em;
  line-height: 1.294;
  letter-spacing: -0.016em;
}

/* Received (Caddy) bubble — Figma #ececec, springs in from its bottom-left
   (tail) corner. */
.ChatPhone_in__aJ2Oi {
  align-self: flex-start;
  transform-origin: bottom left;
  background: #ececec;
  color: #000;
  white-space: pre-line;
}

/* Sent bubble — the hero's iOS-26 gradient (#4EBAFF → #0088FF) run across the
   body + tail as one shape; springs in from its bottom-right corner. */
.ChatPhone_out__77Yx1 {
  align-self: flex-end;
  transform-origin: bottom right;
  background-image: linear-gradient(#4ebaff, #0088ff);
  background-size: 100% calc(100% + 0.4085em);
  background-position: top;
  background-repeat: no-repeat;
  color: #fff;
}

/* A tail marks the last bubble of a sender group, so it carries the extra space
   before the next group (and clears the tail's drop below the bubble). Bubbles
   without a tail stay tight to the next — that's the within-group grouping. */
.ChatPhone_tailLeft__rwXu_,
.ChatPhone_tailRight__uU7sb {
  margin-bottom: 0.45em;
}

/* Image bubbles (skill cards) sit under their text like an iMessage photo. */
.ChatPhone_cards__M7nrD {
  width: 94%;
  align-self: flex-start;
  margin: 0.2em 0 0.6em;
  transform-origin: bottom left;
}

/* iMessage tails — exact iOS-26 silhouette (shared with the hero). */
.ChatPhone_tailLeft__rwXu_::after,
.ChatPhone_tailRight__uU7sb::after {
  content: '';
  position: absolute;
  bottom: -0.4085em;
  width: 0.999em;
  height: 1.0554em;
  -webkit-mask: url(/landing/bubble-tail.svg) no-repeat center / 100% 100%;
  mask: url(/landing/bubble-tail.svg) no-repeat center / 100% 100%;
}

.ChatPhone_tailLeft__rwXu_::after {
  left: 0.4134em;
  background-color: #ececec;
}

.ChatPhone_tailRight__uU7sb::after {
  right: 0.4134em;
  background: linear-gradient(#1d9bff, #0088ff);
  transform: scaleX(-1);
}

/* iMessage tapback — a sent (blue) reaction over the top-right corner of a
   received bubble, with the two trailing connector dots pointing into it. */
.ChatPhone_reaction__94MKO {
  position: absolute;
  top: -0.72em;
  right: -0.5em;
  width: 1.66em;
  height: 1.66em;
  border-radius: 50%;
  background: linear-gradient(#1d9bff, #0088ff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.12em 0.28em rgba(0, 0, 0, 0.18);
}

.ChatPhone_reaction__94MKO::before,
.ChatPhone_reaction__94MKO::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #0a8cff;
}

.ChatPhone_reaction__94MKO::before {
  width: 0.46em;
  height: 0.46em;
  bottom: -0.02em;
  left: 0.12em;
}

.ChatPhone_reaction__94MKO::after {
  width: 0.24em;
  height: 0.24em;
  bottom: -0.24em;
  left: -0.04em;
}

.ChatPhone_reactionIcon__d4ZcV {
  width: 64%;
  height: 64%;
  fill: #fff;
}

/* ─── Pinned top toolbar ─── */

.ChatPhone_topBar__NtuZT {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.055em;
}

.ChatPhone_avatar__S_H1_ {
  /* The logo sits on top of the "Caddy" pill (which tucks under it), matching
     Figma — otherwise the pill paints over the avatar's bottom edge. */
  position: relative;
  z-index: 1;
  width: 3.528em;
  height: 3.528em;
  border-radius: 50%;
  background: transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.147em 0.118em rgba(0, 0, 0, 0.1);
}

.ChatPhone_avatar__S_H1_ img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Caddy ›" frosted pill, tucked just under the avatar (Figma 6613:47270). */
.ChatPhone_contactPill__1lDwO {
  display: inline-flex;
  align-items: center;
  gap: 0.318em; /* 5px */
  height: 1.908em; /* fixed 30px */
  margin-top: -0.29em;
  /* left 10px / right 8px; height is fixed, so no vertical padding */
  padding: 0 0.509em 0 0.636em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(0.6em);
  -webkit-backdrop-filter: blur(0.6em);
}

.ChatPhone_contact__coiJH {
  font-weight: 700;
  font-size: 1.018em; /* 16px */
  letter-spacing: -0.01em;
  color: #000;
}

/* Forward chevron next to "Caddy" — exact Figma glyph (4×12), sized to its
   native ~12px height and recolored via currentColor. */
.ChatPhone_chevron__qYqc8 {
  display: block;
  height: 0.76em;
  width: auto;
  flex-shrink: 0;
  color: rgba(60, 60, 67, 0.6);
}

/* On mobile the phone fills the available stacked height instead of the fixed
   device aspect; the conversation gets more room and the fade sits lower. */
@media (max-width: 899.98px) {
  .ChatPhone_phone__Y56YV {
    aspect-ratio: auto;
    height: 100%;
  }

  .ChatPhone_frame__uabPP,
  .ChatPhone_screen__yuKwj {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 0, #000 72%, transparent 96%);
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/GradientSections.module.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
/* Tall scroll track; the stage pins (full viewport) while you snap through the
   three day-stages. */
.GradientSections_container__Uxp2s {
  position: relative;
  width: 100%;
  /* Three snap stages. --stage-travel is the scroll distance per stage (the one
     knob for how "snappy" the section feels); total height is two travels plus
     the pinned viewport. Shorter travel = fewer wheel-turns to see all three. */
  --stage-travel: 60vh;
  height: calc(2 * var(--stage-travel) + 100vh);
  /* The content frame keeps the Figma 780px band size (capped to the viewport on
     short windows): phone, headline and clock all scale off this even though the
     gradient now fills the whole viewport. Mobile overrides it to the full height. */
  --frame-h: min(780px, 100vh);
}

/* Pinned + full-viewport: the day-gradient sky bleeds edge-to-edge while the
   content frame inside stays the Figma size, centred vertically. */
.GradientSections_stage__QNO72 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Invisible stage anchors at the start of each stage (spaced by --stage-travel).
   useScrollGradient's idle-snap and the dot click-to-jump scroll these into view;
   absolutely positioned so they add no layout height. (No CSS scroll-snap — that
   captured inertial trackpad/touch scrolls mid-flight; snapping is now a JS
   idle-snap that only fires once scrolling rests.) */
.GradientSections_snapPoint__FxxZv {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.GradientSections_sky__S8gLy {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Fallback behind the cream layer (pre-JS / SSR). */
  background: var(--color-neutral-50);
}

/* Stacked day-gradient layers; useScrollGradient crossfades them by opacity
   (composited, no per-frame repaint). Cream is the opaque base; dawn → midday →
   afternoon fade in on top as the section advances. The hex stops mirror the
   DAWN / MIDDAY / AFTERNOON keyframes the hook used to interpolate. */
.GradientSections_skyLayer__nca0P {
  position: absolute;
  inset: 0;
  will-change: opacity;
}

.GradientSections_skyCream__ts3uR {
  background: var(--color-neutral-50);
}

.GradientSections_skyDawn__rtsAM {
  background: linear-gradient(
    180deg,
    #feefff 0%,
    #eddff6 25%,
    #c4bce1 50%,
    #8383bf 75%,
    #5f63ab 100%
  );
}

.GradientSections_skyMidday__VEm0Q {
  background: linear-gradient(
    180deg,
    #e9fdff 0%,
    #baebfb 25%,
    #7dd3fa 50%,
    #43bef8 75%,
    #26b1f7 100%
  );
}

.GradientSections_skyAfternoon__wevnb {
  background: linear-gradient(
    180deg,
    #8d9d81 0%,
    #a4a87f 25%,
    #c6b97f 50%,
    #e8c97d 75%,
    #fcd37d 100%
  );
}

/* Faint drifting specks around the phone (sits above the sky, below the phone so
   the frosted glass softens the ones behind it). */
.GradientSections_sparkles__O3Vz_ {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.GradientSections_sparkles__O3Vz_ span {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  filter: blur(0.5px);
  animation: GradientSections_sparkleDrift__6JA_5 13s ease-in-out infinite;
}

@keyframes GradientSections_sparkleDrift__6JA_5 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-11px);
  }
}

/* The content frame: the Figma 780px band, centred in the full-viewport stage.
   The headline / phone / clock are positioned as a % of THIS box, so they keep
   their exact Figma size and layout while the sky fills the viewport behind. */
.GradientSections_inner__f_ZmJ {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Fixed content width, centred. The L/R margins shrink as the window narrows
     down to a 40px gutter, then the content scales — so the left copy stays put
     across the common desktop range (stable for windows ≳1400px) instead of
     resizing with every window change. */
  width: min(1320px, calc(100vw - 80px));
  height: var(--frame-h);
}

/* ─── Headline (left, vertically centred). The two phrases ride a vertical
   track inside this overflow-hidden box (the "mask"); on the stage-3 swap the
   first slides up and out as the second rises in. ─── */

.GradientSections_headline__zkia8 {
  position: absolute;
  /* Use the left margin + the gap to the (now fixed-width) phone so the heading
     fills more width and wraps into fewer lines. Anchored left + right keeps a
     constant ~40px gap to the phone at every desktop width (no overlap). */
  left: 12%;
  right: calc(31.6% + 226px);
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  /* height is set inline from the measured tallest phrase */
}

.GradientSections_headlineTrack__EDFWK {
  display: flex;
  flex-direction: column;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Each phrase fills the mask height (set inline) so its content stays vertically
   centred before and after the swap, and one block's translate == one step. */
.GradientSections_headlineBlock__xE4bc {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.GradientSections_headlineInner__h9kXa {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The headline + body sit on the day-progression gradient "sky" (see
   useScrollGradient), which is the SAME light→medium gradient in every color
   mode — it is not themed. So this copy is intentionally a fixed dark, not
   --theme-text: tracking the theme would make it off-white and unreadable on
   the light sky in Dark mode. */
.GradientSections_heading__bk4rr {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: var(--font-h1-size);
  line-height: var(--font-h1-lh);
  letter-spacing: var(--font-h1-tracking);
  color: var(--color-black);
}

.GradientSections_body__bGy06 {
  margin: 0;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: var(--font-h3-size);
  line-height: var(--font-h3-lh);
  letter-spacing: var(--font-h3-tracking);
  color: var(--color-black);
}

.GradientSections_signupCta__1nipm {
  align-self: flex-start;
}

/* ─── Frosted phone at the Figma device size (372 × 696) ─── */

/* Phone geometry mirrors the Figma section: a 372 × 696 device 160px (20.5%)
   from the top of the 780px frame — the exact Figma size on desktop. The width
   is FIXED to the device (it no longer scales with viewport width); it only
   shrinks on short viewports (--frame-h < 780) to stay vertically in frame.
   Height follows from the aspect-ratio on .phone, so it never distorts. */
.GradientSections_phoneWrap__YW46w {
  position: absolute;
  left: 68.4%;
  top: calc(var(--frame-h) * 160 / 780);
  transform: translateX(-50%);
  width: calc(var(--frame-h) * 372 / 780);
}

/* ─── Clock (bottom-right) — a rolling-digit "number ticker" that advances with
   scroll and settles on 6:30 / 10:45 / 4:00. ─── */

.GradientSections_time__Q0u_n {
  position: absolute;
  left: 84.8%;
  /* Sits below the last phone message (which rests at ~74% of the frame) so the
     big watermark doesn't overlap it. A %, like everything else here, so the
     clearance stays proportional as the frame shrinks (≈ the old 73% + 40px). */
  top: 78%;
  transform: translateX(-50%);
  width: 280px;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 56.64px;
  line-height: 66px;
  letter-spacing: -0.944px;
  text-align: center;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.2);
  text-shadow:
    0 7.5px 52.8px rgba(0, 0, 0, 0.04),
    0 1.9px 27.3px rgba(0, 0, 0, 0.04);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.GradientSections_ticker__hme3m {
  display: inline-flex;
  align-items: flex-start;
}

/* Each digit wheel clips to one line; the inner column (0–9) translates to the
   active digit and the transition makes it roll. */
.GradientSections_reel__lMivv {
  display: inline-block;
  height: 1.165em;
  overflow: hidden;
}

.GradientSections_reelInner__d6ds9 {
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.GradientSections_reelDigit__zTjNN {
  height: 1.165em;
  line-height: 1.165em;
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.GradientSections_colon__fT308,
.GradientSections_ampm__SNnXZ {
  height: 1.165em;
  line-height: 1.165em;
}

.GradientSections_ampm__SNnXZ {
  margin-left: 0.3em;
}

/* ─── Stage indicator: three dots showing the current snap stage; click/tap to
   jump. Light-on-sky (like the clock), bottom-centre of the content frame. ─── */
.GradientSections_dots__JWL8I {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 12px;
}

.GradientSections_dot__0TZiT,
.GradientSections_dotActive__oLeSe {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: none;
  padding: 0;
  cursor: pointer;
  /* Stays legible on both the light and saturated ends of every gradient. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition:
    background-color 0.25s ease,
    width 0.25s ease;
}

/* ~44px-square invisible touch target around each dot. */
.GradientSections_dot__0TZiT::before,
.GradientSections_dotActive__oLeSe::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

.GradientSections_dot__0TZiT {
  background: rgba(255, 255, 255, 0.45);
}

/* Active dot brightens and stretches into a short pill. */
.GradientSections_dotActive__oLeSe {
  width: 22px;
  background: rgba(255, 255, 255, 0.95);
}

/* ─── Mobile: same pinned + snap experience, stacked (time → headline → phone) ─── */

@media (max-width: 899.98px) {
  /* Mobile uses the full viewport height for the content frame too (stacked). */
  .GradientSections_container__Uxp2s {
    --frame-h: 100vh;
  }

  .GradientSections_stage__QNO72 {
    top: 0;
  }

  .GradientSections_sparkles__O3Vz_ {
    display: none;
  }

  .GradientSections_inner__f_ZmJ {
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 0;
    top: 0;
    transform: none;
    height: 100%;
    width: 100%; /* override the desktop fixed width — mobile is full-bleed */
    max-width: none;
    /* Clear the ~76px sticky nav AND leave a comfortable gap below it, so the
       clock watermark doesn't read as stuck to the header. */
    padding: 64px 30px 40px;
  }

  /* Mobile puts the clock at the top — a small, dark watermark just above the
     headline (Figma 6613:47767), not the big white one desktop floats bottom-right. */
  .GradientSections_time__Q0u_n {
    display: none;
    order: -1;
    position: static;
    transform: none;
    width: auto;
    font-size: 22.81px;
    line-height: 26.6px;
    letter-spacing: -0.38px;
    color: rgba(50, 46, 46, 0.2);
    text-shadow:
      0 3.04px 21.25px rgba(0, 0, 0, 0.04),
      0 0.76px 11px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    margin: 0 0 8px;
  }

  .GradientSections_headline__zkia8 {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    flex-shrink: 0;
    margin-top: 6px;
  }

  .GradientSections_headlineInner__h9kXa {
    align-items: center;
    text-align: center;
    gap: 14px;
  }

  .GradientSections_heading__bk4rr {
    font-size: 40px;
    line-height: 44px;
    letter-spacing: -0.8px;
  }

  .GradientSections_body__bGy06 {
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.2px;
  }

  .GradientSections_signupCta__1nipm {
    align-self: center;
  }

  /* In-flow between the headline and the phone, so it never collides with the
     bottom sticky CTA. */
  .GradientSections_dots__JWL8I {
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    flex-shrink: 0;
    margin: 18px 0 2px;
  }

  .GradientSections_phoneWrap__YW46w {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 330px;
    flex: 1 1;
    /* Keep enough height for the conversation even on short viewports; the phone
       extends below the fold and dissolves, matching the Figma. */
    min-height: 440px;
    margin-top: 22px;
  }
}

/* Landscape phones and short split-screen windows keep the full story controls
   without squeezing an unreadable phone mock into the remaining height. */
@media (max-width: 899.98px) and (max-height: 620px) {
  .GradientSections_inner__f_ZmJ {
    justify-content: center;
    padding: 76px 24px 24px;
  }

  .GradientSections_headline__zkia8 {
    margin-top: 0;
  }

  .GradientSections_headlineInner__h9kXa {
    gap: 10px;
  }

  .GradientSections_heading__bk4rr {
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.6px;
  }

  .GradientSections_body__bGy06 {
    font-size: 16px;
    line-height: 22px;
  }

  .GradientSections_dots__JWL8I {
    margin: 16px 0 0;
  }

  .GradientSections_phoneWrap__YW46w {
    display: 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/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/Hero.module.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
.Hero_hero__drBQ0 {
  position: relative;
  width: 100%;
  background: var(--theme-bg);
  padding-bottom: 64px;
  /* Scattered photos bleed past the art frame; clip the horizontal
     overflow so they fall off the screen edges (as in Figma) without
     creating a horizontal scrollbar. */
  overflow: clip;
  transition: background-color 0.4s ease;
}

/* Figma headline frame: text block + button, gap 37px (rounded up to 40). */
.Hero_headline__jOGh4 {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 867px;
  margin: 0 auto;
  padding-top: 24px;
  text-align: center;
}

/* Title + subtitle, gap 12px (Figma 12 desktop / 11 mobile → 12). */
.Hero_headlineText__TuTFa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.Hero_title__B8q6X {
  color: var(--theme-text);
  margin: 0;
}

.Hero_subtitle__GMBSz {
  color: var(--theme-text);
  margin: 0;
  max-width: 680px;
  text-wrap: balance;
}

.Hero_eyebrow__iUesE {
  margin: 0 0 4px;
  color: var(--theme-text);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
}

.Hero_proofMessage__GdAup {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.Hero_proofCards__mnMaX {
  width: 100%;
}

.Hero_photographicArt__Rml3v .Hero_todoList__htL0D {
  opacity: 1;
  filter: none;
  border-radius: var(--radius-md);
}

.Hero_photographicArt__Rml3v .Hero_title__B8q6X {
  text-wrap: balance;
}

html[data-color-mode='dark'] .Hero_photographicArt__Rml3v .Hero_todoList__htL0D {
  filter: none;
}

.Hero_photoNote__1_l9w {
  box-sizing: border-box;
  padding: 2.5cqw;
  aspect-ratio: 2046 / 1153;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  background: var(--color-off-white);
  color: var(--color-maroon);
  font-size: 3.5cqw;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-wrap: balance;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-black) 12%, transparent);
}

@media (min-width: 900px) {
  .Hero_wideHeadline__b9I0L {
    max-width: var(--content-max-width);
    padding-inline: 24px;
  }

  .Hero_wideHeadline__b9I0L .Hero_title__B8q6X {
    font-size: clamp(36px, 4.4vw, var(--font-h1-size));
    white-space: nowrap;
  }
}

.Hero_fadeUp__yD6cW {
  opacity: 0;
  animation: Hero_heroFadeUp__dTvYy 0.5s cubic-bezier(0.12, 0.23, 0.5, 1) forwards;
}

.Hero_fadeUpSecond__bsQSZ {
  animation-delay: 0.1s;
}

.Hero_fadeUpThird__OwMcE {
  animation-delay: 0.2s;
}

@keyframes Hero_heroFadeUp__dTvYy {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Art stage — a faithful copy of the Figma "Art" frame.
 *   Desktop frame: 1020.176 × 809.047  (node 6613:47121)
 *   Mobile frame:   390 × 525          (node 6613:47700)
 * `container-type: inline-size` lets the notification + panel radius
 * scale with the stage via `cqw`, so everything stays proportional.
 */
.Hero_artWrapper__cua6z {
  position: relative;
  width: 100%;
  max-width: 1020.176px;
  margin: -48px auto 0;
  aspect-ratio: 1020.176 / 809.047;
  container-type: inline-size;
}

/*
 * The Figma art frame is offset ~14.6px right of the hero centre so the
 * background + phone land on the hero's centre line. Shifting the stage
 * reproduces that while keeping each child at its exact Figma %.
 */
.Hero_stage__lF5KX {
  position: absolute;
  inset: 0;
  transform: translateX(1.43%);
}

/* ─── Scattered photos ─── */

.Hero_photo__pD7Xs {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--w);
  height: auto;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  pointer-events: none;
}

.Hero_todoList__htL0D {
  --cx: 17.635%;
  --cy: 70.071%;
  --w: 31.073%;
  --rot: -8.38deg;
  opacity: 0.58;
  transition: filter 0.4s ease;
}

/*
 * The handwritten to-do art is dark ink tuned for the default light bg. On dark
 * modes it would disappear, so flip it to light ink. The designer flagged this
 * as a blend-mode/asset-swap call — revisit if per-mode art is handed off.
 */
html[data-color-mode='dark'] .Hero_todoList__htL0D {
  filter: invert(1) brightness(1.35);
}

.Hero_waves__sBnK8 {
  --cx: 14.34%;
  --cy: 23.903%;
  --w: 25.015%;
  --rot: -7deg;
}

.Hero_scrapPaper__ALtXv {
  --cx: 76.597%;
  --cy: 55.681%;
  --w: 33.426%;
  --rot: 3.76deg;
}

.Hero_home__TSky1 {
  --cx: 88.964%;
  --cy: 13.916%;
  --w: 18.385%;
  --rot: 13.09deg;
}

.Hero_tube__5ZKR9 {
  --cx: 82.911%;
  --cy: 80.727%;
  --w: 26.525%;
  --rot: 5.96deg;
}

/* ─── Background panel + phone (shared clipped baseline) ─── */

.Hero_screenClip__fncvo {
  position: absolute;
  inset: 0;
  /* Cut both the panel and the phone flat at the panel's bottom edge. */
  -webkit-clip-path: inset(0 0 21.76% 0);
          clip-path: inset(0 0 21.76% 0);
}

.Hero_backgroundClip__G7Yio {
  position: absolute;
  left: 48.57%;
  top: 51.851%;
  width: 64.597%;
  aspect-ratio: 659 / 427;
  border-radius: 1.176cqw;
  overflow: hidden;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.Hero_background__FDL_N {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Hero_phoneWrap__XY4Y7,
.Hero_convoWrap__lSmOT {
  position: absolute;
  left: 48.601%;
  top: 13.607%;
  width: 37.261%;
  transform: translateX(-50%);
  pointer-events: none;
}

.Hero_phoneWrap__XY4Y7 {
  contain: paint;
}

.Hero_convoWrap__lSmOT {
  z-index: 1;
  aspect-ratio: 760 / 1554;
}

.Hero_phonePicture__LZGRS {
  display: block;
  width: 100%;
  aspect-ratio: 760 / 1554;
}

.Hero_phonePicture__LZGRS::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: -webkit-image-set(
    url('/landing/hero/phone-screen-w390.webp') 1x,
    url('/landing/hero/phone-screen-w640.webp') 2x,
    url('/landing/hero/phone-screen.webp') 3x
  );
  background-image: image-set(
    url('/landing/hero/phone-screen-w390.webp') 1x,
    url('/landing/hero/phone-screen-w640.webp') 2x,
    url('/landing/hero/phone-screen.webp') 3x
  );
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
}

/* iMessage conversation overlaid on the phone screen (Figma node 6613:47138).
   Positioned to the phone's screen area (measured from the mock); type scales
   with the stage via cqw, everything else in em so it stays proportional. */
.Hero_convo__rrdfP {
  position: absolute;
  left: 5.444%;
  right: 5.444%;
  top: 19.891%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.235em;
  /* A touch more side inset so bubbles sit a couple px off both screen edges. */
  padding: 0 0.7em;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 1.541cqw;
  line-height: 1.294;
  /* Override the brand body tracking (+0.3px from --font-p1-tracking on
     <body>) which otherwise leaks into this SF Pro text and makes it read
     loose. iOS Messages tracks near-zero/slightly tight at this size. */
  letter-spacing: -0.01em;
  /* Keep bubble animations on their own compositor layer. Otherwise each
     reveal can repaint the phone image and move its LCP timestamp. */
  transform: translateZ(0);
}

.Hero_convoTime__9m4oc {
  display: flex;
  justify-content: center;
  gap: 0.36em;
  padding-top: 0.3em;
  /* breathing room before the first message */
  margin-bottom: 0.4em;
  font-size: 10px;
  /* Base weight for the time ("8:22 AM"); "Today" overrides via .convoDay. */
  font-weight: 300;
  color: rgba(60, 60, 67, 0.6);
  white-space: nowrap;
}

.Hero_convoDay__Xfohb {
  /* Match the "Read" label: same semibold weight + neutral gray. */
  font-weight: 600;
  color: #868686;
}

.Hero_convoBubble__duffI {
  position: relative;
  box-sizing: border-box;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 75.68%;
  padding: 0.529em 0.706em;
  /* iOS 26 bubble corner radius: 18.4897px @ 15.72px text. */
  border-radius: 1.176em;
  /* SF Pro body optical tracking (~-0.43px @ 17pt). iOS applies this
     automatically; the web does not, so we add it manually. */
  letter-spacing: -0.016em;
}

.Hero_convoIn__OtjEe {
  align-self: flex-start;
  background: #e9e9eb;
  color: #000;
  white-space: pre-line;
  /* Received bubbles scale-in from their bottom-left (tail) corner. */
  transform-origin: bottom left;
}

.Hero_convoOut__dEJw_ {
  align-self: flex-end;
  /* iOS 26 sent gradient (#4EBAFF → #0088FF). Figma runs the gradient over
     the body+tail as one shape, so we extend the gradient image 0.4085em
     past the body (the tail drop). The body therefore only reaches ~#0B8FFF
     at its bottom edge — matching Figma — and #0088ff lands at the tail tip. */
  background-image: linear-gradient(#4ebaff, #0088ff);
  background-size: 100% calc(100% + 0.4085em);
  background-position: top;
  background-repeat: no-repeat;
  color: #fff;
  /* extra space from the previous (received) message */
  margin-top: 0.5em;
  /* Sent bubbles scale-in from their bottom-right (tail) corner. */
  transform-origin: bottom right;
}

/* Tails only on the last bubble of each group (iMessage grouping): the
   received list (bottom-left) and the sent reply (bottom-right). The first
   "Hey Jess" bubble is grouped, so it stays tail-less like Figma. */
.Hero_tailLeft__oxSIE::after,
.Hero_tailRight__ayGMz::after {
  content: '';
  position: absolute;
  /* Exact iOS 26 tail geometry from the Figma bubble mask (native scale,
     15.72px text): 15.707 × 16.591px, dropping 6.42px below the body. */
  bottom: -0.4085em;
  width: 0.999em;
  height: 1.0554em;
  -webkit-mask: url(/landing/bubble-tail.svg) no-repeat center / 100% 100%;
  mask: url(/landing/bubble-tail.svg) no-repeat center / 100% 100%;
}

.Hero_tailLeft__oxSIE::after {
  left: 0.4134em;
  background-color: #e9e9eb;
}

.Hero_tailRight__ayGMz::after {
  right: 0.4134em;
  /* Continues the body gradient across the tail (top aligns with the body
     at the tail's join, tip lands on #0088ff) so there is no colour seam. */
  background: linear-gradient(#1d9bff, #0088ff);
  transform: scaleX(-1);
}

/* Typing indicator — a gray pill (inherits .convoBubble/.convoIn) with three
   pulsing dots. It springs in, then exits as the first message lands. */
.Hero_openingBubbleSlot__l6peY {
  display: grid;
}

.Hero_openingBubbleSlot__l6peY > * {
  grid-area: 1 / 1;
}

.Hero_typingBubble__y1inz {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  /* Same height as a one-line message bubble (line-height + vertical padding),
     so the dots bubble reads as a normal one-line message. No tail. */
  height: calc(1.294em + 0.529em * 2);
  opacity: 0;
  animation: Hero_heroTypingBubble__57WZt 1.55s ease forwards;
}

.Hero_messageOne__kUH0H,
.Hero_messageTwo__xayyg,
.Hero_messageThree__EJ8IR,
.Hero_receiptReveal__11ccz {
  opacity: 0;
  animation: Hero_heroMessageIn__lV7Dt 0.4s cubic-bezier(0.12, 0.8, 0.35, 1.2) forwards;
}

.Hero_messageOne__kUH0H {
  animation-delay: 1.15s;
}

.Hero_messageTwo__xayyg {
  animation-delay: 1.75s;
}

.Hero_messageThree__EJ8IR {
  animation-delay: 2.55s;
}

.Hero_receiptReveal__11ccz {
  animation-delay: 3.35s;
}

@keyframes Hero_heroTypingBubble__57WZt {
  0%,
  22.58% {
    opacity: 0;
  }
  48.39%,
  74.19% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes Hero_heroMessageIn__lV7Dt {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.7);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.Hero_typingDot__NwPTq {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #757575;
  /* Each dot cycles dark → medium → light (grays sampled from the Framer
     variants), phase-shifted a third of the cycle so a dark "pulse" travels
     across the three dots — matching Variant 1 → 2 → 3. */
  animation: Hero_heroTypingWave__FCOmg 1.3s ease-in-out infinite;
}

.Hero_typingDot__NwPTq:nth-child(1) {
  animation-delay: -0.866s;
}

.Hero_typingDot__NwPTq:nth-child(2) {
  animation-delay: -0.433s;
}

@keyframes Hero_heroTypingWave__FCOmg {
  0%,
  100% {
    background-color: #757575;
  }
  33% {
    background-color: #979797;
  }
  66% {
    background-color: #a3a3a3;
  }
}

/* "Read 8:22 AM" receipt under the sent bubble — sits inset from the bubble's
   trailing edge (not flush), matching the design. */
.Hero_readReceipt__LyzBD {
  align-self: flex-end;
  /* Nudge up + left a touch to sit correctly under the bubble. */
  position: relative;
  top: -1px;
  left: -3px;
  margin-top: 0.2em;
  margin-right: 1.8em;
  font-size: 9px;
  /* iOS shows the timestamp at a regular weight; only "Read" is semibold. */
  font-weight: 400;
  /* iOS read-receipt gray — a darker, neutral gray (sampled #868686), not the
     lighter blue-tinted secondary label. */
  color: #868686;
  letter-spacing: -0.022em;
}

/* "Read" is semibold while the time stays regular — matching iOS. */
.Hero_readLabel__sPATz {
  font-weight: 600;
}

/* ─── Notification bubble ─── */

.Hero_notification__hwE6R {
  position: absolute;
  left: 36.258%;
  top: 92.087%;
  width: 13.533em;
  transform: translate(-50%, -50%) rotate(-4.93deg);
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 1em 0.8667em 0.6667em;
  background: rgba(226, 226, 226, 0.6);
  border-radius: 0.2667em;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 1.4703cqw;
  line-height: 1.3333;
  /* Same fix as the conversation: drop the inherited brand body tracking
     so this SF Pro notification reads like iOS, not loose. */
  letter-spacing: -0.01em;
  color: var(--color-grey-300);
  pointer-events: none;
}

.Hero_notifHeader__v3Vb2 {
  display: flex;
  gap: 0.4em;
  align-items: center;
}

.Hero_notifName__7WvAJ {
  font-weight: 700;
  font-size: 1em;
}

.Hero_notifTime__adznJ {
  font-weight: 400;
  font-size: 0.7333em;
}

.Hero_notifText__Hx3Tt {
  font-weight: 400;
  font-size: 1em;
  margin: 0;
}

/* ─── Mobile (Figma node 6613:47700, 390 × 525) ─── */

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

  .Hero_subtitle__GMBSz {
    max-width: 330px;
  }

  .Hero_artWrapper__cua6z {
    max-width: none;
    aspect-ratio: 390 / 525;
    margin-top: -16px;
  }

  /* Mobile art frame is full-width and already centred on the phone. */
  .Hero_stage__lF5KX {
    transform: none;
  }

  .Hero_todoList__htL0D {
    --cx: 16.971%;
    --cy: 77.56%;
    --w: 34.42%;
    --rot: -8.38deg;
  }

  .Hero_waves__sBnK8 {
    --cx: 4.01%;
    --cy: 19.996%;
    --w: 42.45%;
    --rot: -7deg;
  }

  .Hero_scrapPaper__ALtXv {
    --cx: 100.497%;
    --cy: 55.666%;
    --w: 56.723%;
    --rot: 3.76deg;
  }

  .Hero_home__TSky1 {
    --cx: 94.2%;
    --cy: 8.77%;
    --w: 33.335%;
    --rot: 13.09deg;
    z-index: 0;
  }

  .Hero_screenClip__fncvo {
    z-index: 1;
  }

  .Hero_tube__5ZKR9 {
    --cx: 81.985%;
    --cy: 88.42%;
    --w: 45.013%;
    --rot: 5.96deg;
    z-index: 0;
  }

  .Hero_screenClip__fncvo {
    -webkit-clip-path: inset(0 0 21.714% 0);
            clip-path: inset(0 0 21.714% 0);
  }

  .Hero_backgroundClip__G7Yio {
    left: 50%;
    top: 51.905%;
    width: 84.615%;
    aspect-ratio: 330 / 277;
    border-radius: 1.996cqw;
  }

  .Hero_phoneWrap__XY4Y7,
  .Hero_convoWrap__lSmOT {
    left: 50%;
    top: 9%;
    width: 72%;
  }

  .Hero_convo__rrdfP {
    font-size: 12px;
  }

  .Hero_typingDot__NwPTq {
    width: 6px;
    height: 6px;
  }

  .Hero_convoTime__9m4oc {
    font-size: 8px;
  }

  .Hero_readReceipt__LyzBD {
    font-size: 8px;
  }

  .Hero_notification__hwE6R {
    left: 36.847%;
    top: 97.826%;
    font-size: 10px;
  }
}

@media (min-width: 900px) {
  .Hero_phonePicture__LZGRS::before {
    background-image: -webkit-image-set(
      url('/landing/hero/phone-screen-w390.webp') 1x,
      url('/landing/hero/phone-screen.webp') 2x
    );
    background-image: image-set(
      url('/landing/hero/phone-screen-w390.webp') 1x,
      url('/landing/hero/phone-screen.webp') 2x
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .Hero_fadeUp__yD6cW,
  .Hero_typingBubble__y1inz,
  .Hero_messageOne__kUH0H,
  .Hero_messageTwo__xayyg,
  .Hero_messageThree__EJ8IR,
  .Hero_receiptReveal__11ccz {
    animation-delay: 0s;
    animation-duration: 0.01ms;
  }

  .Hero_typingDot__NwPTq {
    animation: 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/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/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/ui/CaddyLogo.module.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/* The Caddy mark is a circular bunker composition that fills the asset
 * edge-to-edge. We block-display it so it lays out predictably wherever
 * it's dropped, and let the caller layer its own border-radius / object-fit
 * via className. */
.CaddyLogo_root__v5tnO {
  display: block;
  /* Browsers still apply baseline alignment to inline images inside flex
   * children of a Link wrapper, leaving a 4px ghost gap below the mark.
   * `display: block` is enough on its own here, but we keep this comment
   * so future changes don't reintroduce the gap by switching back to
   * inline. */
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/UseCaseDetail.module.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************/
.UseCaseDetail_page__UyYEs {
  --theme-text-muted: color-mix(in srgb, var(--theme-text) 70%, transparent);
  /* Background + type come from MarketingChrome (matches the homepage). */
  background: transparent;
  color: var(--theme-text);
}

.UseCaseDetail_breadcrumbRow__DFNGi,
.UseCaseDetail_hero__CqTds,
.UseCaseDetail_contentGrid__ylGdS,
.UseCaseDetail_related__dWeQn,
.UseCaseDetail_closingCta__6FEiR {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--margin);
  padding-right: var(--margin);
}

.UseCaseDetail_breadcrumbRow__DFNGi {
  padding-top: 12px;
}

.UseCaseDetail_backLink__vhR_x {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--theme-text-muted);
  font-weight: 500;
  text-decoration: none;
}

.UseCaseDetail_backLink__vhR_x:hover {
  color: var(--theme-text);
}

.UseCaseDetail_hero__CqTds {
  padding-top: 32px;
  padding-bottom: 56px;
  display: grid;
  grid-gap: 32px;
  gap: 32px;
}

.UseCaseDetail_heroCopy__t4sfy {
  max-width: 760px;
}

.UseCaseDetail_eyebrow__DXUj0 {
  margin: 0;
  color: var(--theme-text-muted);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.UseCaseDetail_hero__CqTds h1 {
  margin: 14px 0 0;
  font-size: 42px;
  line-height: 1.04;
  letter-spacing: -0.8px;
  font-weight: 600;
}

.UseCaseDetail_summary__sz_xT {
  margin-top: 20px;
  color: var(--theme-text-muted);
  font-size: 19px;
  line-height: 1.55;
}

.UseCaseDetail_primaryCta__L0K7N {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 32px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid color-mix(in srgb, var(--theme-text) 10%, transparent);
  background: var(--theme-cta-bg);
  color: var(--theme-cta-text);
  font-family: var(--font-family);
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--button-shadow), var(--button-inset-shadow);
  transition: transform 0.15s ease;
}

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

/* ─── Example conversation card ─── */

.UseCaseDetail_example__zwEQw {
  background: var(--theme-surface);
  border: 1px solid var(--theme-rule);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 10px 30px rgba(20, 18, 16, 0.08);
}

.UseCaseDetail_exampleHeader__plv_q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--theme-rule);
}

.UseCaseDetail_exampleHeader__plv_q img {
  border-radius: 50%;
}

.UseCaseDetail_exampleHeader__plv_q span,
.UseCaseDetail_exampleHeader__plv_q small {
  display: block;
}

.UseCaseDetail_exampleHeader__plv_q span {
  font-weight: 600;
}

.UseCaseDetail_exampleHeader__plv_q small {
  color: var(--theme-text-muted);
  font-size: 14px;
}

.UseCaseDetail_thread__0vqLm {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  padding-top: 20px;
}

.UseCaseDetail_exampleGrid__bjakh {
  margin-top: 16px;
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.UseCaseDetail_spokenIntro__KEtNJ {
  margin: 0 0 8px;
  padding: 12px;
  border: 1px solid var(--theme-rule);
  border-radius: var(--radius-sm);
  background: var(--theme-bg);
}

.UseCaseDetail_spokenIntro__KEtNJ span,
.UseCaseDetail_receiptAttachment__3gLoF span {
  display: block;
  color: var(--theme-text-muted);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.UseCaseDetail_spokenIntro__KEtNJ p {
  margin-top: 8px;
  color: var(--theme-text);
  line-height: 1.45;
}

.UseCaseDetail_incoming__i6uhi,
.UseCaseDetail_outgoing__7nogQ {
  max-width: 84%;
  margin: 0;
  padding: 10px 15px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.38;
  white-space: pre-line;
}

.UseCaseDetail_incoming__i6uhi {
  justify-self: start;
  background: var(--theme-imessage-received-bg);
  color: var(--theme-imessage-received-text);
}

.UseCaseDetail_outgoing__7nogQ {
  justify-self: end;
  /* Constant blue sent bubble with white text, sourced from the shared tokens
     (like .incoming above) so it can't drift back to tracking the page bg — the
     regression fixed in #2631. */
  background: color-mix(in srgb, var(--theme-imessage-sent-bg) 75%, var(--color-black));
  color: var(--theme-imessage-sent-text);
}

.UseCaseDetail_receiptAttachment__3gLoF {
  width: min(84%, 340px);
  justify-self: end;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--theme-rule);
  border-radius: var(--radius-sm);
  background: var(--theme-bg);
}

.UseCaseDetail_receiptAttachment__3gLoF strong {
  font-size: 15px;
  line-height: 1.3;
}

.UseCaseDetail_receiptAttachment__3gLoF dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.UseCaseDetail_receiptAttachment__3gLoF dt {
  color: var(--theme-text-muted);
  font-size: 12px;
  line-height: 1.2;
}

.UseCaseDetail_receiptAttachment__3gLoF dd {
  margin-top: 2px;
  color: var(--theme-text);
  font-weight: 600;
}

/* ─── Content grid ─── */

.UseCaseDetail_contentGrid__ylGdS {
  display: grid;
  grid-gap: 32px;
  gap: 32px;
  padding-top: 40px;
  padding-bottom: 64px;
  border-top: 1px solid var(--theme-rule);
}

.UseCaseDetail_mainColumn__BOLAJ,
.UseCaseDetail_sideColumn__yIcI4 {
  display: grid;
  align-content: start;
}

.UseCaseDetail_mainColumn__BOLAJ {
  gap: 40px;
}

.UseCaseDetail_sideColumn__yIcI4 {
  gap: 24px;
}

.UseCaseDetail_section__WQFmC h2,
.UseCaseDetail_sidePanel__u__OV h2 {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  font-weight: 600;
}

.UseCaseDetail_section__WQFmC > p {
  margin-top: 12px;
  color: var(--theme-text-muted);
  font-size: 17px;
  line-height: 1.6;
}

.UseCaseDetail_checkList__gkofg,
.UseCaseDetail_steps__dMRpQ,
.UseCaseDetail_tips__mEU0t,
.UseCaseDetail_integrationList__SZMr7,
.UseCaseDetail_promptList__q0hRD,
.UseCaseDetail_scenarioGrid__NjDpR,
.UseCaseDetail_faqList__W4jcx {
  margin-top: 16px;
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.UseCaseDetail_checkList__gkofg li,
.UseCaseDetail_tips__mEU0t li {
  display: flex;
  gap: 12px;
  color: var(--theme-text-muted);
  line-height: 1.55;
}

.UseCaseDetail_checkList__gkofg svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-pine);
}

.UseCaseDetail_steps__dMRpQ {
  counter-reset: steps;
}

.UseCaseDetail_steps__dMRpQ li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.UseCaseDetail_steps__dMRpQ span {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-cta-bg);
  color: var(--theme-cta-text);
  font-weight: 600;
}

.UseCaseDetail_steps__dMRpQ p {
  margin: 3px 0 0;
  color: var(--theme-text-muted);
}

.UseCaseDetail_tips__mEU0t li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--theme-accent);
}

.UseCaseDetail_promptList__q0hRD li {
  padding: 12px 16px;
  border: 1px solid var(--theme-rule);
  border-radius: var(--radius-sm);
  background: var(--theme-surface);
  color: var(--theme-text-muted);
  line-height: 1.5;
}

.UseCaseDetail_scenarioCard__n7fLo,
.UseCaseDetail_faqItem__QxfFF {
  padding: 16px;
  border: 1px solid var(--theme-rule);
  border-radius: var(--radius-md);
  background: var(--theme-surface);
}

.UseCaseDetail_scenarioCard__n7fLo h3 {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.2px;
  font-weight: 600;
}

.UseCaseDetail_scenarioCard__n7fLo p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--theme-text-muted);
}

.UseCaseDetail_contextualLink__pp6Do {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 12px;
  display: inline-flex;
  color: var(--theme-text);
  font-weight: 500;
}

.UseCaseDetail_sidePanel__u__OV > .UseCaseDetail_contextualLink__pp6Do {
  display: flex;
}

.UseCaseDetail_faqItem__QxfFF h3 {
  color: var(--theme-text);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  font-weight: 600;
}

.UseCaseDetail_faqItem__QxfFF p {
  margin-top: 12px;
  font-size: 15px;
  color: var(--theme-text-muted);
  line-height: 1.55;
}

.UseCaseDetail_sidePanel__u__OV {
  padding: 24px;
  border: 1px solid var(--theme-rule);
  border-radius: var(--radius-lg);
  background: var(--theme-surface);
  box-shadow: 0 1px 2px rgba(20, 18, 16, 0.04);
}

.UseCaseDetail_sidePanel__u__OV h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.UseCaseDetail_sidePanel__u__OV p {
  margin-top: 12px;
  color: var(--theme-text-muted);
  line-height: 1.55;
}

.UseCaseDetail_integrationItem__nfAO5 {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
}

.UseCaseDetail_integrationItem__nfAO5 img {
  width: 42px;
  height: 42px;
  border: 1px solid var(--theme-rule);
  border-radius: 12px;
}

.UseCaseDetail_integrationItem__nfAO5 span,
.UseCaseDetail_integrationItem__nfAO5 small {
  display: block;
}

.UseCaseDetail_integrationItem__nfAO5 span {
  font-weight: 600;
}

.UseCaseDetail_integrationItem__nfAO5 small {
  margin-top: 2px;
  color: var(--theme-text-muted);
  font-size: 14px;
  line-height: 1.35;
}

/* ─── Related ─── */

.UseCaseDetail_related__dWeQn {
  padding-top: 48px;
  padding-bottom: 72px;
  border-top: 1px solid var(--theme-rule);
}

.UseCaseDetail_relatedHeader__LHSwN h2 {
  margin-top: 8px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  font-weight: 600;
}

.UseCaseDetail_relatedHeader__LHSwN .UseCaseDetail_eyebrow__DXUj0 {
  color: var(--theme-text-muted);
}

.UseCaseDetail_relatedGrid__PetW_ {
  margin-top: 28px;
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.UseCaseDetail_relatedCard__FOfxI {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--theme-rule);
  border-radius: var(--radius-lg);
  background: var(--theme-surface);
  text-decoration: none;
  color: var(--theme-text);
  box-shadow: 0 1px 2px rgba(20, 18, 16, 0.04);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.UseCaseDetail_relatedCard__FOfxI:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--theme-text) 18%, transparent);
  box-shadow: 0 10px 30px rgba(20, 18, 16, 0.08);
}

.UseCaseDetail_relatedCard__FOfxI h3 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  font-weight: 600;
}

.UseCaseDetail_relatedCard__FOfxI p {
  margin-top: 12px;
  color: var(--theme-text-muted);
  line-height: 1.5;
}

.UseCaseDetail_closingCta__6FEiR {
  padding-top: 56px;
  padding-bottom: 72px;
  border-top: 1px solid var(--theme-rule);
  text-align: center;
}

.UseCaseDetail_closingCta__6FEiR h2 {
  margin-top: 8px;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  font-weight: 600;
}

.UseCaseDetail_closingCta__6FEiR .UseCaseDetail_primaryCta__L0K7N {
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 900px) {
  .UseCaseDetail_hero__CqTds {
    min-height: 520px;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    align-items: center;
  }

  .UseCaseDetail_hero__CqTds h1 {
    font-size: 56px;
    letter-spacing: -1.1px;
  }

  .UseCaseDetail_contentGrid__ylGdS {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .UseCaseDetail_sideColumn__yIcI4 {
    position: -webkit-sticky;
    position: sticky;
    top: 24px;
  }

  .UseCaseDetail_relatedGrid__PetW_ {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 899.98px) {
  .UseCaseDetail_breadcrumbRow__DFNGi,
  .UseCaseDetail_hero__CqTds,
  .UseCaseDetail_contentGrid__ylGdS,
  .UseCaseDetail_related__dWeQn,
  .UseCaseDetail_closingCta__6FEiR {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/travel/TravelLanding.module.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************/
.TravelLanding_page__RG1yk {
  color: var(--theme-text);
  background: var(--theme-bg);
}

.TravelLanding_heroCaption__GjZI5 {
  margin: -32px 24px 24px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--theme-text-secondary, var(--theme-text));
}

.TravelLanding_closing__Vome9 {
  padding: 64px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.TravelLanding_avatar__PXxZi {
  width: 104px;
  height: 104px;
  margin-bottom: 24px;
  object-fit: contain;
}

.TravelLanding_closing__Vome9 h2 {
  max-width: 700px;
  margin: 0 0 16px;
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.TravelLanding_closing__Vome9 > p {
  max-width: 520px;
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.5;
  text-wrap: balance;
}

.TravelLanding_related__D24Ay {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 32px 64px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.TravelLanding_relatedLink__YazfE {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--theme-text) 20%, transparent);
  border-radius: 999px;
  font-size: 14px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s;
}

.TravelLanding_relatedLink__YazfE svg {
  flex-shrink: 0;
}

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

.TravelLanding_allUseCases__ddnYW {
  width: 100%;
  margin-top: 12px;
  text-align: center;
  color: inherit;
  font-size: 13px;
  text-underline-offset: 4px;
}

.TravelLanding_page__RG1yk a:focus-visible {
  outline: 2px solid var(--theme-text);
  outline-offset: 5px;
}

@media (max-width: 899.98px) {
  .TravelLanding_heroCaption__GjZI5 {
    margin-top: -24px;
  }

  .TravelLanding_closing__Vome9 {
    padding-top: 32px;
  }

  .TravelLanding_related__D24Ay {
    padding-inline: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .TravelLanding_relatedLink__YazfE {
    transition: none;
  }
}