/* ============================================================
   másfollowers — tool-pages.css
   Editorial Premium for ALL tool sub-pages:
     /herramientas/calculadora-engagement
     /herramientas/calculadora-crecimiento
     /herramientas/calculadora-precio
     /herramientas/generador-paleta-colores
     /herramientas/generador-bio
   Replaces the legacy assets/css/engagement-calculator.css.
   Hero is handled by heroes.css (forest+white .mf-misc-hero).
   Depends on theme_style.css for tokens.

   IMPORTANT: must preserve every JS hook id/class. We only
   restyle — never rename.
   ============================================================ */

.engagement-page,
.engagement-page *{
  box-sizing:border-box;
}

.engagement-page{
  background:var(--mf-surface);
  color:var(--mf-ink);
  font-family:var(--mf-font);
}

.engagement-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
@media (min-width:900px){
  .engagement-container{ padding:0 32px; }
}

/* =========================================================
   1. CALCULATOR SECTION — main work area
   ========================================================= */
.calculator-section{
  padding:48px 0 64px;
}
@media (min-width:900px){
  .calculator-section{ padding:80px 0 112px; }
}

/* Two-column grid (calc + sidebar) */
.calculator-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:start;
}
@media (min-width:1000px){
  .calculator-grid{
    grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
    gap:32px;
  }
}

/* Calculator card (the main panel) */
.calculator-card{
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-xl);
  padding:28px 24px;
  box-shadow:var(--mf-shadow-2);
}
@media (min-width:900px){
  .calculator-card{ padding:40px 36px; }
}

/* Calculator header */
.calculator-header{
  display:flex; align-items:flex-start; gap:14px;
  padding-bottom:24px;
  border-bottom:1px solid var(--mf-line-soft);
  margin-bottom:24px;
}
.calculator-header .header-icon{
  width:44px; height:44px; flex:none;
  border-radius:12px;
  background:var(--mf-accent-soft);
  color:var(--mf-accent);
  display:grid; place-items:center;
}
.calculator-header h2{
  font-size:22px; line-height:1.15;
  letter-spacing:-.02em;
  font-weight:600;
  color:var(--mf-ink);
  margin:0 0 4px;
}
@media (min-width:640px){ .calculator-header h2{ font-size:26px; } }
.calculator-header p{
  font-size:14px;
  color:var(--mf-ink-soft);
  margin:0;
}

/* Standalone card header (growth/price calc — no icon) */
.calculator-card > .calculator-header:not(:has(.header-icon)){
  flex-direction:column; gap:6px;
}

/* =========================================================
   2. PLATFORM SELECTOR (tabs + radio-style buttons)
   ========================================================= */
.platform-selector{
  margin-bottom:22px;
}
.selector-label{
  display:block;
  font-size:11px; font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--mf-ink-muted);
  margin-bottom:10px;
}
.platform-tabs,
.platform-selector{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:8px;
}

/* Generic platform button base — both .platform-tab and .platform-btn */
.platform-tab,
.platform-btn{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:14px 12px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  color:var(--mf-ink-soft);
  font:500 13.5px/1 var(--mf-font);
  letter-spacing:-.005em;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease;
  position:relative;
}
.platform-tab svg,
.platform-btn svg,
.platform-btn .platform-icon{
  width:20px; height:20px;
  flex:none;
  font-size:18px;
  line-height:1;
}
.platform-tab:hover,
.platform-btn:hover{
  border-color:var(--mf-line-strong);
  color:var(--mf-ink);
}
.platform-tab.active,
.platform-btn.active{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
  background:var(--mf-accent-soft);
  box-shadow:inset 0 0 0 1px var(--mf-accent);
}

/* Compact (icon-only) on mobile */
@media (max-width:480px){
  .platform-tab span,
  .platform-btn > span:not(.platform-icon){ font-size:12px; }
}

/* =========================================================
   3. FORM INPUTS — editorial
   ========================================================= */
.calculator-form{
  display:flex; flex-direction:column;
  gap:18px;
}

.form-group{
  display:flex; flex-direction:column; gap:8px;
}

.form-label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mf-ink);
}
.form-label svg{
  width:16px; height:16px;
  color:var(--mf-ink-muted);
  flex:none;
}

.form-input{
  appearance:none;
  width:100%;
  height:48px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  padding:0 16px;
  font:500 16px/1 var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
  color:var(--mf-ink);
  transition:border-color .15s ease, box-shadow .15s ease;
  outline:none;
}
.form-input::placeholder{
  color:var(--mf-ink-muted);
  opacity:.7;
}
.form-input:focus{
  border-color:var(--mf-accent);
  box-shadow:0 0 0 4px var(--mf-accent-glow);
}

select.form-input{
  height:48px;
  padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7F77' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  font-family:var(--mf-font);
  font-size:14.5px;
}

/* Hint text under inputs */
.input-hint,
.form-hint{
  font-size:12.5px;
  color:var(--mf-ink-muted);
  font-family:var(--mf-font);
  font-weight:400;
  letter-spacing:0;
}

/* =========================================================
   4. ACTION BUTTONS (calculate / generate)
   ========================================================= */
