/* =====================================================
   FREE ONLINE TEXT EDITOR — BOLD TEXT GENERATOR
===================================================== */

.fote-bold-page{
  --fote-bold-primary:#5b6ff5;
  --fote-bold-secondary:#7c3aed;
  --fote-bold-dark:#111827;
  --fote-bold-text:#4b5563;
  --fote-bold-muted:#6b7280;
  --fote-bold-border:#e5e7eb;
  --fote-bold-soft:#f7f8fc;
  --fote-bold-white:#ffffff;
  --fote-bold-success:#16a34a;
  --fote-bold-shadow:0 18px 50px rgba(15,23,42,.09);

  width:100%;
  overflow:hidden;
  color:var(--fote-bold-text);
  background:var(--fote-bold-soft);
  font-family:Inter,Arial,sans-serif;
}

.fote-bold-page *,
.fote-bold-page *::before,
.fote-bold-page *::after{
  box-sizing:border-box;
}

.fote-bold-container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 22px;
}

/* =====================================================
   HERO
===================================================== */

.fote-bold-hero{
  max-width:1180px;
  margin:28px auto 0;
  padding:78px 20px;
  text-align:center;
  color:#ffffff;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,.16),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--fote-bold-primary),
      var(--fote-bold-secondary)
    );
}

.fote-bold-hero .fote-bold-container{
  max-width:850px;
}

.fote-bold-badge,
.fote-bold-section-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 15px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1.3;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.fote-bold-badge{
  margin-bottom:20px;
  color:#ffffff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.24);
}

.fote-bold-hero h1{
  margin:0 0 18px;
  color:#ffffff !important;
  font-size:52px;
  line-height:1.12;
  letter-spacing:-1px;
  font-weight:800;
}

.fote-bold-hero p{
  max-width:760px;
  margin:0 auto;
  color:#f3f4ff !important;
  font-size:18px;
  line-height:1.8;
}

.fote-bold-hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  margin-top:28px;
  padding:13px 26px;
  color:#6d3ddb !important;
  background:#ffffff;
  border-radius:999px;
  box-shadow:0 10px 28px rgba(15,23,42,.15);
  text-decoration:none !important;
  font-size:15px;
  font-weight:800;
  transition:.25s ease;
}

.fote-bold-hero-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(15,23,42,.22);
}

/* =====================================================
   GENERATOR
===================================================== */

.fote-bold-generator-section{
  padding:52px 0 28px;
}

.fote-bold-generator-box{
  padding:36px;
  background:#ffffff;
  border:1px solid var(--fote-bold-border);
  border-radius:18px;
  box-shadow:var(--fote-bold-shadow);
}

.fote-bold-generator-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:25px;
  margin-bottom:28px;
}

.fote-bold-section-label{
  margin-bottom:13px;
  color:var(--fote-bold-secondary);
  background:#f2efff;
}

.fote-bold-generator-header h2,
.fote-bold-heading h2,
.fote-bold-content-card h2,
.fote-bold-cta h2{
  margin:0 0 14px;
  color:var(--fote-bold-dark);
  font-size:34px;
  line-height:1.25;
  letter-spacing:-.5px;
  font-weight:800;
}

.fote-bold-generator-header p{
  max-width:710px;
  margin:0;
  color:var(--fote-bold-muted);
  font-size:15px;
  line-height:1.75;
}

.fote-bold-status{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  color:#166534;
  background:#ecfdf3;
  border:1px solid #bbf7d0;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.fote-bold-status span{
  width:9px;
  height:9px;
  display:block;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 5px rgba(34,197,94,.12);
}

.fote-bold-text-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}

.fote-bold-field{
  min-width:0;
}

.fote-bold-field-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:9px;
}

.fote-bold-field-top label{
  color:var(--fote-bold-dark);
  font-size:15px;
  font-weight:800;
}

.fote-bold-field-top span{
  color:var(--fote-bold-muted);
  font-size:12px;
  font-weight:700;
}

.fote-bold-field textarea{
  width:100%;
  min-height:250px;
  display:block;
  resize:vertical;
  padding:18px;
  color:#111827;
  background:#ffffff;
  border:1px solid #d1d5db;
  border-radius:13px;
  outline:none;
  font-family:Inter,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.fote-bold-field textarea:focus{
  border-color:var(--fote-bold-primary);
  box-shadow:0 0 0 4px rgba(91,111,245,.12);
}

#foteBoldText{
  color:#111827;
  background:#fafaff;
  font-size:18px;
}

.fote-bold-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}

.fote-bold-actions button{
  min-height:47px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:12px 20px;
  border:0;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  transition:.25s ease;
}

.fote-bold-copy-btn{
  color:#ffffff;
  background:linear-gradient(
    135deg,
    var(--fote-bold-primary),
    var(--fote-bold-secondary)
  );
  box-shadow:0 10px 24px rgba(91,111,245,.2);
}

.fote-bold-copy-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 30px rgba(91,111,245,.28);
}

