.elementor-966 .elementor-element.elementor-element-35e478a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-966 .elementor-element.elementor-element-c9a049d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-966 .elementor-element.elementor-element-4883692{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-966 .elementor-element.elementor-element-fa21458{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-966 .elementor-element.elementor-element-0660122{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-966 .elementor-element.elementor-element-8cac5de{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-966 .elementor-element.elementor-element-ec4dfb4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-966 .elementor-element.elementor-element-91099bc{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-966 .elementor-element.elementor-element-91099bc:not(.elementor-motion-effects-element-type-background), .elementor-966 .elementor-element.elementor-element-91099bc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F6F7F2;}.elementor-966 .elementor-element.elementor-element-297a3d4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-966 .elementor-element.elementor-element-a25db05{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS *//* -------------------------------------------------
       FRAMED MINDS – GLOBAL STYLES
       ------------------------------------------------- */

    :root {
      /* Brand colors */
      --fm-text-main: #151515;
      --fm-text-body: #4a5560;
      --fm-text-meta: #a0a7b0;

      --fm-white: #ffffff;
      --fm-bg-warm: #f4f1e8;
      --fm-bg-grad-top: #e9e2d0;
      --fm-bg-grad-bottom: #f2f7e9;

      --fm-cta: #bccf97;         /* primary button */
      --fm-cta-hover: #9faf80;
      --fm-accent: #96ca42;      /* accent/active */
      --fm-border-soft: #e7eaed;
      --fm-navy: #0e1a27;

      --fm-info: #2f80ed;
      --fm-warning: #f2994a;
      --fm-error: #eb5757;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", sans-serif;
      color: var(--fm-text-body);
      background: var(--fm-white);
      line-height: 1.5;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .page-wrapper {
      width: 100%;
      overflow-x: hidden;
    }

    .section {
      padding: 80px 16px;
    }

    .section-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    h1, h2, h3, h4 {
      color: var(--fm-text-main);
    }

    h1 {
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: 1.1;
      margin-bottom: 16px;
    }

    h2 {
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      margin-bottom: 12px;
    }

    h3 {
      font-size: 1.4rem;
      margin-bottom: 8px;
    }

    p {
      font-size: 1rem;
      margin-bottom: 12px;
    }

    .eyebrow {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 999px;
      background: var(--fm-bg-warm);
      color: var(--fm-text-main);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .lead {
      font-size: 1.05rem;
      color: var(--fm-text-body);
      margin-bottom: 16px;
    }

    .small {
      font-size: 0.8rem;
    }

    /* Layout helpers */

    .two-col {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 40px;
      align-items: center;
    }

    .two-col-reverse {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 40px;
      align-items: center;
    }

    .two-col-reverse > :first-child {
      order: 2;
    }

    .two-col-reverse > :last-child {
      order: 1;
    }

    .centered {
      text-align: center;
    }

    .pill {
      border-radius: 999px;
    }

    /* Buttons */

    .btn-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      margin-top: 16px;
      margin-bottom: 8px;
    }

    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 28px;
      border-radius: 999px;
      border: 1px solid var(--fm-cta);
      background: var(--fm-cta);
      color: var(--fm-text-main);
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
    }

    .btn-primary:hover {
      background: var(--fm-cta-hover);
      border-color: var(--fm-cta-hover);
      color: var(--fm-white);
    }

    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 24px;
      border-radius: 999px;
      border: 1px solid var(--fm-cta);
      background: transparent;
      color: var(--fm-text-main);
      font-weight: 500;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
    }

    .btn-secondary:hover {
      background: var(--fm-bg-warm);
      border-color: var(--fm-cta-hover);
      color: var(--fm-text-main);
    }

    /* List with accent bullets */

    .fm-bullet-list {
      list-style: none;
      margin: 0 0 16px 0;
      padding: 0;
    }

    .fm-bullet-list li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 8px;
      color: var(--fm-text-main);
    }

    .fm-bullet-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--fm-accent);
      margin-top: 7px;
      flex-shrink: 0;
    }

    /* -------------------------------------------------
       HERO / TOP BANNER
       ------------------------------------------------- */

    .hero {
      background: linear-gradient(
        180deg,
        var(--fm-bg-grad-top) 0%,
        var(--fm-bg-grad-bottom) 60%,
        var(--fm-white) 100%
      );
      padding-top: 96px;
      padding-bottom: 80px;
      position: relative;
      overflow: hidden;
    }

    /* subtle “frames” motif */
    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(231, 234, 237, 0.7);
      border-radius: 12px;
      transform: rotate(-3deg);
    }

    .hero::before {
      width: 260px;
      height: 260px;
      right: -80px;
      top: 40px;
    }

    .hero::after {
      width: 170px;
      height: 170px;
      right: 40px;
      bottom: -40px;
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    .hero-copy p.lead {
      max-width: 520px;
    }

    .hero-meta {
      margin-top: 8px;
      font-size: 0.8rem;
      color: var(--fm-text-meta);
    }

    /* hero visual / devices */

    .hero-visual {
      position: relative;
      display: flex;
      justify-content: center;
    }

    .hero-device-glow {
      position: absolute;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(188, 207, 151, 0.4) 0%,
        rgba(188, 207, 151, 0) 60%
      );
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }

    .hero-devices {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      gap: 16px;
    }

    .device-laptop,
    .device-phone {
      border-radius: 20px;
      background: var(--fm-white);
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
      overflow: hidden;
    }

    .device-laptop {
      width: 320px;
      height: 210px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .device-phone {
      width: 130px;
      height: 240px;
      padding: 10px;
      border-radius: 26px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .device-header {
      height: 14px;
      border-radius: 999px;
      background: #f1f5f9;
      margin-bottom: 12px;
    }

    .device-row {
      height: 30px;
      border-radius: 8px;
      background: #f4f4f4;
      margin-bottom: 8px;
    }

    .device-pill {
      width: 75%;
      height: 30px;
      border-radius: 999px;
      margin-top: auto;
      background: var(--fm-cta);
    }

    .device-pill-text {
      height: 30px;
      border-radius: 999px;
      margin-top: auto;
      background: var(--fm-cta);
    }

    .device-input {
      height: 24px;
      border-radius: 10px;
      background: #f4f1e8;
      margin-bottom: 8px;
    }

    .device-small-text {
      height: 12px;
      border-radius: 4px;
      background: #e7eaed;
      width: 80%;
    }

    /* -------------------------------------------------
       SECTION 2 – WHAT IS FRAMED MINDS
       ------------------------------------------------- */

    .section-what .two-col {
  align-items: flex-start;
}

    .section-what {
  background: #FFFFFF;
  border-top: 1px solid #F4F1E8; /* soft separator from hero */
}

    .section-what .copy-block {
      max-width: 540px;
    }

    .section-what ul {
      margin-top: 12px;
      margin-bottom: 12px;
    }
    
    .section-what .image-block {
  display: flex;
  justify-content: flex-end;
}

.fm-photo-card {
  max-width: 420px;
  width: 100%;
  border-radius: 24px;
  padding: 16px;
  background: linear-gradient(180deg, #F4F1E8 0%, #FFFFFF 100%);
  border: 1px solid var(--fm-border-soft);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

    .fm-photo-card img {
  border-radius: 18px;
  width: 100%;
  height: auto;
  display: block;
}

    .section-what {
  background: #FFFFFF;
  border-top: 1px solid #F4F1E8;
  padding-top: 60px;   /* instead of 80px */
}

    .fm-photo-card {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.05);
}

    .fm-photo-card {
  position: relative;
}

    .fm-photo-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 18px;
  border: 1px solid rgba(231, 234, 237, 0.6);
  pointer-events: none;
}

    /* -------------------------------------------------
       SECTION 3 – WHAT YOU’LL FIND INSIDE
       ------------------------------------------------- */

    .inside {
      background: linear-gradient(180deg, var(--fm-navy) 0%, #1b2a20 70%, #0e1a27 100%);
      color: var(--fm-white);
    }

    .inside h2,
    .inside p {
      color: var(--fm-white);
    }

    .inside-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 32px;
    }

    .inside-card {
      background: var(--fm-white);
      border-radius: 14px;
      padding: 18px 18px 16px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 160px;
    }

    .inside-card-title {
      font-weight: 600;
      color: var(--fm-text-main);
    }

    .inside-card p {
      color: var(--fm-text-body);
      font-size: 0.9rem;
    }

    .inside-icon {
      width: 28px;
      height: 28px;
      border-radius: 10px;
      background: rgba(150, 202, 66, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--fm-accent);
      font-size: 0.9rem;
    }

    .inside-cta {
      margin-top: 28px;
      text-align: center;
    }

    /* -------------------------------------------------
       SECTION 4 – MEET ECHO
       ------------------------------------------------- */

    .echo-section {
      background: var(--fm-bg-warm);
    }

    .echo-chat {
      background: var(--fm-white);
      border-radius: 16px;
      padding: 18px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
      max-width: 360px;
      margin: 0 auto;
    }

    .echo-bubble-user,
    .echo-bubble-echo {
      border-radius: 14px;
      padding: 10px 12px;
      margin-bottom: 10px;
      font-size: 0.9rem;
    }

    .echo-bubble-user {
      background: #eef2ff;
      color: var(--fm-text-main);
      align-self: flex-end;
    }

    .echo-bubble-echo {
      background: #ecfdf3;
      color: var(--fm-text-main);
    }

    .echo-label {
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--fm-text-meta);
      margin-bottom: 4px;
    }
    
    /* Echo preview card for "Meet Echo" section */

.echo-preview-card {
  max-width: 420px;
  width: 100%;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--fm-border-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header */

.echo-header {
  background: var(--fm-cta); /* #BCCF97 */
  padding: 14px 18px 10px;
  text-align: center;
  color: #ffffff;
}

.echo-title {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
}

.echo-subtitle {
  display: block;
  font-size: 0.75rem;
  opacity: 0.9;
}

/* Safety banner */

.echo-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 14px;
  background: var(--fm-bg-warm);
  border-bottom: 1px solid #e2e2dd;
}

.echo-banner p {
  font-size: 0.75rem;      /* smaller font */
  line-height: 1.3;        /* tighter spacing */
  margin: 0;               /* removes the large bottom gap */
  padding: 0;              /* ensures no extra white space */
}

.echo-banner-icon {
  width: 18px;
  height: 18px;
  font-size: 0.75rem;
  margin-top: 2px;         /* aligns icon with first line of text */
}

/* Chat window */

.echo-chat-window {
  padding: 14px 16px 10px;
  background: #ffffff;
  max-height: 260px;
  overflow-y: auto;
}

.echo-message {
  margin-bottom: 10px;
}

.echo-message-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
  color: var(--fm-text-meta);
}