.calc-button,
.calculate-btn,
.generate-button{
  appearance:none;
  margin-top:8px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  width:100%;
  height:54px;
  padding:0 24px;
  background:var(--mf-accent);
  border:1px solid var(--mf-accent);
  border-radius:var(--mf-r);
  color:#FFFFFF;
  font:600 15px/1 var(--mf-font);
  letter-spacing:-.01em;
  cursor:pointer;
  box-shadow:0 12px 24px -8px rgba(14,92,58,.30);
  transition:background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.calc-button:hover,
.calculate-btn:hover,
.generate-button:hover{
  background:var(--mf-accent-deep);
  border-color:var(--mf-accent-deep);
  transform:translateY(-1px);
  box-shadow:0 18px 30px -10px rgba(14,92,58,.42);
}
.calc-button:active,
.calculate-btn:active,
.generate-button:active{
  transform:translateY(0);
}
.calc-button svg,
.calculate-btn svg,
.generate-button svg{
  width:18px; height:18px;
}

/* Quick goals row */
.quick-goals{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:-4px;
}
.quick-goals-label{
  width:100%;
  font-size:11.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--mf-ink-muted);
  margin:0 0 2px;
}
.quick-goal-btn{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-pill);
  color:var(--mf-ink);
  font:600 12.5px/1 var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.quick-goal-btn:hover{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
  background:var(--mf-accent-soft);
}

/* =========================================================
   5. RESULTS CARD (engagement) + .calculator-results (growth/price)
   ========================================================= */
.results-card{
  margin-top:32px;
  padding:28px 24px;
  background:#0F1411;       /* ink slab — makes results pop */
  color:#FFFFFF;
  border-radius:var(--mf-r-xl);
  position:relative;
  overflow:hidden;
}
@media (min-width:640px){
  .results-card{ padding:36px 32px; }
}
.results-card.hidden{ display:none; }

.results-card::before{
  content:"";
  position:absolute;
  right:-160px; bottom:-200px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(14,92,58,.40) 0%,
    rgba(14,92,58,.10) 35%,
    transparent 65%);
  filter:blur(20px);
  pointer-events:none;
}
.results-card > *{ position:relative; z-index:1; }

.results-header{
  display:flex; align-items:center; gap:12px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  margin-bottom:22px;
}
.results-header .results-icon{
  width:40px; height:40px;
  border-radius:12px;
  background:rgba(232,199,150,.16);
  color:#E8C796;
  display:grid; place-items:center;
  flex:none;
}
.results-header h3{
  font-size:18px; font-weight:600; letter-spacing:-.01em;
  margin:0; color:#FFFFFF;
}

/* Big result number (engagement) */
.result-main{
  text-align:center;
  margin-bottom:24px;
}
.result-percentage{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font-size:64px; font-weight:600; line-height:1;
  letter-spacing:-.04em;
  color:#E8C796;     /* gold */
  margin-bottom:6px;
}
@media (min-width:640px){
  .result-percentage{ font-size:84px; }
}
.result-label{
  font-size:11.5px; font-weight:600;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,255,255,.62);
}

/* Quality bar */
.result-quality{
  margin-bottom:22px;
}
.quality-bar{
  height:6px;
  background:rgba(255,255,255,.08);
  border-radius:3px;
  overflow:hidden;
  margin-bottom:8px;
}
.quality-fill{
  height:100%;
  background:#3DD68C;
  border-radius:3px;
  transition:width .6s ease;
}
.quality-text{
  font-size:13px; font-weight:500;
  color:rgba(255,255,255,.85);
}

/* Detail rows */
.result-details{
  display:flex; flex-direction:column;
  gap:8px;
  margin-bottom:22px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--mf-r);
}
.detail-item{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13.5px;
}
.detail-label{ color:rgba(255,255,255,.62); }
.detail-value{
  color:#FFFFFF; font-weight:600;
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
}

.result-insights h4{
  font-size:14px; font-weight:600; letter-spacing:-.005em;
  color:#E8C796;
  margin:0 0 6px;
}
.result-insights p{
  font-size:14px; line-height:1.55;
  color:rgba(255,255,255,.78);
  margin:0;
}

/* =========================================================
   6. GROWTH RESULTS (.calculator-results — growth/price)
   ========================================================= */
.calculator-results{
  margin-top:32px;
  padding:28px 24px;
  background:#0F1411;
  color:#FFFFFF;
  border-radius:var(--mf-r-xl);
  position:relative; overflow:hidden;
}
@media (min-width:640px){
  .calculator-results{ padding:36px 32px; }
}
.calculator-results::before{
  content:"";
  position:absolute; right:-160px; bottom:-200px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle at center, rgba(14,92,58,.40) 0%, rgba(14,92,58,.10) 35%, transparent 65%);
  filter:blur(20px); pointer-events:none;
}
.calculator-results > *{ position:relative; z-index:1; }

.result-header{
  margin-bottom:22px; padding-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.result-header h3{
  font-size:20px; font-weight:600; letter-spacing:-.01em;
  margin:0 0 4px; color:#FFFFFF;
}
.result-header .result-platform{
  font-size:12.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.10em;
  color:#E8C796;
  margin:0;
}

.growth-main-result,
.price-main-result{
  display:grid; grid-template-columns:1fr;
  gap:14px;
  margin-bottom:24px;
}
@media (min-width:640px){
  .growth-main-result{ grid-template-columns:repeat(3, 1fr); }
}

.growth-stat,
.price-stat{
  padding:18px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--mf-r);
  text-align:left;
  display:flex; flex-direction:column; gap:6px;
}
.growth-stat .stat-label,
.price-stat .stat-label{
  font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.10em;
  color:rgba(255,255,255,.62);
}
.growth-stat .stat-value,
.price-stat .stat-value,
.price-value{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font-size:28px; font-weight:600; line-height:1;
  letter-spacing:-.03em;
  color:#E8C796;
}
@media (min-width:640px){
  .growth-stat .stat-value,
  .price-stat .stat-value,
  .price-value{ font-size:32px; }
}
.growth-stat .stat-sublabel,
.price-stat .stat-sublabel{
  font-size:12px; color:rgba(255,255,255,.62);
  font-weight:500;
}

