.section-title{
  font-family:'Fraunces', serif; font-size:clamp(24px,3.4vw,32px); font-weight:600;
  text-align:center; margin-bottom:10px;
}
.section-sub{
  text-align:center; color:var(--muted); font-size:15px; max-width:640px; margin:0 auto 36px;
}

/* ============================================================================
   HERO
   ============================================================================ */
.tool-page > .container{max-width:900px; margin:0 auto; padding-top:8px; text-align:center;}

.tool-hero-badge{
  display:inline-flex; align-items:center; gap:8px; background:#FFF3E8; color:var(--primary-dark);
  font-size:13px; font-weight:600; padding:7px 14px; border-radius:20px; margin-bottom:20px;
}

.tool-page h1{
  font-family:'Fraunces', serif; font-size:clamp(28px,4.6vw,44px); font-weight:600; line-height:1.15;
  margin-bottom:16px;
}
.tool-page h1 span{color:var(--primary);}

.tool-page > .container > p{
  font-size:16px; color:var(--muted); max-width:620px; margin:0 auto 28px; line-height:1.6;
}

.tool-hero-stats{display:flex; justify-content:center; gap:40px; flex-wrap:wrap; margin-bottom:8px;}
.tool-hero-stat{text-align:center;}
.tool-hero-stat strong{display:block; font-size:22px; font-weight:800; color:var(--ink);}
.tool-hero-stat span{font-size:13px; color:var(--muted);}

@media(max-width:600px){
  .tool-hero-stats{gap:24px;}
}

/* ============================================================================
   TOOL SECTION — stats bar + form/output split
   ============================================================================ */
.tool-section{padding:32px 0 60px;}

.tool-stats-bar{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px;
  max-width:1000px; margin:0 auto 32px;
}
@media(max-width:700px){ .tool-stats-bar{grid-template-columns:repeat(2, minmax(0,1fr));} }
.tstat{
  text-align:center; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 12px;
}
.tstat strong{display:block; font-size:19px; font-weight:800; color:var(--primary);}
.tstat span{font-size:12px; color:var(--muted);}

.tool-wrapper{
  display:flex; flex-direction:column; gap:24px;
  max-width:800px; margin:0 auto;
}

/* ---------- Tool card shell (shared by form + output panel) ---------- */
.tool-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.tool-card-header{
  display:flex; align-items:center; gap:12px; padding:20px 22px; border-bottom:1px solid var(--border);
}
.card-icon{
  width:38px; height:38px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),#FFB84D); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.tool-card-header h2{font-size:17px; font-weight:700; color:var(--ink);}
.tool-card-body{padding:22px;}

/* ============================================================================
   FORM
   ============================================================================ */
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px;}
.form-row.single{grid-template-columns:1fr;}
@media(max-width:560px){ .form-row{grid-template-columns:1fr;} }

.form-group{text-align:left;}
.form-group label{
  display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:8px;
}
.form-group input[type="text"],
.form-group select,
.form-group textarea{
  width:100%; border:1.5px solid var(--border); border-radius:10px; padding:11px 13px;
  font-size:14.5px; font-family:inherit; background:var(--bg); color:var(--ink); outline:none;
  transition:border-color .15s ease;
}
.form-group textarea{min-height:90px; resize:vertical; line-height:1.5;}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{border-color:var(--primary);}

.tone-label{
  display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:10px;
}
.tone-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-bottom:20px;}
@media(max-width:480px){ .tone-grid{grid-template-columns:minmax(0,1fr);} }

