/* Landing page scaffold: neutral, swappable blocks, no block-order dependencies */

:root {
  --lp-max-width: 1120px;
  --lp-gutter: clamp(16px, 4vw, 32px);
  --lp-block-padding-y: clamp(24px, 6vw, 72px);

  /* If you want spacing BETWEEN blocks instead of padding inside blocks, use this. */
  --lp-stack-gap: 0px;
}

.lp {
  /* Keep neutral. base.css can own typography/colors */
  margin-top: -2rem;
}

.lp-stack {
  display: flex;
  flex-direction: column;
  gap: var(--lp-stack-gap);
}

/* The swappable unit */
.lp-block {
  padding-block: var(--lp-block-padding-y);
  /* No margins here -> removing/reordering blocks never breaks vertical rhythm */
}

/* Consistent content width for blocks that want it */
.lp-inner {
  width: min(var(--lp-max-width), calc(100% - (2 * var(--lp-gutter))));
  margin-inline: auto;
}

/* Optional modifiers you can use later without creating “designed” blocks */
.lp-block--flush { padding-block: 0; } /* e.g., full-bleed images later */
.lp-inner--wide { --lp-max-width: 1320px; }
.lp-inner--narrow { --lp-max-width: 920px; }

/* Debug helper (enable temporarily) */
/*
.lp-block { outline: 1px dashed rgba(0,0,0,0.2); }
.lp-inner { outline: 1px dashed rgba(0,0,0,0.15); }
*/


/*
GENERAL STYLING
*/
main.container {
  max-width: none;
}


/* ========== Hero block ========== */
/* HERO with full-width background image and left whitespace for text */
.lp-hero-bg {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse at 30% 20%, rgba(248, 186, 168, 0.30) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(251, 217, 208, 0.25) 0%, transparent 50%);
  padding-block: var(--lp-block-padding-y);
}

/* Make sure the hero vertically centers nicely */
.lp-hero-bg .lp-inner {
  height: 100%;
  display: flex;
  align-items: center;
}

/* Text overlay container */
.lp-hero-content {
  max-width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 5vh;
}

/* Fluid typography */
.lp-hero-title {
  margin: 0;
  line-height: 1.25;
  /* letter-spacing: -0.02em; */
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
}

.lp-hero-kicker {
  margin: 0;
  opacity: 0.85;
  max-width: 60ch;
  margin-top: 0.5em;
  margin-bottom: 0.3em;
}

.lp-hero-text {
  margin: 0;
  opacity: 0.75;
  max-width: 60ch;
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}

/* Actions */
.lp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}


/* ========== Features block ========== */
/* Background / spacing only (modifier class) */
/* SECTION BACKGROUND + SPACING */
.lp-block {
  padding: 5rem 0; /* py-20 */
}

@media (min-width: 640px) {
  .lp-block { padding: 6rem 0; } /* sm:py-28 */
}

.lp-features-bg {
  background: #fff; /* Canva uses bg-white */
  padding-bottom: 4rem;
  padding-top: 4rem;
}

/* INNER CONTAINER (max-w-6xl + side padding) */
.lp-inner {
  max-width: 72rem;            /* ~ max-w-6xl */
  margin: 0 auto;
  padding: 0 1rem;             /* px-4 */
}

@media (min-width: 640px) {
  .lp-inner { padding: 0 1.5rem; } /* sm:px-6 */
}
@media (min-width: 992px) {
  .lp-inner { padding: 0 2rem; }   /* lg:px-8-ish */
}

/* TITLE */
.lp-features__title {
  text-align: center;
  color: var(--charcoal-900, #1a1a1a);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 2rem; /* mb-16 */
  font-size: clamp(2.25rem, 3.6vw, 3.75rem); /* 36px -> 60px-ish */
  line-height: 1.05;
}

/* GRID (max-w-2xl centered + gap) */
.lp-features__grid {
  max-width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;      /* gap-6 */
}

@media (min-width: 992px) {
  .lp-features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* lg:grid-cols-2 */
  }
}