/* Progress bar — for growth calculator */
.progress-container{
  margin-bottom:24px;
}
.progress-header{
  display:flex; justify-content:space-between;
  font-size:12.5px; font-weight:600;
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.78);
  margin-bottom:10px;
}
.progress-bar{
  height:8px;
  background:rgba(255,255,255,.08);
  border-radius:4px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg, #E8C796, #3DD68C);
  border-radius:4px;
  transition:width .8s ease;
}
.progress-percentage{
  margin-top:8px;
  font-size:12px; font-weight:500;
  color:rgba(255,255,255,.62);
  text-align:right;
}

/* Comparison cards */
.comparison-section{
  margin-top:24px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.10);
}
.comparison-section h4{
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  color:#FFFFFF; margin:0 0 6px;
}
.comparison-intro{
  font-size:13px; color:rgba(255,255,255,.62); margin:0 0 14px;
}
.comparison-grid{
  display:grid; grid-template-columns:1fr;
  gap:10px;
}
@media (min-width:640px){
  .comparison-grid{ grid-template-columns:repeat(3, 1fr); }
}
.comparison-card{
  padding:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--mf-r);
}
.comparison-card.comparison-highlighted{
  background:linear-gradient(180deg, rgba(232,199,150,.10), rgba(232,199,150,.04));
  border-color:rgba(232,199,150,.35);
}
.comparison-label{
  font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.10em;
  color:rgba(255,255,255,.62);
  margin-bottom:6px;
}
.comparison-value{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  font-size:22px; font-weight:600; line-height:1.1;
  letter-spacing:-.02em;
  color:#FFFFFF;
  margin-bottom:6px;
}
.comparison-card.comparison-highlighted .comparison-value{ color:#E8C796; }
.comparison-rate{
  font-size:11.5px; color:rgba(255,255,255,.55);
}

/* Result tips block */
.result-tips{
  margin-top:24px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.10);
}
.result-tips h4{
  font-size:15px; font-weight:600;
  color:#E8C796;
  margin:0 0 12px;
}
.result-tips ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:8px;
}
.result-tips li{
  font-size:13.5px; line-height:1.55;
  color:rgba(255,255,255,.78);
  padding-left:18px;
  position:relative;
}
.result-tips li::before{
  content:"·";
  position:absolute; left:0; top:-2px;
  font-size:24px;
  color:#E8C796;
}
.result-tips li strong{
  color:#FFFFFF; font-weight:600;
}

/* CTA box inside results */
.cta-box{
  margin-top:24px;
  padding:20px;
  background:linear-gradient(180deg, rgba(232,199,150,.10), rgba(232,199,150,.04));
  border:1px solid rgba(232,199,150,.30);
  border-radius:var(--mf-r);
  text-align:center;
}
.cta-box h4{
  font-size:16px; font-weight:600;
  color:#E8C796; margin:0 0 6px;
}
.cta-box p{
  font-size:13.5px; color:rgba(255,255,255,.78);
  margin:0 0 14px;
}
.cta-box .cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px;
  background:#FFFFFF;
  color:#0A4A2E;
  border-radius:var(--mf-r-pill);
  font:600 13.5px/1 var(--mf-font);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta-box .cta-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px -8px rgba(0,0,0,.35);
}

/* Price breakdown rows (price calculator) */
.price-breakdown,
.breakdown-list{
  margin-top:16px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--mf-r);
  display:flex; flex-direction:column; gap:8px;
}
.breakdown-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px;
}
.breakdown-label{ color:rgba(255,255,255,.62); }
.breakdown-value{
  color:#FFFFFF; font-weight:600;
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
}

/* =========================================================
   7. INFO SIDEBAR (engagement) + .info-section grid
   ========================================================= */
.info-sidebar{
  display:flex; flex-direction:column; gap:14px;
}

.info-card{
  padding:22px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-xl);
  display:flex; flex-direction:column; gap:10px;
}
.info-card .info-icon{
  width:38px; height:38px;
  border-radius:10px;
  background:var(--mf-accent-soft);
  color:var(--mf-accent);
  display:grid; place-items:center;
  margin-bottom:4px;
}
.info-card h3{
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  color:var(--mf-ink); margin:0;
}
.info-card p{
  font-size:13.5px; line-height:1.6;
  color:var(--mf-ink-soft); margin:0;
}