.tone-chip{
  border:1.5px solid var(--border); background:#fff; border-radius:10px; padding:11px 14px;
  font-size:13.5px; font-weight:600; color:var(--ink); text-align:left; cursor:pointer;
  transition:all .15s ease;
}
.tone-chip:hover{border-color:var(--primary); color:var(--primary);}
.tone-chip.active{background:var(--ink); border-color:var(--ink); color:#fff;}

.btn-generate{
  width:100%; background:var(--primary); color:#fff; border:none; border-radius:10px;
  padding:15px 20px; font-size:15.5px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:background .15s ease;
}
.btn-generate:hover{background:var(--primary-dark);}

/* ============================================================================
   OUTPUT PANEL
   ============================================================================ */
.output-panel{min-height:400px; display:flex; flex-direction:column;}

.output-placeholder{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:60px 30px; color:var(--muted);
}
.output-placeholder i{font-size:36px; margin-bottom:16px; color:var(--border);}
.output-placeholder p{font-size:14.5px; max-width:280px; line-height:1.6;}

.loading-state{
  display:none; flex-direction:column; align-items:center; justify-content:center;
  flex:1; padding:60px 30px; text-align:center;
}
.loading-dots{display:flex; gap:8px; margin-bottom:18px;}
.loading-dots span{
  width:10px; height:10px; border-radius:50%; background:var(--primary);
  animation:loadingBounce 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2){animation-delay:.15s;}
.loading-dots span:nth-child(3){animation-delay:.3s;}
@keyframes loadingBounce{
  0%, 80%, 100%{ transform:scale(0.6); opacity:.4; }
  40%{ transform:scale(1); opacity:1; }
}
#loadingMsg{font-size:14px; color:var(--muted);}

.story-output{display:none;}
.story-output.visible{display:block; animation:fadeIn .3s ease;}
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.story-title-bar{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px;
}
.story-generated-title{
  font-family:'Fraunces', serif; font-size:19px; font-weight:600; color:var(--ink); line-height:1.3;
}
.btn-copy{
  flex-shrink:0; background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:all .15s ease;
}
.btn-copy:hover{border-color:var(--primary); color:var(--primary);}
.btn-copy.copied{background:var(--success-bg); border-color:var(--success-border); color:var(--success-text);}

.story-meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.story-meta-tag{
  display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border);
  border-radius:20px; padding:5px 12px; font-size:12px; font-weight:600; color:var(--muted);
}
.story-meta-tag.tone-tag{background:#FFF3E8; border-color:#FBD9B6; color:var(--primary-dark);}
.story-meta-tag.words-tag{background:#EFF6FF; border-color:#BFDBFE; color:#1D4ED8;}

.story-body{
  font-size:15px; color:#2A2E33; line-height:1.8; white-space:pre-wrap;
  padding-bottom:22px; border-bottom:1px solid var(--border); margin-bottom:0;
}

.output-actions{
  display:flex; gap:10px; padding:18px 22px; background:var(--bg); flex-wrap:wrap;
}
.btn-action{
  flex:1; min-width:140px; background:#fff; border:1.5px solid var(--border); border-radius:10px;
  padding:11px 14px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:all .15s ease;
}
.btn-action:hover{border-color:var(--primary); color:var(--primary);}

@media(max-width:900px){
  .output-panel{min-height:auto;}
}

/* ============================================================================
   HOW IT WORKS
   ============================================================================ */
.hiw-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; max-width:1100px; margin:0 auto;}
@media(max-width:900px){ .hiw-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media(max-width:520px){ .hiw-grid{grid-template-columns:minmax(0,1fr);} }

.hiw-card{
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:24px; text-align:left;
}
.hiw-num{
  width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; margin-bottom:14px;
}
.hiw-card h3{font-size:16px; font-weight:700; margin-bottom:8px; color:var(--ink);}
.hiw-card p{font-size:14px; color:var(--muted); line-height:1.6;}

/* ============================================================================
   USE CASES
   ============================================================================ */
.usecase-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; max-width:1100px; margin:0 auto;}
@media(max-width:900px){ .usecase-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media(max-width:600px){ .usecase-grid{grid-template-columns:minmax(0,1fr);} }

.usecase-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px; text-align:left;
}
.usecase-card i{font-size:24px; color:var(--primary); margin-bottom:14px; display:block;}
.usecase-card h3{font-size:16px; font-weight:700; margin-bottom:8px; color:var(--ink);}
.usecase-card p{font-size:13.5px; color:var(--muted); line-height:1.6;}

/* ============================================================================
   FAQ (this page's own toggle behavior — JS applies .open directly to
   .faq-question and .faq-answer, NOT to a wrapping .faq-item like the
   accordion pattern used elsewhere on the site. Needs its own rules.)
   ============================================================================ */
.faq-list{max-width:800px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);}
.faq-question{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:18px 4px; cursor:pointer;
}
.faq-question h4{font-size:15px; font-weight:600; color:var(--ink);}
.faq-question i{color:var(--muted); transition:transform .2s ease; flex-shrink:0;}
.faq-question.open i{transform:rotate(180deg);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-answer.open{max-height:320px;}
.faq-answer p{padding:0 4px 18px; font-size:14px; color:var(--muted); line-height:1.65;}

/* ============================================================================
   RELATED TOOLS (this page's own naming — .related-icon/.related-info,
   distinct from .related-tools/.tile-icon used on the other 6 tool pages)
   ============================================================================ */
.related-section{padding:50px 0;}
.related-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; max-width:1100px; margin:0 auto;}
@media(max-width:900px){ .related-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media(max-width:560px){ .related-grid{grid-template-columns:minmax(0,1fr);} }

.related-card{
  display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px; transition:transform .15s ease, box-shadow .15s ease;
}
.related-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.related-icon{
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),#FFB84D); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.related-info h4{font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:2px;}
.related-info span{font-size:12.5px; color:var(--muted);}