.echo-message-bubble {
  border-radius: 18px;
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* User vs Echo bubbles */

.echo-message-user .echo-message-bubble {
  background: #f8fafc;
  border: 1px solid #e5eaf0;
  color: var(--fm-text-main);
}

.echo-message-echo .echo-message-bubble {
  background: #f2f7e9; /* soft green-tinted neutral */
  border: 1px solid rgba(150, 202, 66, 0.35);
  color: var(--fm-text-main);
}

/* Input row (visual only) */

.echo-input-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 12px 8px;
  border-top: 1px solid #f1f1f1;
  background: #ffffff;
}

.echo-input-faux {
  flex: 1;
  border-radius: 999px;
  background: #f4f4f4;
  padding: 8px 14px;
  font-size: 0.85rem;
  color: #b0b5bd;
}

.echo-input-send {
  width: 34px;
  height: 34px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--fm-cta);
  color: var(--fm-text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* CTA button */

.echo-cta-row {
  padding: 6px 16px 16px;
  background: #ffffff;
}

.echo-btn-primary {
  display: block;
  width: 100%;
  text-align: center;
  padding: 11px 0;
  border-radius: 999px;
  background: var(--fm-cta);
  border: 1px solid var(--fm-cta);
  color: var(--fm-text-main);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}

.echo-btn-primary:hover {
  background: var(--fm-cta-hover);
  border-color: var(--fm-cta-hover);
  color: #ffffff;
}

    /* -------------------------------------------------
       SECTION 5 – FRAMES JOURNEY
       ------------------------------------------------- */

    .frames-section {
      background: var(--fm-white);
    }

    .frames-timeline {
      margin-top: 24px;
      border-top: 1px solid var(--fm-border-soft);
      padding-top: 24px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .frame-step {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .frame-dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid var(--fm-accent);
      margin-top: 3px;
      flex-shrink: 0;
    }

    .frame-step-title {
      font-weight: 600;
      font-size: 0.95rem;
      margin-bottom: 4px;
    }

    .frame-step p {
      font-size: 0.85rem;
      margin: 0;
    }

    /* -------------------------------------------------
       SECTION 6 – WHO IT’S FOR
       ------------------------------------------------- */

    .who-section {
      background: #f7f8f5;
    }

    .who-grid {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .who-card {
      background: var(--fm-white);
      border-radius: 14px;
      border: 1px solid var(--fm-border-soft);
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .who-tag {
      display: inline-block;
      background: var(--fm-bg-warm);
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 0.7rem;
      color: var(--fm-text-body);
    }

    .who-title {
      font-weight: 600;
      color: var(--fm-text-main);
    }

    .who-card p {
      font-size: 0.9rem;
    }

    /* -------------------------------------------------
       SECTION 7 – SOCIAL PROOF
       ------------------------------------------------- */

    .social-section {
      background: var(--fm-white);
    }

    .quote-grid {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .quote-card {
      background: #f8fafc;
      border-radius: 12px;
      padding: 16px 18px;
      border: 1px solid var(--fm-border-soft);
      font-size: 0.9rem;
    }

    .quote-text {
      margin-bottom: 10px;
    }

    .quote-name {
      font-size: 0.8rem;
      color: var(--fm-text-meta);
    }

    /* -------------------------------------------------
       SECTION 8 – PRICING
       (Your existing section – placeholder here)
       ------------------------------------------------- */

    .pricing-section {
      background: var(--fm-white);
    }

    /* -------------------------------------------------
       SECTION 9 – FINAL CTA
       ------------------------------------------------- */

    .final-cta {
      background: linear-gradient(180deg, var(--fm-navy) 0%, #1b2a20 60%, var(--fm-navy) 100%);
      color: var(--fm-white);
      text-align: center;
    }

    .final-cta h2,
    .final-cta p {
      color: var(--fm-white);
    }

    .final-cta .btn-secondary {
      border-color: var(--fm-white);
      color: var(--fm-white);
    }

    .final-cta .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--fm-white);
    }

    /* -------------------------------------------------
       RESPONSIVE
       ------------------------------------------------- */

    @media (max-width: 900px) {
      .two-col,
      .two-col-reverse,
      .inside-grid,
      .frames-timeline,
      .who-grid,
      .quote-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      .hero {
        padding-top: 80px;
        padding-bottom: 60px;
      }

      .hero-devices {
        transform: scale(0.9);
      }

      .section {
        padding: 60px 16px;
      }
    }

    @media (max-width: 640px) {
      .hero::before,
      .hero::after {
        display: none;
      }

      .hero-devices {
        transform: scale(0.85);
      }

      .btn-row {
        flex-direction: column;
        align-items: flex-start;
      }

      .inside-grid,
      .frames-timeline,
      .who-grid,
      .quote-grid {
        gap: 14px;
      }

      .section {
        padding: 48px 16px;
      }
    }
  </style>
</head>
<body>
  <div class="page-wrapper">/* End custom CSS */