/* CTA card in sidebar */
.info-card.cta-card{
  background:linear-gradient(180deg, var(--mf-accent-soft), #FFFFFF);
  border-color:rgba(14,92,58,.18);
}
.cta-button-sidebar{
  margin-top:8px;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px;
  background:var(--mf-accent);
  color:#FFFFFF;
  border-radius:var(--mf-r-pill);
  font:600 13px/1 var(--mf-font);
  text-decoration:none;
  align-self:flex-start;
  transition:background .15s ease;
}
.cta-button-sidebar:hover{ background:var(--mf-accent-deep); color:#FFFFFF;}

/* Benchmarks list */
.benchmarks-list{
  display:flex; flex-direction:column; gap:8px;
  margin-top:4px;
}
.benchmark-item{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px;
  background:var(--mf-surface-2);
  border-radius:var(--mf-r);
}
.benchmark-item strong{
  font-size:12px; font-weight:700;
  color:var(--mf-ink);
}
.benchmark-item span{
  font-size:12.5px;
  color:var(--mf-ink-soft);
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
}

/* =========================================================
   8. INFO BAND (after results) — 3-column trust row
   ========================================================= */
.info-section{
  padding:64px 0;
  background:var(--mf-surface-2);
  border-top:1px solid var(--mf-line);
  border-bottom:1px solid var(--mf-line);
}
@media (min-width:900px){
  .info-section{ padding:96px 0; }
}
.info-grid{
  display:grid; grid-template-columns:1fr; gap:18px;
}
@media (min-width:900px){
  .info-grid{ grid-template-columns:repeat(3, 1fr); gap:24px; }
}
.info-section .info-card{
  background:#FFFFFF;
}
.info-section .info-icon{
  font-size:24px;
  width:auto; height:auto;
  background:transparent;
  color:inherit;
  display:inline-block;
  padding:0;
}

/* =========================================================
   9. FORMULA SECTION (engagement)
   ========================================================= */
.formula-section{
  padding:64px 0;
}
@media (min-width:900px){
  .formula-section{ padding:96px 0; }
}
.formula-card{
  max-width:880px; margin:0 auto;
}
.formula-header{ text-align:center; margin-bottom:36px; }
.formula-header h2{
  font-size:28px; font-weight:600; letter-spacing:-.025em;
  color:var(--mf-ink); margin:0 0 8px;
}
@media (min-width:640px){ .formula-header h2{ font-size:32px; } }
.formula-header p{
  font-size:15px; color:var(--mf-ink-soft); margin:0;
}

.formula-content{
  display:grid; grid-template-columns:1fr; gap:36px;
  align-items:center;
}
@media (min-width:900px){
  .formula-content{ grid-template-columns:1fr 1fr; gap:48px; }
}

.formula-visual{
  display:flex; justify-content:center;
}
.formula-box{
  display:flex; flex-direction:column; align-items:center;
  gap:12px;
  padding:32px 28px;
  background:#0F1411;
  color:#FFFFFF;
  border-radius:var(--mf-r-xl);
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-variant-numeric:tabular-nums;
  position:relative; overflow:hidden;
}
.formula-box::before{
  content:"";
  position:absolute;
  right:-100px; top:-100px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,199,150,.18), transparent 60%);
  pointer-events:none;
}
.formula-box > *{ position:relative; z-index:1; }
.formula-line{ display:flex; align-items:center; gap:10px; }
.formula-text{ font-size:14px; color:rgba(255,255,255,.78); font-family:var(--mf-font); }
.formula-equals{ font-size:24px; color:#E8C796; }
.formula-fraction{
  display:flex; flex-direction:column; align-items:stretch;
  gap:6px; min-width:200px;
}
.formula-numerator,
.formula-denominator{
  font-size:13px;
  color:#FFFFFF;
  text-align:center;
  font-family:var(--mf-font);
}
.formula-divider{
  height:1px; background:rgba(232,199,150,.55);
}
.formula-multiply{
  display:flex; align-items:center; gap:8px;
  font-size:18px;
  color:#E8C796;
}
.formula-times{ font-style:normal; }
.formula-hundred{ font-weight:700; }

.formula-explanation{
  display:flex; flex-direction:column; gap:18px;
}
.explanation-item{
  display:flex; align-items:flex-start; gap:14px;
}
.explanation-icon{
  width:32px; height:32px; flex:none;
  border-radius:50%;
  background:var(--mf-accent-soft);
  color:var(--mf-accent);
  font:700 14px/32px var(--mf-font-mono);
  text-align:center;
}
.explanation-text strong{
  display:block; font-size:14.5px; font-weight:700;
  color:var(--mf-ink); margin-bottom:2px;
}
.explanation-text p{
  font-size:13.5px; color:var(--mf-ink-soft);
  line-height:1.55; margin:0;
}

/* =========================================================
   10. TIPS SECTION (engagement)
   ========================================================= */
.tips-section{
  padding:64px 0;
  background:var(--mf-surface-2);
  border-top:1px solid var(--mf-line);
  border-bottom:1px solid var(--mf-line);
}
@media (min-width:900px){ .tips-section{ padding:96px 0; } }

.tips-header{ text-align:center; max-width:680px; margin:0 auto 36px; }
.tips-header h2{
  font-size:28px; font-weight:600; letter-spacing:-.025em;
  color:var(--mf-ink); margin:0 0 8px;
}
@media (min-width:640px){ .tips-header h2{ font-size:32px; } }
.tips-header p{
  font-size:15px; color:var(--mf-ink-soft); margin:0;
}

.tips-grid{
  display:grid; grid-template-columns:1fr; gap:14px;
}
@media (min-width:640px){ .tips-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1000px){ .tips-grid{ grid-template-columns:repeat(3, 1fr); } }

.tip-card{
  position:relative;
  padding:24px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-xl);
  display:flex; flex-direction:column; gap:8px;
}
.tip-number{
  position:absolute;
  top:14px; right:18px;
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-size:13px; font-weight:600;
  letter-spacing:0;
  color:var(--mf-ink-muted);
}
.tip-icon{
  width:40px; height:40px;
  border-radius:10px;
  background:var(--mf-accent-soft);
  color:var(--mf-accent);
  display:grid; place-items:center;
  margin-bottom:4px;
}
.tip-card h3{
  font-size:15.5px; font-weight:600; letter-spacing:-.005em;
  color:var(--mf-ink); margin:0;
}
.tip-card p{
  font-size:13.5px; line-height:1.6;
  color:var(--mf-ink-soft); margin:0;
}