.fote-bold-clear-btn{
  color:#374151;
  background:#f3f4f6;
  border:1px solid #e5e7eb !important;
}

.fote-bold-clear-btn:hover{
  color:#111827;
  background:#e5e7eb;
}

.fote-bold-copy-message{
  min-height:20px;
  color:var(--fote-bold-success);
  font-size:13px;
  font-weight:800;
}

/* =====================================================
   GENERIC SECTION
===================================================== */

.fote-bold-section{
  padding:72px 0;
  background:#ffffff;
}

.fote-bold-heading{
  max-width:800px;
  margin:0 auto 36px;
  text-align:center;
}

.fote-bold-heading p{
  max-width:720px;
  margin:0 auto;
  color:var(--fote-bold-muted);
  font-size:16px;
  line-height:1.8;
}

/* =====================================================
   BENEFITS
===================================================== */

.fote-bold-benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.fote-bold-benefit-card{
  padding:31px 25px;
  text-align:center;
  background:#ffffff;
  border:1px solid var(--fote-bold-border);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(15,23,42,.07);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.fote-bold-benefit-card:hover{
  transform:translateY(-5px);
  border-color:#c9c4ff;
  box-shadow:0 18px 40px rgba(15,23,42,.11);
}

.fote-bold-card-icon{
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  color:#ffffff;
  background:linear-gradient(
    135deg,
    var(--fote-bold-primary),
    var(--fote-bold-secondary)
  );
  border-radius:18px;
  font-size:28px;
}

.fote-bold-benefit-card h3{
  margin:0 0 11px;
  color:var(--fote-bold-dark);
  font-size:20px;
  font-weight:800;
}

.fote-bold-benefit-card p{
  margin:0;
  color:var(--fote-bold-muted);
  font-size:14px;
  line-height:1.75;
}

/* =====================================================
   HOW IT WORKS
===================================================== */

.fote-bold-how{
  max-width:1180px;
  margin:0 auto;
  padding:72px 20px;
  color:#ffffff;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,.16),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--fote-bold-primary),
      var(--fote-bold-secondary)
    );
}

.fote-bold-heading-light h2{
  color:#ffffff !important;
}

.fote-bold-heading-light p{
  color:#f3f4ff !important;
}

.fote-bold-label-light{
  color:#ffffff;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.2);
}

.fote-bold-step-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.fote-bold-step-card{
  position:relative;
  padding:32px 25px;
  overflow:hidden;
  color:#111827;
  background:#ffffff;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(15,23,42,.14);
}

.fote-bold-step-number{
  position:absolute;
  top:18px;
  right:20px;
  color:#e8e7ff;
  font-size:36px;
  line-height:1;
  font-weight:900;
}

.fote-bold-step-card h3{
  position:relative;
  margin:0 0 12px;
  color:#111827;
  font-size:20px;
  font-weight:800;
}

.fote-bold-step-card p{
  position:relative;
  margin:0;
  color:#6b7280;
  font-size:14px;
  line-height:1.75;
}

/* =====================================================
   CONTENT SECTION
===================================================== */

.fote-bold-content-section{
  padding:72px 0;
  background:var(--fote-bold-soft);
}

.fote-bold-content-card{
  padding:48px;
  background:#ffffff;
  border:1px solid var(--fote-bold-border);
  border-radius:18px;
  box-shadow:var(--fote-bold-shadow);
}

.fote-bold-content-card h2{
  margin-top:38px;
  font-size:30px;
}

.fote-bold-content-card h2:first-of-type{
  margin-top:0;
}

.fote-bold-content-card p{
  margin:0 0 16px;
  color:var(--fote-bold-text);
  font-size:16px;
  line-height:1.85;
}

.fote-bold-use-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px 18px;
  margin:25px 0 34px;
}

.fote-bold-use-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 15px;
  color:#374151;
  background:#f9fafb;
  border:1px solid var(--fote-bold-border);
  border-radius:11px;
  font-size:14px;
  font-weight:700;
}

.fote-bold-use-item span{
  flex:0 0 24px;
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  background:linear-gradient(
    135deg,
    var(--fote-bold-primary),
    var(--fote-bold-secondary)
  );
  border-radius:50%;
  font-size:12px;
  font-weight:800;
}

.fote-bold-note{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-top:24px;
  padding:20px;
  background:#fff8e7;
  border:1px solid #f8dda0;
  border-left:5px solid #f59e0b;
  border-radius:12px;
}

.fote-bold-note-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  background:#f59e0b;
  border-radius:50%;
  font-family:Georgia,serif;
  font-size:20px;
  font-weight:800;
}

.fote-bold-note p{
  margin:0;
  color:#78350f;
  font-size:14px;
  line-height:1.75;
}

/* =====================================================
   RELATED TOOLS
===================================================== */

.fote-bold-tools-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

