/* =====================================================
   LINE BREAK REMOVER
   PART 1
   HERO + TOOL + INPUT/OUTPUT
===================================================== */

.fote-linebreak-page{

    --primary:#5b6ff5;
    --secondary:#7c3aed;
    --dark:#111827;
    --text:#4b5563;
    --muted:#6b7280;
    --border:#e5e7eb;
    --soft:#f6f8fc;
    --white:#ffffff;
    --success:#22c55e;
    --shadow:0 18px 45px rgba(15,23,42,.08);

    background:var(--soft);

    color:var(--text);

    font-family:Inter,Arial,sans-serif;

}

.fote-linebreak-page *,
.fote-linebreak-page *:before,
.fote-linebreak-page *:after{

    box-sizing:border-box;

}

.fote-linebreak-container{

    max-width:1200px;

    margin:auto;

    padding:0 20px;

}

/* HERO */

.fote-linebreak-hero{

    padding:90px 20px;

    text-align:center;

    color:#fff;

    background:
    radial-gradient(circle at top left,
    rgba(255,255,255,.15),
    transparent 30%),

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

}

.fote-linebreak-badge{

    display:inline-block;

    padding:8px 16px;

    margin-bottom:20px;

    border-radius:999px;

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.25);

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

}

.fote-linebreak-hero h1{

    margin:0 0 18px;

    font-size:54px;

    line-height:1.15;

    font-weight:800;

}

.fote-linebreak-hero p{

    max-width:760px;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    color:#eef2ff;

}

.fote-linebreak-hero-btn{

    display:inline-block;

    margin-top:30px;

    padding:15px 30px;

    color:#5b6ff5;

    background:#fff;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.fote-linebreak-hero-btn:hover{

    transform:translateY(-3px);

}

/* TOOL */

.fote-linebreak-tool-section{

    padding:60px 0;

}

.fote-linebreak-tool-box{

    padding:35px;

    background:#fff;

    border-radius:18px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}

.fote-linebreak-tool-header{

    display:flex;

    justify-content:space-between;

    gap:25px;

    margin-bottom:30px;

}

.fote-linebreak-section-label{

    display:inline-block;

    padding:8px 14px;

    margin-bottom:12px;

    background:#f1edff;

    color:#7c3aed;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

}

.fote-linebreak-tool-header h2{

    margin:0 0 14px;

    color:var(--dark);

    font-size:34px;

    font-weight:800;

}

.fote-linebreak-tool-header p{

    max-width:700px;

    line-height:1.8;

}

.fote-linebreak-status{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    background:#ecfdf3;

    border:1px solid #bbf7d0;

    border-radius:999px;

    color:#166534;

    font-size:13px;

    font-weight:700;

    height:fit-content;

}

.fote-linebreak-status span{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--success);

}

/* OPTIONS */

.fote-linebreak-options{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:35px;

}

.fote-linebreak-option-group{

    display:flex;

    flex-direction:column;

}

.fote-linebreak-option-group label{

    margin-bottom:8px;

    font-weight:700;

    color:var(--dark);

}

.fote-linebreak-option-group select,
.fote-linebreak-option-group input{

    width:100%;

    padding:14px 16px;

    border:1px solid var(--border);

    border-radius:10px;

    outline:none;

    font-size:15px;

}

.fote-linebreak-option-group select:focus,
.fote-linebreak-option-group input:focus{

    border-color:var(--primary);

}

.fote-linebreak-check{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:14px;

    font-weight:600;

}

.fote-linebreak-check input{

    width:18px;

    height:18px;

}

/* TEXT GRID */

.fote-linebreak-text-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}

.fote-linebreak-field{

    display:flex;

    flex-direction:column;

}

.fote-linebreak-field-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:12px;

}

.fote-linebreak-field-header label{

    display:block;

    margin-bottom:4px;

    font-size:20px;

    font-weight:800;

    color:var(--dark);

}

.fote-linebreak-field-header span{

    font-size:13px;

    color:var(--muted);

}