/* =========================================================
   11. FAQ SECTION (growth, price, etc.)
   ========================================================= */
.faq-section{
  padding:64px 0;
}
@media (min-width:900px){ .faq-section{ padding:96px 0; } }

.faq-section .section-title{
  text-align:center;
  font-size:28px; font-weight:600; letter-spacing:-.025em;
  color:var(--mf-ink);
  margin:0 0 36px;
}
@media (min-width:640px){ .faq-section .section-title{ font-size:32px; } }

.faq-grid{
  display:grid; grid-template-columns:1fr;
  gap:14px;
  max-width:980px;
  margin:0 auto;
}
@media (min-width:900px){ .faq-grid{ grid-template-columns:repeat(2, 1fr); gap:18px; } }
.faq-item{
  padding:22px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-xl);
}
.faq-item h3{
  font-size:15px; font-weight:600; letter-spacing:-.005em;
  color:var(--mf-ink);
  margin:0 0 8px;
}
.faq-item p{
  font-size:13.5px; line-height:1.65;
  color:var(--mf-ink-soft); margin:0;
}

/* =========================================================
   12. FINAL CTA SECTION
   ========================================================= */
.final-cta{
  position:relative;
  padding:64px 0;
  background:#0F1411;
  color:#FFFFFF;
  overflow:hidden;
  isolation:isolate;
}
@media (min-width:900px){ .final-cta{ padding:96px 0; } }

.final-cta::before{
  content:"";
  position:absolute;
  right:-200px; top:-200px;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(14,92,58,.40), transparent 65%);
  filter:blur(20px);
  pointer-events:none;
  z-index:-1;
}
/* Strip out legacy floating shapes/pattern so they don't render */
.final-cta .cta-background,
.final-cta .cta-pattern,
.final-cta .floating-shape{ display:none !important; }

.cta-content{
  text-align:center;
  max-width:680px;
  margin:0 auto;
}
.cta-icon-wrapper{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  border-radius:18px;
  background:rgba(232,199,150,.12);
  color:#E8C796;
  margin-bottom:20px;
}
.final-cta h2{
  font-size:30px; font-weight:600; letter-spacing:-.025em;
  color:#FFFFFF; margin:0 0 12px;
}
@media (min-width:640px){ .final-cta h2{ font-size:38px; } }
.final-cta > .engagement-container > .cta-content > p{
  font-size:15.5px; line-height:1.6;
  color:rgba(255,255,255,.72);
  margin:0 0 22px;
  max-width:540px; margin-left:auto; margin-right:auto;
}

.cta-features{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:18px;
  margin:0 0 28px;
}
.feature-item{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:500;
  color:rgba(255,255,255,.85);
}
.feature-item svg{
  width:16px; height:16px;
  color:#3DD68C;
}

.cta-buttons{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px;
}
.cta-btn-primary{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px;
  background:#FFFFFF;
  color:#0A4A2E;
  border-radius:var(--mf-r-pill);
  font:600 14.5px/1 var(--mf-font);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px -10px rgba(0,0,0,.45);
  color:#0A4A2E;
}
.cta-btn-secondary{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px;
  background:transparent;
  border:1px solid rgba(255,255,255,.30);
  color:#FFFFFF;
  border-radius:var(--mf-r-pill);
  font:600 14.5px/1 var(--mf-font);
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.cta-btn-secondary:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.50);
  color:#FFFFFF;
}

/* =========================================================
   13. COLOR-PALETTE-GENERATOR specific
   ========================================================= */
.color-input{
  width:64px; height:48px;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  padding:4px;
  cursor:pointer;
  background:#FFFFFF;
}
.hex-input{
  flex:1; min-width:0;
  height:48px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  padding:0 14px;
  font:500 14px/1 var(--mf-font-mono);
  color:var(--mf-ink);
  outline:none;
  text-transform:lowercase;
}
.hex-input:focus{
  border-color:var(--mf-accent);
  box-shadow:0 0 0 4px var(--mf-accent-glow);
}
.color-input-row{
  display:flex; gap:8px; align-items:center;
}