/* CARD */
.lp-feature {
  background: var(--sand-50);
  border: 1px solid var(--coral-300, #ebe6de);
  border-radius: 1.5rem;   /* rounded-2xl */
  padding: 1.5rem;         /* p-6 */

  display: flex;
  gap: 1rem;               /* gap-4 */
  align-items: center;

  transition:
    transform 220ms var(--ease-out, ease-out),
    box-shadow 220ms var(--ease-out, ease-out);
}

.lp-feature:hover {
  transform: translateY(-4px); /* hover:-translate-y-1 feel */
  box-shadow: 0 18px 42px rgba(26, 26, 26, 0.10); /* hover:shadow-lg */
}

/* ICON BADGE (repurposing your old img class) */
.lp-feature__img {
  width: 3rem;              /* w-12 */
  height: 3rem;             /* h-12 */
  border-radius: 0.75rem;   /* rounded-xl */
  background: var(--coral-100, #fdeee9);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  color: var(--coral-600, #d95636); /* SVG stroke uses currentColor */
}

.lp-feature__img svg {
  width: 1.5rem;  /* w-6 */
  height: 1.5rem; /* h-6 */
  display: block;
}

/* TEXT */
.lp-feature__text {
  margin: 0;
  color: var(--charcoal-600);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.2;
}

/* Closing block under the grid */
.lp-features__closing{
  margin-top: 3rem;   /* mt-12 */
  text-align: center;
}

/* Question text */
.lp-features__question{
  margin-top: 0; /* mb-6 */
  margin-bottom: 3rem; /* mb-6 */
  color: var(--charcoal-600, #525252);
  font-weight: 400;
  font-size: 1.125rem; /* text-lg */
  line-height: 1.4;
  text-align: center;
}

@media (min-width: 640px){
  .lp-features__question{
    font-size: 1.25rem; /* sm:text-xl */
  }
}

/* Spark pill */
.lp-features__spark{
  display: inline-flex;
  align-items: center;
  color: var(--charcoal-800);
  font-size: 2rem;
  font-weight: 600;
}

/* ========== meet hey lisi block ========== */
/* Meet & Imagine layout */
.lp-meet { background: var(--sand-50); }
.lp-meet__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem; /* gap-16 */
  align-items: start;
}

@media (min-width: 992px){
  .lp-meet__inner{
    grid-template-columns: 1fr 1fr; /* lg:grid-cols-2 */
    gap: 6rem; /* lg:gap-24-ish */
  }
}

/* Left badge: “Introducing” */
.lp-meet__badge{
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--coral-100, #fdeee9);
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  margin-bottom: 2rem;
  width: fit-content;
}

.lp-meet__badge-icon{
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--coral-500, #ec6f4d);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.lp-meet__badge-icon svg{
  width: 20px;
  height: 20px;
  display: block;
}

.lp-meet__badge-text{
  color: var(--coral-600, #d95636); /* closest token you already have */
  font-weight: 600;
  font-size: 0.875rem;
}

/* Title + lead */
.lp-meet__title{
  margin: 0 0 2rem;
  color: var(--charcoal-900, #1a1a1a);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.75rem, 5rem);
  line-height: 1.05;
}

.lp-meet__title-strong{
  color: var(--coral-500);
  font-weight: 700;
}

.lp-meet_right{
  padding-left: 4rem;
  padding-top: 2.75rem;
}

.lp-meet__lead{
  margin: 0;
  color: var(--charcoal-600, #525252);
  font-weight: 400;       /* Canva “font-medium” feel */
  font-size: 1.25rem;     /* ~text-xl */
  line-height: 1.6;
  max-width: 52ch;
}

/* Big icon + flag */
.lp-meet__logo{
  margin-top: 3rem; /* mt-12 */
  position: relative;
  width: fit-content;
}

.lp-meet__logo-main{
  width: 10rem;   /* w-40 */
  height: 10rem;  /* h-40 */
  border-radius: 2rem; /* rounded-3xl feel */
  background: var(--coral-500, #ec6f4d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 60px rgba(236, 111, 77, 0.30);
}

.lp-meet__logo-main svg{
  width: 5rem;   /* w-20 */
  height: 5rem;  /* h-20 */
  display: block;
}

.lp-meet__logo-flag{
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  width: 3.5rem;   /* w-14 */
  height: 3.5rem;  /* h-14 */
  border-radius: 1rem; /* rounded-2xl */
  background: var(--sand-200, #ebe6de);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 12px 28px rgba(26, 26, 26, 0.12);
}

/* Right column */
.lp-meet__subtitle{
  margin: 0 0 3rem;
  color: var(--charcoal-900, #1a1a1a);
  font-weight: 600;
  font-size: clamp(1.75rem, 2.2vw, 2.25rem); /* ~text-3xl/4xl */
  line-height: 1.1;
}

.lp-meet__list{
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* space-y-6 */
}

.lp-meet__item{
  display: flex;
  align-items: flex-start;
  gap: 1.5rem; /* gap-6 */
}

.lp-meet__icon{
  width: 3.5rem;   /* w-14 */
  height: 3.5rem;  /* h-14 */
  border-radius: 1.5rem; /* rounded-2xl */
  background: var(--coral-100, #fdeee9);
  color: var(--coral-600, #d95636);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 0.25rem; /* mt-1 */
}

.lp-meet__icon svg{
  width: 1.75rem; /* w-7 */
  height: 1.75rem; /* h-7 */
  display: block;
}

/* Reuse your existing text classes, but ensure they match Canva */
.lp-meet__text{
  margin: 0;
  color: var(--charcoal-900, #1a1a1a);
  font-weight: 700; /* font-semibold */
  font-size: 1.125rem; /* text-lg */
  line-height: 1.35;
}

.lp-meet__text-muted{
  display: block;
  margin-top: 0.25rem;
  color: var(--charcoal-600, #525252);
  font-weight: 400;
  font-size: 1rem;
}

/* How it works block */
/* Section background like Canva bg-sand-50 */
.lp-how{
  background: var(--sand-100);
}

/* Layout wrapper */
.lp-how__inner{
  /* lp-inner already sets max-width + side padding */
}

/* Steps grid */
.lp-how__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* gap-8 */
}

@media (min-width: 992px){
  .lp-how__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
  }
}

/* Step card */
.lp-how__card{
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sand-200, #ebe6de);
  border-radius: 2rem; /* rounded-3xl feel */
  padding: 2rem;       /* p-8 */
  box-shadow: 0 14px 34px rgba(26, 26, 26, 0.10); /* shadow-lg */

  transition:
    box-shadow 220ms var(--ease-out, ease-out),
    transform 220ms var(--ease-out, ease-out);
}

.lp-how__card:hover{
  box-shadow: 0 18px 48px rgba(26, 26, 26, 0.14); /* hover:shadow-xl */
}

/* Decorative corner blob */
.lp-how__corner{
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;  /* w-24 */
  height: 6rem; /* h-24 */
  background: var(--coral-100, #fdeee9);
  opacity: 0.5;
  border-bottom-left-radius: 9999px; /* rounded-bl-full */
  pointer-events: none;
}

/* Inner content above decoration */
.lp-how__card-inner{
  position: relative;
}

/* Number badge */
.lp-how__step{
  width: 3.5rem;   /* w-14 */
  height: 3.5rem;  /* h-14 */
  border-radius: 1.5rem; /* rounded-2xl */
  background: var(--coral-500, #ec6f4d);
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 600;
  font-size: 1.5rem; /* text-2xl */
  margin-bottom: 1.5rem; /* mb-6 */

  transition: transform 220ms var(--ease-out, ease-out);
}

.lp-how__card:hover .lp-how__step{
  transform: scale(1.1);
}

/* Step text */
.lp-how__text{
  margin: 0;
  color: var(--charcoal-600, #2d2d2d);
  font-size: 1.125rem; /* text-lg */
  line-height: 1.65;   /* leading-relaxed */
  font-weight: 400;
}

/* Closing block */
.lp-how__closing{
  margin-top: 3rem; /* mt-12 */
  text-align: center;
}

/* “That simple.” */
.lp-how__tagline{
  margin: 0 0 2.5rem; /* mb-10 */
  color: var(--charcoal-800);
  font-weight: 600;
  font-size: 1.5rem; /* text-2xl */
  line-height: 1.2;
}

@media (min-width: 640px){
  .lp-how__tagline{
    font-size: 1.875rem; /* sm:text-3xl */
  }
}

/* Actions: stack on mobile, row on sm+ */
.lp-how__actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem; /* gap-4 */
}

@media (min-width: 640px){
  .lp-how__actions{
    flex-direction: row;
  }
}

/* Buttons (recreate Canva hover effects) */
.lp-how__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;

  width: 100%;            /* w-full on mobile */
  padding: 1rem 2rem;     /* px-8 py-4 */
  border-radius: 9999px;  /* rounded-full */
  font-weight: 600;
  font-size: 1.125rem;    /* text-lg */
  line-height: 1;

  transition:
    background-color 220ms var(--ease-out, ease-out),
    border-color 220ms var(--ease-out, ease-out),
    box-shadow 220ms var(--ease-out, ease-out),
    transform 220ms var(--ease-out, ease-out);
}

@media (min-width: 640px){
  .lp-how__btn{ width: auto; } /* sm:w-auto */
}

.lp-how__btn--primary{
  background: var(--coral-500, #ec6f4d);
  color: #fff;
  border: 0;
}

.lp-how__btn--primary:hover{
  background: var(--coral-600, #d95636);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(236, 111, 77, 0.30);
}

.lp-how__btn--secondary{
  background: #fff;
  color: var(--charcoal-800, #2d2d2d);
  border: 2px solid var(--sand-300, #ddd5c8);
}

.lp-how__btn--secondary:hover{
  background: var(--sand-100, #f5f3ef);
  color: #fff;
  border-color: var(--coral-300, #f8baa8);
}

.lp-how__btn:focus-visible{
  outline: 3px solid rgba(236, 111, 77, 0.35);
  outline-offset: 3px;
}

/* ========== What we help with block ========== */
/* Services / Help section */
.lp-help{
  background: #fff; /* Canva: bg-white */
}

/* Title wrapper */
.lp-help__header{
  text-align: center;
  margin-bottom: 3rem; /* mb-12 */
}

@media (min-width: 640px){
  .lp-help__header{ margin-bottom: 4rem; } /* sm:mb-16 */
}

.lp-help__title{
  margin: 0;
  color: var(--charcoal-900, #1a1a1a);
  font-weight: 600;
  font-size: clamp(1.875rem, 2.6vw, 2.25rem); /* 3xl -> 4xl */
  line-height: 1.1;
}

/* Content width like max-w-4xl */
.lp-help__content{
  max-width: 56rem; /* ~ max-w-4xl */
  margin: 0 auto;
}

/* Lead paragraph */
.lp-help__lead{
  margin: 0 0 3rem;
  text-align: center;
  color: var(--charcoal-600, #525252);
  font-size: 1.125rem; /* text-lg */
  line-height: 1.7;    /* leading-relaxed */
}

/* Grid list */
.lp-help__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* gap-6 */
  margin-bottom: 3rem; /* mb-8 */
}

@media (min-width: 768px){
  .lp-help__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
  }
}

/* Item row */
.lp-help__item{
  display: flex;
  align-items: center;
  gap: 1rem;  /* gap-4 */
}

/* Icon badge */
.lp-help__icon{
  width: 40px;  /* w-10 */
  height: 40px; /* h-10 */
  border-radius: 0.75rem; /* rounded-xl */
  background: var(--coral-100, #fdeee9);
  color: var(--coral-600, #d95636);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-top: 0.25rem; /* mt-1 */
}

.lp-help__icon svg{
  width: 20px;  /* w-5 */
  height: 20px; /* h-5 */
  display: block;
}

/* Text */
.lp-help__text{
  margin: 0;
  color: var(--charcoal-700, #404040);
  font-size: 1rem;
  line-height: 1.6;
}

/* Actions: stack on mobile, row on sm+ */
.lp-help__actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem; /* gap-4 */
}

@media (min-width: 640px){
  .lp-help__actions{
    flex-direction: row;
  }
}

/* Beyond Relocation section (Canva: py-16 sm:py-24 bg-white) */
.lp-beyond-bg {
  position: relative;
  min-height: 64vh;
  background: radial-gradient(ellipse at 30% 20%, rgba(248, 186, 168, 0.30) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(251, 217, 208, 0.25) 0%, transparent 50%);
  padding-block: var(--lp-block-padding-y);
}

/* Make sure the beyond vertically centers nicely */
.lp-beyond-bg .lp-inner {
  height: 100%;
  display: flex;
  align-items: center;
}

/* Override padding just for this block if your global .lp-block differs */
.lp-beyond.lp-block{
  padding: 4rem 0; /* py-16 */
}
@media (min-width: 640px){
  .lp-beyond.lp-block{ padding: 5rem 0; } /* sm:py-24 */
}

/* 2-col layout */
.lp-beyond__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem; /* gap-12 */
  align-items: center;
}
@media (min-width: 992px){
  .lp-beyond__inner{
    grid-template-columns: 1fr 1fr;
    gap: 4rem; /* lg:gap-16 */
  }
}

/* Typography */
.lp-beyond__title{
  margin: 0 0 1.5rem;
  color: var(--charcoal-900, #1a1a1a);
  font-weight: 600;
  font-size: clamp(1.875rem, 2.6vw, 2.25rem); /* 3xl -> 4xl */
  line-height: 1.1;
}

.lp-beyond__lead{
  margin: 0 0 1.5rem;
  color: var(--charcoal-600, #525252);
  font-size: 1.125rem; /* text-lg */
  line-height: 1.7;    /* leading-relaxed */
  font-weight: 400;
}
.lp-beyond__lead:last-child{ margin-bottom: 0; }

/* Card */
.lp-beyond__card{
  background: var(--sand-50, #faf9f7);
  border: 1px solid var(--sand-200, #ebe6de);
  border-radius: 2rem; /* rounded-3xl */
  padding: 2rem;       /* p-8 */
  box-shadow: 0 14px 34px rgba(26, 26, 26, 0.10); /* similar to card-shadow */
}

/* Checklist */
.lp-beyond__list{
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* space-y-5 */
}

.lp-beyond__item{
  display: flex;
  align-items: center;
  gap: 0.75rem; /* gap-3 */
}

.lp-beyond__item-text{
  color: var(--charcoal-700, #404040);
  font-size: 1rem;
  line-height: 1.4;
}

/* Divider */
.lp-beyond__divider{
  height: 1px;
  background: var(--sand-300, #ddd5c8);
  margin: 0; /* my-2 */
}

/* Icon dots */
.lp-beyond__dot{
  width: 24px;   /* w-6 */
  height: 24px;  /* h-6 */
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.lp-beyond__dot--green{
  background: #dcfce7; /* green-100 */
  color: #16a34a;      /* green-600 */
}

.lp-beyond__dot--coral{
  background: var(--coral-100, #fdeee9);
  color: var(--coral-600, #d95636);
}

/* Check SVG sizing (w-3.5 h-3.5) */
.lp-beyond__check{
  width: 14px;
  height: 14px;
  display: block;
}

/* Pricing section */
.lp-pricing{
  background: #fff;
}

/* Centered container like Canva max-w-4xl text-center */
.lp-pricing__inner{
  max-width: 56rem; /* ~ max-w-4xl */
  margin: 0 auto;
  text-align: center;
}

/* Title + lead */
.lp-pricing__title1{
  margin: 0 0 1.5rem;
  color: var(--charcoal-900, #1a1a1a);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.875rem, 3vw, 3rem); /* 3xl -> 5xl */
  line-height: 1.08;
}
.lp-pricing__title2{
  margin: 0 0 1.5rem;
  color: var(--coral-500);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.875rem, 3vw, 3rem); /* 3xl -> 5xl */
  line-height: 1.08;
}

.lp-pricing__lead{
  margin: 0 0 2rem;
  color: var(--charcoal-600, #525252);
  font-size: clamp(1.25rem, 2vw, 1.5rem); /* xl -> 2xl */
  line-height: 1.6;
  font-weight: 400;
}

/* Bullet list */
.lp-pricing__bullets{
  display: flex;
  flex-direction: column;
  gap: 1rem; /* space-y-4 */
  margin: 0 0 3rem; /* mb-12 */
  align-items: flex-start;
  padding-left: 8.4rem;
}


@media (max-width: 640px){
  .lp-pricing__bullets{ padding-left: 4.2rem; }
}


@media (max-width: 640px){
  .lp-pricing__bullets{ padding-left: 2.1rem; }
}

.lp-pricing__bullet{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem; /* gap-4 */
}

.lp-pricing__check{
  width: 24px;  /* w-6 */
  height: 24px; /* h-6 */
  flex: 0 0 auto;
  color: var(--coral-500, #ec6f4d);
  margin-top: 0.1rem;
}

.lp-pricing__bullet-text{
  margin: 0;
  text-align: left; /* matches Canva readability even though section is centered */
  color: var(--charcoal-700, #404040);
  font-size: 1.125rem; /* text-lg */
  line-height: 1.6;
  max-width: 56ch; /* keeps lines nice */
  flex-grow: 1;
}

/* Highlight callout card */
.lp-pricing__callout{
  max-width: 42rem; /* ~ max-w-2xl */
  margin: 0 auto 3rem; /* mb-12 */
  background: #fff;
  border-radius: 1.5rem; /* rounded-2xl */
  padding: 2rem; /* p-8 */
  border: 2px solid var(--charcoal-600);
  box-shadow: 0 14px 34px rgba(26, 26, 26, 0.10); /* shadow-lg */
}

.lp-pricing__callout-text{
  margin: 0;
  color: var(--charcoal-700);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem); /* 2xl -> 3xl */
  line-height: 1.25;
}

/* Actions */
.lp-pricing__actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 640px){
  .lp-pricing__actions{ flex-direction: row; }
}

/* Buttons (reuse patterns from lp-how) */
.lp-pricing__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  width: 100%;
  padding: 1rem 2rem;     /* px-8 py-4 */
  border-radius: 9999px;  /* rounded-full */
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1;

  transition:
    background-color 220ms var(--ease-out, ease-out),
    border-color 220ms var(--ease-out, ease-out),
    box-shadow 220ms var(--ease-out, ease-out),
    transform 220ms var(--ease-out, ease-out);
}

@media (min-width: 640px){
  .lp-pricing__btn{ width: auto; }
}

.lp-pricing__btn--primary{
  background: var(--coral-500, #ec6f4d);
  color: #fff;
  border: 0;
}

.lp-pricing__btn--primary:hover{
  color: #fff;
  background: var(--coral-600, #d95636);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(236, 111, 77, 0.30);
}

.lp-pricing__btn--secondary{
  background: var(--sand-100, #f5f3ef);
  color: var(--charcoal-800, #2d2d2d);
  border: 2px solid var(--sand-300, #ddd5c8);
}

.lp-pricing__btn--secondary:hover{
  color: #fff;
  background: var(--sand-200, #ebe6de);
}

.lp-pricing__btn:focus-visible{
  outline: 3px solid rgba(236, 111, 77, 0.35);
  outline-offset: 3px;
}

/* Final CTA gradient section */
.lp-final-cta{
  /* bg-gradient-to-r from-coral-500 to-coral-600 */
  background: linear-gradient(90deg,
    var(--coral-500, #ec6f4d),
    var(--coral-600, #d95636)
  );
}

/* Match Canva py-16 sm:py-24 while keeping your lp-block system */
.lp-final-cta.lp-block{
  padding: 4rem 0; /* py-16 */
}
@media (min-width: 640px){
  .lp-final-cta.lp-block{ padding: 5rem 0; } /* sm:py-24 */
}

/* Centered inner like max-w-4xl + text-center */
.lp-final-cta__inner{
  max-width: 56rem; /* ~ max-w-4xl */
  margin: 0 auto;
  text-align: center;
}

/* Title */
.lp-final-cta__title{
  margin: 0 0 3rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(1.875rem, 3vw, 3rem); /* 3xl -> 5xl */
  line-height: 1.08;
}

/* Button */
.lp-final-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  background: #fff;
  color: var(--coral-500, #d95636);
  text-decoration: none;

  padding: 1rem 2rem;     /* px-8 py-4 */
  border-radius: 9999px;  /* rounded-full */
  font-weight: 600;
  font-size: 1.125rem;    /* text-lg */
  line-height: 1;

  transition:
    background-color 220ms var(--ease-out, ease-out),
    transform 220ms var(--ease-out, ease-out),
    box-shadow 220ms var(--ease-out, ease-out);
}

.lp-final-cta__btn:hover{
  color: var(--coral-600);
  background: var(--sand-50, #faf9f7);
  transform: scale(1.05);
  box-shadow: 0 18px 44px rgba(26, 26, 26, 0.18); /* hover:shadow-xl */
}

.lp-final-cta__btn:focus-visible{
  outline: 3px solid rgba(255,255,255,0.55);
  outline-offset: 3px;
}

/* Icon sizing */
.lp-final-cta__icon{
  width: 1.25rem;  /* w-5 */
  height: 1.25rem; /* h-5 */
  display: block;
}


/* Container: mirrors mt-10 + optional animation wrapper */
.lp-cta-container{
  margin-top: 2.5rem; /* mt-10 ≈ 40px */
  /* If you want the fade-in-up effect, uncomment:
  opacity: 0;
  transform: translateY(12px);
  animation: lp-fade-in-up 600ms var(--ease-out, ease-out) forwards;
  animation-delay: 300ms;
  */
}

/* Button */
.lp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  background: var(--coral-500, #ec6f4d);
  color: #fff;
  text-decoration: none;

  padding: 1rem 2rem;         /* px-8 py-4 */
  border-radius: 9999px;      /* rounded-full */
  font-weight: 700;           /* font-bold */
  font-size: 1.25rem;        /* text-lg */
  line-height: 1.125;

  border: 0;
  cursor: pointer;

  transition:
    background-color 220ms var(--ease-out, ease-out),
    transform 220ms var(--ease-out, ease-out),
    box-shadow 220ms var(--ease-out, ease-out);
}

.lp-btn:hover{
  background: var(--coral-600, #d95636);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(236, 111, 77, 0.30); /* coral-ish shadow */
  text-decoration: none;
  color: #fff;
}

.lp-btn:active{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(236, 111, 77, 0.22);
}

.lp-btn:focus-visible{
  outline: 3px solid rgba(236, 111, 77, 0.35);
  outline-offset: 3px;
}

/* Optional: if you later add an inline SVG inside the button */
.lp-btn svg{
  width: 1.25rem;  /* w-5 */
  height: 1.25rem; /* h-5 */
  display: block;
}

/* Optional animation keyframes */
@keyframes lp-fade-in-up{
  to { opacity: 1; transform: translateY(0); }
}


/* ---------------- New Landing Page Styles ---------------- */
.lp-btn-alt {
  font-size: 1.35rem;
  font-weight: 700;
  border-width: 0.15rem;

  padding-top: 0.6rem;
  padding-bottom: 0.75rem;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.lp-hero-actions-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}