.fote-linebreak-stats{

    display:flex;

    flex-direction:column;

    gap:6px;

    text-align:right;

    font-size:12px;

    font-weight:700;

    color:#64748b;

}

.fote-linebreak-field textarea{

    width:100%;

    height:320px;

    padding:18px;

    resize:vertical;

    outline:none;

    border:1px solid var(--border);

    border-radius:14px;

    font-size:16px;

    line-height:1.7;

    background:#fff;

}

.fote-linebreak-field textarea:focus{

    border-color:var(--primary);

}

/* ACTIONS */

.fote-linebreak-actions{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:14px;

    margin-top:30px;

}

.fote-linebreak-actions button{

    padding:14px 22px;

    border:0;

    border-radius:10px;

    cursor:pointer;

    font-weight:700;

    transition:.25s;

}

.fote-linebreak-process-btn{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

}

.fote-linebreak-copy-btn{

    background:#2563eb;

    color:#fff;

}

.fote-linebreak-download-btn{

    background:#10b981;

    color:#fff;

}

.fote-linebreak-sample-btn{

    background:#f59e0b;

    color:#fff;

}

.fote-linebreak-clear-btn{

    background:#e5e7eb;

    color:#111827;

}

.fote-linebreak-actions button:hover{

    transform:translateY(-2px);

}

.fote-linebreak-message{

    color:#16a34a;

    font-size:13px;

    font-weight:700;

}
/* =====================================================
   LINE BREAK REMOVER
   PART 2
   BENEFITS + HOW IT WORKS + CONTENT
===================================================== */

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

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

.fote-linebreak-heading{
  max-width:820px;
  margin:0 auto 38px;
  text-align:center;
}

.fote-linebreak-heading h2{
  margin:0 0 16px;
  color:var(--dark);
  font-size:36px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.5px;
}

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

/* ===========================
   BENEFIT CARDS
=========================== */

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

.fote-linebreak-benefit-card{
  padding:32px 26px;
  text-align:center;
  background:#ffffff;
  border:1px solid var(--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-linebreak-benefit-card:hover{
  transform:translateY(-6px);
  border-color:#d8d4ff;
  box-shadow:0 18px 42px rgba(15,23,42,.12);
}

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

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

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

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

.fote-linebreak-how{
  max-width:1200px;
  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(--primary),
      var(--secondary)
    );
}

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

.fote-linebreak-heading-light p{
  color:#eef2ff !important;
}

.fote-linebreak-label-light{
  color:#ffffff;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.25);
}

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

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

.fote-linebreak-step-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(15,23,42,.18);
}

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

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

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

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

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

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

.fote-linebreak-content-card h2{
  margin:38px 0 16px;
  color:var(--dark);
  font-size:30px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.4px;
}

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

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

/* ===========================
   USE CASE GRID
=========================== */

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

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

.fote-linebreak-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(--primary),
    var(--secondary)
  );
  border-radius:50%;
  font-size:12px;
  font-weight:800;
}

/* ===========================
   EXAMPLE BOX
=========================== */

.fote-linebreak-example-box{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  margin:28px 0;
  padding:24px;
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:14px;
}

.fote-linebreak-example-box strong{
  display:block;
  margin-bottom:10px;
  color:var(--dark);
  font-size:15px;
}

.fote-linebreak-example-box pre{
  min-height:110px;
  margin:0;
  padding:16px;
  overflow:auto;
  color:#111827;
  background:#ffffff;
  border:1px solid #dbe1ea;
  border-radius:10px;
  font-family:Consolas,Monaco,monospace;
  font-size:14px;
  line-height:1.65;
  white-space:pre-wrap;
}

.fote-linebreak-example-arrow{
  color:var(--secondary);
  font-size:34px;
  font-weight:900;
}

/* ===========================
   NOTE BOX
=========================== */

.fote-linebreak-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-linebreak-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-linebreak-note p{
  margin:0;
  color:#78350f;
  font-size:14px;
  line-height:1.75;
}

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