/* Random + action buttons */
.random-color-btn,
.action-btn,
.export-btn{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px;
  height:48px;
  padding:0 14px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  color:var(--mf-ink);
  font:500 13px/1 var(--mf-font);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.random-color-btn:hover,
.action-btn:hover,
.export-btn:hover{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
}

/* Palette result */
.palette-result{ margin-top:24px; }
.palette-result.hidden,
.palette-result[style*="display: none"]{ display:none; }

.palette-header{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  margin-bottom:14px;
}
.palette-header h3{
  font-size:16px; font-weight:600; color:var(--mf-ink); margin:0;
}
.palette-actions{
  display:flex; gap:8px;
}

/* Color swatches */
.color-swatches{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:10px;
}
@media (min-width:640px){ .color-swatches{ grid-template-columns:repeat(5, 1fr); } }

.color-swatch{
  display:flex; flex-direction:column;
  border-radius:var(--mf-r-lg);
  overflow:hidden;
  border:1px solid var(--mf-line);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.color-swatch:hover{
  transform:translateY(-2px);
  box-shadow:var(--mf-shadow-3);
}
.color-swatch-preview{
  height:120px;
}
.color-swatch-info{
  padding:10px 12px;
  background:#FFFFFF;
}
.color-swatch-hex{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-size:12.5px; font-weight:600;
  color:var(--mf-ink);
  text-transform:lowercase;
}
.color-swatch-name{
  font-size:11px;
  color:var(--mf-ink-muted);
  margin-top:2px;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Feed preview */
.feed-preview-section{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--mf-line-soft);
}
.feed-preview-section h4{
  font-size:14px; font-weight:600; letter-spacing:-.005em;
  color:var(--mf-ink); margin:0 0 12px;
}
.feed-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:6px;
  max-width:340px;
}
.feed-cell{
  aspect-ratio:1;
  border-radius:6px;
}

/* Export buttons */
.export-section{
  margin-top:24px; padding-top:24px;
  border-top:1px solid var(--mf-line-soft);
  display:flex; gap:8px;
}

/* Toast */
.toast{
  position:fixed;
  bottom:24px; left:50%;
  transform:translateX(-50%) translateY(120%);
  padding:14px 22px;
  background:#0F1411;
  color:#FFFFFF;
  border-radius:var(--mf-r-pill);
  font:500 13px/1 var(--mf-font);
  letter-spacing:-.005em;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.50);
  z-index:9999;
  display:flex; align-items:center; gap:8px;
  transition:transform .25s ease;
}
.toast.show{
  transform:translateX(-50%) translateY(0);
}
.toast.toast-success{ background:#0E5C3A; }
.toast.toast-error{ background:#B23A3A; }

/* =========================================================
   14. BIO-GENERATOR specific
   ========================================================= */
.option-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
@media (min-width:640px){ .option-grid{ grid-template-columns:repeat(4, 1fr); } }

.option-card{
  appearance:none;
  display:flex; flex-direction:column; align-items:center;
  gap:6px;
  padding:14px 10px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  color:var(--mf-ink-soft);
  font:500 12.5px/1.2 var(--mf-font);
  cursor:pointer;
  text-align:center;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.option-card .option-icon{
  font-size:22px; line-height:1;
}
.option-card.active{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
  background:var(--mf-accent-soft);
}

.text-input{
  width:100%;
  height:48px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  padding:0 16px;
  font:500 14px/1 var(--mf-font);
  color:var(--mf-ink);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.text-input:focus{
  border-color:var(--mf-accent);
  box-shadow:0 0 0 4px var(--mf-accent-glow);
}

.checkbox-row{
  display:flex; gap:18px; flex-wrap:wrap;
}
.checkbox-row label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--mf-ink);
  cursor:pointer;
}
.checkbox-row input[type="checkbox"]{
  width:18px; height:18px;
  accent-color:var(--mf-accent);
  cursor:pointer;
}

/* Bio results */
.results-section{
  margin-top:32px;
  padding:28px 24px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-xl);
  box-shadow:var(--mf-shadow-2);
}
@media (min-width:640px){ .results-section{ padding:36px 32px; } }

.results-section h3{
  font-size:18px; font-weight:600; color:var(--mf-ink);
  margin:0 0 16px;
}

.bio-results{
  display:flex; flex-direction:column; gap:14px;
}
.bio-result-item{
  padding:18px 20px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:var(--mf-r);
  position:relative;
}
.bio-result-text{
  font-size:14.5px; line-height:1.6;
  color:var(--mf-ink);
  white-space:pre-wrap;
  margin:0 0 14px;
}
.bio-result-actions{
  display:flex; gap:8px; flex-wrap:wrap;
}
.bio-action-btn{
  appearance:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-pill);
  color:var(--mf-ink-soft);
  font:500 12.5px/1 var(--mf-font);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.bio-action-btn:hover{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
}

.regenerate-btn{
  appearance:none;
  margin-top:14px;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-pill);
  color:var(--mf-ink);
  font:600 13.5px/1 var(--mf-font);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.regenerate-btn:hover{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
}

/* AI usage limit info */
.limit-info{
  margin-top:8px;
  font-size:12px;
  color:var(--mf-ink-muted);
  text-align:center;
}

/* Hide legacy hero-background ornaments coming from old CSS */
.engagement-page .hero-background,
.engagement-page .hero-pattern,
.engagement-page .floating-shapes{ display:none !important; }

/* =========================================================
   15. PALETTE-PAGE compatibility layer
   The palette generator uses .palette-page / .palette-container /
   .generator-* / .style-tab / .mode-tab etc. We map them to the
   editorial system without renaming so the JS keeps working.
   ========================================================= */
.palette-page{
  background:var(--mf-surface);
  color:var(--mf-ink);
  font-family:var(--mf-font);
}

/* Inner container — same widths */
.palette-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
@media (min-width:900px){ .palette-container{ padding:0 32px; } }

/* Hero swatches under H1 */
.mf-palette-hero-swatches{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px;
  margin-top:24px;
}
.mf-palette-hero-swatches .hs{
  display:inline-block;
  width:32px; height:32px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 6px 14px -4px rgba(0,0,0,.30);
  cursor:default;
}

/* Generator section */
.generator-section{
  padding:48px 0 64px;
}
@media (min-width:900px){ .generator-section{ padding:80px 0 112px; } }

.generator-grid{
  display:grid; grid-template-columns:1fr; gap:24px; align-items:start;
}
@media (min-width:1000px){
  .generator-grid{
    grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
    gap:32px;
  }
}

.generator-card{
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-xl);
  padding:28px 24px;
  box-shadow:var(--mf-shadow-2);
}
@media (min-width:900px){ .generator-card{ padding:40px 36px; } }