.fote-bold-tool-card{
  display:block;
  padding:27px 22px;
  color:#111827;
  background:#ffffff;
  border:1px solid var(--fote-bold-border);
  border-top:5px solid var(--fote-bold-primary);
  border-radius:14px;
  box-shadow:0 9px 27px rgba(15,23,42,.07);
  text-align:center;
  text-decoration:none !important;
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.fote-bold-tool-card:hover{
  transform:translateY(-5px);
  box-shadow:0 17px 37px rgba(15,23,42,.11);
}

.fote-bold-tool-card > span{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
  color:#ffffff;
  background:linear-gradient(
    135deg,
    var(--fote-bold-primary),
    var(--fote-bold-secondary)
  );
  border-radius:15px;
  font-size:21px;
  font-weight:800;
}

.fote-bold-tool-card strong{
  display:block;
  margin-bottom:9px;
  color:#111827;
  font-size:17px;
  font-weight:800;
}

.fote-bold-tool-card p{
  margin:0;
  color:#6b7280;
  font-size:13px;
  line-height:1.65;
}

/* =====================================================
   FAQ
===================================================== */

.fote-bold-faq-section{
  padding:72px 0;
  background:var(--fote-bold-soft);
}

.fote-bold-faq{
  max-width:820px;
  margin:0 auto;
}

.fote-bold-faq-item{
  margin-bottom:13px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid var(--fote-bold-border);
  border-radius:12px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
}

.fote-bold-faq-item > button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:19px 21px;
  color:#111827;
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
  font-size:15px;
  font-weight:800;
}

.fote-bold-faq-item > button span{
  flex:0 0 28px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  background:linear-gradient(
    135deg,
    var(--fote-bold-primary),
    var(--fote-bold-secondary)
  );
  border-radius:50%;
  font-size:17px;
  transition:transform .25s ease;
}

.fote-bold-faq-answer{
  display:none;
  padding:0 21px 19px;
}

.fote-bold-faq-answer p{
  margin:0;
  color:#6b7280;
  font-size:14px;
  line-height:1.75;
}

.fote-bold-faq-item.active .fote-bold-faq-answer{
  display:block;
}

.fote-bold-faq-item.active > button span{
  transform:rotate(45deg);
}

/* =====================================================
   CTA
===================================================== */

.fote-bold-cta{
  max-width:1180px;
  margin:0 auto 50px;
  padding:72px 20px;
  text-align:center;
  color:#ffffff;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,.16),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--fote-bold-primary),
      var(--fote-bold-secondary)
    );
}

.fote-bold-cta h2{
  color:#ffffff !important;
  font-size:38px;
}

.fote-bold-cta p{
  max-width:680px;
  margin:0 auto 27px;
  color:#f3f4ff;
  font-size:17px;
  line-height:1.75;
}

.fote-bold-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:49px;
  padding:13px 25px;
  color:#6d3ddb !important;
  background:#ffffff;
  border-radius:999px;
  box-shadow:0 10px 28px rgba(15,23,42,.15);
  text-decoration:none !important;
  font-size:14px;
  font-weight:800;
  transition:.25s ease;
}

.fote-bold-cta a:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(15,23,42,.22);
}

/* =====================================================
   TABLET
===================================================== */

@media(max-width:980px){

  .fote-bold-benefit-grid,
  .fote-bold-step-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .fote-bold-tools-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .fote-bold-generator-header{
    flex-direction:column;
  }

  .fote-bold-status{
    align-self:flex-start;
  }
}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

  .fote-bold-container{
    padding:0 15px;
  }

  .fote-bold-hero{
    margin-top:0;
    padding:58px 7px;
  }

  .fote-bold-hero h1{
    font-size:37px;
  }

  .fote-bold-hero p{
    font-size:16px;
  }

  .fote-bold-generator-section{
    padding-top:30px;
  }

  .fote-bold-generator-box{
    padding:25px 20px;
    border-radius:14px;
  }

  .fote-bold-generator-header h2,
  .fote-bold-heading h2,
  .fote-bold-cta h2{
    font-size:27px;
  }

  .fote-bold-text-grid{
    grid-template-columns:1fr;
  }

  .fote-bold-field textarea{
    min-height:210px;
  }

  .fote-bold-section,
  .fote-bold-content-section,
  .fote-bold-faq-section{
    padding:55px 0;
  }

  .fote-bold-how{
    padding:55px 15px;
  }

  .fote-bold-benefit-grid,
  .fote-bold-step-grid,
  .fote-bold-tools-grid,
  .fote-bold-use-grid{
    grid-template-columns:1fr;
  }

  .fote-bold-content-card{
    padding:30px 22px;
    border-radius:14px;
  }

  .fote-bold-content-card h2{
    font-size:25px;
  }

  .fote-bold-note{
    flex-direction:column;
  }

  .fote-bold-cta{
    margin-bottom:35px;
    padding:55px 15px;
  }
}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:420px){

  .fote-bold-hero h1{
    font-size:32px;
  }

  .fote-bold-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .fote-bold-actions button{
    width:100%;
  }

  .fote-bold-copy-message{
    text-align:center;
  }

  .fote-bold-faq-item > button{
    padding:17px 16px;
  }

  .fote-bold-faq-answer{
    padding:0 16px 17px;
  }
}