@media(max-width:980px){

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

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

  .fote-linebreak-example-box{
    grid-template-columns:1fr;
  }

  .fote-linebreak-example-arrow{
    transform:rotate(90deg);
    text-align:center;
  }
}

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

@media(max-width:700px){

  .fote-linebreak-section,
  .fote-linebreak-content-section{
    padding:56px 0;
  }

  .fote-linebreak-how{
    padding:58px 15px;
  }

  .fote-linebreak-heading h2{
    font-size:28px;
  }

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

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

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

  .fote-linebreak-note{
    flex-direction:column;
  }
}
/* =====================================================
   LINE BREAK REMOVER
   PART 3
   RELATED TOOLS + FAQ + CTA
===================================================== */

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

.fote-linebreak-tools-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:20px;

}

.fote-linebreak-tool-card{

    display:block;

    padding:28px 22px;

    text-align:center;

    text-decoration:none !important;

    color:#111827;

    background:#ffffff;

    border:1px solid var(--border);

    border-top:5px solid var(--primary);

    border-radius:15px;

    box-shadow:0 10px 25px rgba(15,23,42,.07);

    transition:.25s;

}

.fote-linebreak-tool-card:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 38px rgba(15,23,42,.12);

}

.fote-linebreak-tool-card span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:56px;

    height:56px;

    margin:0 auto 18px;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    border-radius:15px;

    font-size:24px;

    font-weight:800;

}

.fote-linebreak-tool-card strong{

    display:block;

    margin-bottom:10px;

    color:#111827;

    font-size:18px;

    font-weight:800;

}

.fote-linebreak-tool-card p{

    margin:0;

    color:#6b7280;

    line-height:1.7;

    font-size:14px;

}

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

.fote-linebreak-faq-section{

    padding:72px 0;

    background:#ffffff;

}

.fote-linebreak-faq{

    max-width:900px;

    margin:auto;

}

.fote-linebreak-faq-item{

    margin-bottom:15px;

    border:1px solid var(--border);

    border-radius:14px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 8px 22px rgba(15,23,42,.05);

}

.fote-linebreak-faq-item button{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 24px;

    border:0;

    background:#fff;

    cursor:pointer;

    color:#111827;

    text-align:left;

    font-size:17px;

    font-weight:700;

}

.fote-linebreak-faq-item button span{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    border-radius:50%;

    font-size:22px;

    transition:.25s;

}

.fote-linebreak-faq-answer{

    display:none;

    padding:0 24px 22px;

}

.fote-linebreak-faq-answer p{

    margin:0;

    color:#6b7280;

    line-height:1.8;

}

.fote-linebreak-faq-item.active .fote-linebreak-faq-answer{

    display:block;

}

.fote-linebreak-faq-item.active button span{

    transform:rotate(45deg);

}

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

.fote-linebreak-cta{

    max-width:1200px;

    margin:0 auto 50px;

    padding:80px 20px;

    text-align:center;

    color:#fff;

    background:
    radial-gradient(circle at top left,
    rgba(255,255,255,.16),
    transparent 28%),

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

}

.fote-linebreak-cta h2{

    margin:0 0 18px;

    color:#fff;

    font-size:42px;

    font-weight:800;

}

.fote-linebreak-cta p{

    max-width:720px;

    margin:0 auto 28px;

    color:#eef2ff;

    font-size:17px;

    line-height:1.8;

}

.fote-linebreak-cta a{

    display:inline-block;

    padding:15px 30px;

    color:var(--primary);

    background:#fff;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.fote-linebreak-cta a:hover{

    transform:translateY(-3px);

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:980px){

    .fote-linebreak-tools-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:700px){

    .fote-linebreak-tools-grid{

        grid-template-columns:1fr;

    }

    .fote-linebreak-faq-item button{

        font-size:15px;

        padding:18px;

    }

    .fote-linebreak-faq-answer{

        padding:0 18px 18px;

    }

    .fote-linebreak-cta{

        padding:60px 18px;

    }

    .fote-linebreak-cta h2{

        font-size:30px;

    }

}

@media(max-width:420px){

    .fote-linebreak-cta h2{

        font-size:26px;

    }

}