.generator-header{
  display:flex; align-items:flex-start; gap:14px;
  padding-bottom:24px; margin-bottom:24px;
  border-bottom:1px solid var(--mf-line-soft);
}
.generator-header .header-icon{
  width:44px; height:44px; flex:none;
  border-radius:12px;
  background:var(--mf-accent-soft);
  color:var(--mf-accent);
  display:grid; place-items:center;
}
.generator-header h2{
  font-size:22px; line-height:1.15;
  letter-spacing:-.02em;
  font-weight:600;
  color:var(--mf-ink);
  margin:0 0 4px;
}
@media (min-width:640px){ .generator-header h2{ font-size:26px; } }
.generator-header p{ font-size:14px; color:var(--mf-ink-soft); margin:0; }

/* Style + Mode + Niche/Style tabs (palette generator) */
.style-selector,
.color-mode-selector,
.color-picker-section{
  margin-bottom:22px;
}
.style-tabs,
.mode-tabs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
@media (min-width:640px){
  .style-tabs{ grid-template-columns:repeat(3, 1fr); }
  .mode-tabs{ grid-template-columns:repeat(4, 1fr); }
}
.style-tab,
.mode-tab{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:14px 12px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  color:var(--mf-ink-soft);
  font:500 13px/1.2 var(--mf-font);
  letter-spacing:-.005em;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  text-align:center;
}
.style-tab svg,
.mode-tab svg{
  width:18px; height:18px;
  flex:none;
  color:var(--mf-ink-muted);
}
.style-tab:hover,
.mode-tab:hover{
  border-color:var(--mf-line-strong);
  color:var(--mf-ink);
}
.style-tab.active,
.mode-tab.active{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
  background:var(--mf-accent-soft);
  box-shadow:inset 0 0 0 1px var(--mf-accent);
}
.style-tab.active svg,
.mode-tab.active svg{ color:var(--mf-accent); }

/* Style preview swatch chip on style-tab */
.style-preview{
  display:inline-block;
  width:18px; height:18px; border-radius:6px;
  border:1px solid rgba(0,0,0,.08);
  flex:none;
}
.soft-minimal-preview   { background:linear-gradient(135deg,#F4EFE8,#D9D2C4); }
.earth-tones-preview    { background:linear-gradient(135deg,#A67C52,#5C4438); }
.vibrant-pop-preview    { background:linear-gradient(135deg,#FF5E84,#FFC15E); }
.dark-moody-preview     { background:linear-gradient(135deg,#1F2933,#3E4C5E); }
.pastel-dream-preview   { background:linear-gradient(135deg,#F9C8E0,#C8E0F9); }
.luxury-gold-preview    { background:linear-gradient(135deg,#C8A06B,#1F1A14); }

/* Color picker row */
.color-picker-wrapper{
  display:flex; gap:8px; align-items:center;
}
.color-picker-wrapper .hex-input{ flex:1; }

/* Visible state on paletteResult */
.palette-result{ display:none; }
.palette-result.visible{ display:block; margin-top:24px; }

/* Premade cards row (template paletes user can pick) */
.premade-card{
  appearance:none;
  display:flex; flex-direction:column; gap:6px;
  padding:14px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-lg);
  cursor:pointer;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  text-align:left;
}
.premade-card:hover{
  border-color:var(--mf-accent);
  transform:translateY(-1px);
  box-shadow:var(--mf-shadow-2);
}
.premade-card .premade-preview{
  display:flex; height:32px; border-radius:6px; overflow:hidden;
}
.premade-card .premade-preview > i{ flex:1; }
.premade-card h4{
  font-size:13px; font-weight:600; color:var(--mf-ink); margin:0;
}
.premade-card p{
  font-size:11.5px; color:var(--mf-ink-muted); margin:0;
}

/* Trends list (sidebar in palette generator) */
.trends-list{
  display:flex; flex-direction:column; gap:10px;
  margin-top:6px;
}
.trend-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background:var(--mf-surface-2);
  border-radius:var(--mf-r);
}
.trend-color{
  width:32px; height:32px; flex:none;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.06);
}
.trend-info{ display:flex; flex-direction:column; gap:1px; }
.trend-info strong{ font-size:13px; font-weight:700; color:var(--mf-ink); }
.trend-info span{ font-size:12px; color:var(--mf-ink-soft); }

/* Swatch-color (single rendered swatch from JS) */
.swatch-color{
  display:flex; flex-direction:column;
  border-radius:var(--mf-r-lg); overflow:hidden;
  border:1px solid var(--mf-line);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.swatch-color:hover{ transform:translateY(-2px); box-shadow:var(--mf-shadow-3); }
.swatch-color > div:first-child{ height:120px; }
.swatch-color > div:last-child{
  padding:10px 12px; background:#FFFFFF;
}
.swatch-color .hex{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-size:12.5px; font-weight:600;
  color:var(--mf-ink); text-transform:lowercase;
}
.swatch-color .name{
  font-size:11px; color:var(--mf-ink-muted);
  margin-top:2px; text-transform:uppercase; letter-spacing:.06em;
}

/* Palette-page sections following same pattern as engagement */
.palette-page .info-section,
.palette-page .tips-section,
.palette-page .faq-section,
.palette-page .formula-section,
.palette-page .final-cta{
  /* inherit from above */
}

/* =========================================================
   16. BIO-GENERATOR compatibility layer
   ========================================================= */
.bio-generator-page{
  background:var(--mf-surface);
  color:var(--mf-ink);
  font-family:var(--mf-font);
}
.bio-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
@media (min-width:900px){ .bio-container{ padding:0 32px; } }

/* Bio sub-section labels */
.section-label{
  display:block;
  font-size:11px; font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--mf-ink-muted);
  margin-bottom:10px;
}

/* Bio platform/niche/style selector — uses .platform-grid / .niche-grid / .style-grid */
.platform-grid,
.niche-grid,
.style-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  margin-bottom:22px;
}
@media (min-width:640px){
  .platform-grid{ grid-template-columns:repeat(3, 1fr); }
  .niche-grid{ grid-template-columns:repeat(4, 1fr); }
  .style-grid{ grid-template-columns:repeat(4, 1fr); }
}
.platform-option,
.niche-option,
.style-option,
.niche-btn,
.style-btn{
  appearance:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  padding:14px 8px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  color:var(--mf-ink-soft);
  font:500 12.5px/1.2 var(--mf-font);
  cursor:pointer;
  text-align:center;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.platform-option .platform-icon,
.niche-option .niche-icon,
.style-option .style-icon,
.niche-btn .niche-emoji,
.style-btn .style-emoji{
  font-size:22px; line-height:1;
}
.platform-option:hover,
.niche-option:hover,
.style-option:hover,
.niche-btn:hover,
.style-btn:hover{
  border-color:var(--mf-line-strong);
  color:var(--mf-ink);
}
.platform-option.active,
.niche-option.active,
.style-option.active,
.niche-btn.active,
.style-btn.active{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
  background:var(--mf-accent-soft);
  box-shadow:inset 0 0 0 1px var(--mf-accent);
}

/* Bio platform tabs (each tab carries icon + name + small char-limit caption) */
.platform-tabs .platform-tab{
  flex-direction:column;
  gap:6px;
  padding:14px 10px;
}
.platform-tabs .platform-tab small{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--mf-ink-muted);
}
.platform-tabs .platform-tab.active small{ color:var(--mf-accent); opacity:.85; }

/* Form section block (wraps a label + controls) */
.form-section{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:22px;
}

/* Radio cards (account type picker) */
.radio-cards{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.radio-card{
  position:relative;
  cursor:pointer;
}
.radio-card input[type="radio"]{
  position:absolute; opacity:0; pointer-events:none;
}
.radio-card .radio-card-content{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  padding:14px 8px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r);
  color:var(--mf-ink-soft);
  font:500 12.5px/1.2 var(--mf-font);
  text-align:center;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.radio-card .radio-card-content svg{
  width:22px; height:22px;
  color:var(--mf-ink-muted);
}
.radio-card:hover .radio-card-content{
  border-color:var(--mf-line-strong);
  color:var(--mf-ink);
}
.radio-card input[type="radio"]:checked + .radio-card-content,
.radio-card.active .radio-card-content{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
  background:var(--mf-accent-soft);
  box-shadow:inset 0 0 0 1px var(--mf-accent);
}
.radio-card input[type="radio"]:checked + .radio-card-content svg,
.radio-card.active .radio-card-content svg{ color:var(--mf-accent); }

/* Custom checkbox (bio options) */
.options-section{
  flex-direction:row !important;
  flex-wrap:wrap;
  gap:18px !important;
}
.checkbox-label{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13.5px;
  color:var(--mf-ink);
  cursor:pointer;
  user-select:none;
}
.checkbox-label input[type="checkbox"]{
  position:absolute; opacity:0; pointer-events:none;
}
.checkbox-custom{
  width:18px; height:18px; flex:none;
  display:inline-grid; place-items:center;
  background:#FFFFFF;
  border:1.5px solid var(--mf-line-strong);
  border-radius:5px;
  transition:background .12s ease, border-color .12s ease;
}
.checkbox-custom::after{
  content:"";
  width:9px; height:9px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:contain; background-repeat:no-repeat;
  opacity:0;
  transition:opacity .12s ease;
}
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom{
  background:var(--mf-accent);
  border-color:var(--mf-accent);
}
.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after{ opacity:1; }

/* Generate-button content wrapper (bio) */
.generate-button .btn-content{
  display:inline-flex; align-items:center; gap:10px;
}

/* Bio result card */
.bio-result-card{
  padding:18px 20px;
  background:var(--mf-surface-2);
  border:1px solid var(--mf-line-soft);
  border-radius:var(--mf-r);
  position:relative;
}
.bio-result-text{
  font-size:14.5px; line-height:1.6;
  color:var(--mf-ink);
  white-space:pre-wrap;
  margin:0 0 14px;
}
.copy-bio-btn{
  appearance:none;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  background:#FFFFFF;
  border:1px solid var(--mf-line);
  border-radius:var(--mf-r-pill);
  color:var(--mf-ink-soft);
  font:500 12.5px/1 var(--mf-font);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.copy-bio-btn:hover{
  border-color:var(--mf-accent);
  color:var(--mf-accent);
}

/* Counter (char count for bio) */
.char-counter{
  font-family:var(--mf-font-mono);
  font-feature-settings:"tnum";
  font-size:12px;
  color:var(--mf-ink-muted);
  margin-top:6px;
  text-align:right;
}
.char-counter.over{ color:#B23A3A; font-weight:600; }