/* ============================================================
   MATH MASTER TOOLS – CENTRALIZED STYLES
   All tools share this single CSS file.
   ============================================================ */

/* ── RESET & BASE ── */
.mmt-tool {
  font-family: 'Georgia', serif;
  font-size: clamp(15px, 2vw, 16px);
  line-height: 1.65;
  color: #1a1209;
  background: #faf7f2;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow-wrap: break-word;
  box-sizing: border-box;
}
.mmt-tool *,
.mmt-tool *::before,
.mmt-tool *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.mmt-tool a {
  color: #c0180f;
  font-weight: 700;
  text-decoration: none;
  word-break: break-word;
}
.mmt-tool a:hover {
  text-decoration: underline;
}
.mmt-tool a:focus-visible,
.mmt-tool button:focus-visible,
.mmt-tool input:focus-visible,
.mmt-tool select:focus-visible,
.mmt-tool textarea:focus-visible {
  outline: 2px solid #c9952a;
  outline-offset: 2px;
  border-radius: 2px;
}
.mmt-tool p {
  margin-bottom: 0.9em;
}

/* ── RESPONSIVE MEDIA SAFETY ── */
.mmt-tool img,
.mmt-tool svg,
.mmt-tool video,
.mmt-tool iframe {
  max-width: 100%;
  height: auto;
  display: block;
}
.mmt-tool table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}
.mmt-tool .mmt-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mmt-tool input,
.mmt-tool select,
.mmt-tool textarea,
.mmt-tool button {
  font-family: inherit;
  font-size: 1rem;
  max-width: 100%;
}

/* ── MASTHEAD ── */
.mmt-masthead {
  background: #1a1209;
  padding: clamp(16px, 4vw, 24px) clamp(12px, 4vw, 16px) clamp(14px, 3vw, 18px);
  text-align: center;
  border-bottom: 3px solid #c9952a;
  width: 100%;
}
.mmt-masthead .mmt-eyebrow {
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e8c06a;
  margin-bottom: 6px;
}
.mmt-masthead h1 {
  font-family: 'Georgia', serif;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.mmt-masthead h1 span {
  color: #c9952a;
}
.mmt-masthead .mmt-sub {
  font-size: 0.688rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a89b7a;
  margin-top: 6px;
}

/* ── CONTENT WRAPPER ── */
.mmt-body {
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(12px, 4vw, 12px) clamp(28px, 6vw, 40px);
}

/* ── SECTION DIVIDER ── */
.mmt-divider {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 8px);
  margin: clamp(20px, 4vw, 28px) 0 clamp(14px, 2.5vw, 18px);
}
.mmt-divider::before,
.mmt-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #d4c9a8;
}
.mmt-diamond {
  width: 9px;
  height: 9px;
  background: #c9952a;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ── HEADINGS ── */
.mmt-tool h2 {
  font-family: 'Georgia', serif;
  font-size: clamp(1.15rem, 4.5vw, 1.6rem);
  font-weight: 700;
  color: #1a1209;
  margin-bottom: 0.85em;
  line-height: 1.28;
  overflow-wrap: break-word;
}
.mmt-tool h3 {
  font-family: 'Georgia', serif;
  font-size: clamp(0.98rem, 3.5vw, 1.05rem);
  font-weight: 700;
  color: #3d4a5c;
  margin: 1.3em 0 0.4em;
  overflow-wrap: break-word;
}

/* ── INTRO BANNER ── */
.mmt-intro {
  background: #f0ead8;
  border-left: 5px solid #c9952a;
  padding: clamp(14px, 2.5vw, 18px) clamp(12px, 2vw, 20px);
  margin: clamp(18px, 3vw, 24px) 0;
  border-radius: 0 6px 6px 0;
}

/* ── FEATURE GRID ── */
.mmt-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(14px, 2.5vw, 16px) 0 clamp(18px, 3vw, 24px);
}
.mmt-card {
  background: #fff;
  border: 1px solid #d4c9a8;
  border-top: 2px solid #c9952a;
  padding: clamp(10px, 1.8vw, 12px) clamp(10px, 2vw, 14px);
  border-radius: 3px;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
}
.mmt-card .icon {
  font-size: 1.2rem;
  margin-bottom: 4px;
}
.mmt-card strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 2px;
  color: #1a1209;
  overflow-wrap: break-word;
}
.mmt-card p {
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
  color: #5a5040;
}

/* ── ADVANCED FEATURES LIST (◆) ── */
.mmt-advlist {
  list-style: none;
  margin: clamp(14px, 2.5vw, 16px) 0 clamp(18px, 3vw, 24px);
}
.mmt-advlist li {
  padding: clamp(8px, 1.5vw, 10px) 14px;
  border-bottom: 1px solid #d4c9a8;
  font-size: 0.9rem;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.mmt-advlist li:last-child {
  border-bottom: none;
}
.mmt-advlist li::before {
  content: '◆';
  color: #c9952a;
  font-size: 0.6rem;
  margin-top: 0.35em;
  flex-shrink: 0;
}

/* ── STEPS (Numbered) ── */
.mmt-steps {
  margin: clamp(14px, 2.5vw, 16px) 0 clamp(18px, 3vw, 24px);
}
.mmt-step {
  display: flex;
  gap: clamp(10px, 2vw, 14px);
  margin-bottom: clamp(12px, 2vw, 16px);
  align-items: flex-start;
}
.mmt-stepnum {
  background: #c9952a;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  width: 2.2em;
  height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 2px;
}
.mmt-stepbody {
  min-width: 0;
}
.mmt-stepbody strong {
  display: block;
  font-size: 0.92rem;
  margin-bottom: 2px;
}
.mmt-stepbody p {
  margin: 0;
  font-size: 0.85rem;
  color: #5a5040;
}

/* ── BENEFITS (With Icons) ── */
.mmt-benefit {
  display: flex;
  gap: 12px;
  padding: 0.8em 0;
  border-bottom: 1px dashed #d4c9a8;
  align-items: flex-start;
}
.mmt-benefit:last-child {
  border-bottom: none;
}
.mmt-benefiticon {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.mmt-benefit > div:last-child {
  min-width: 0;
}

/* ── USE CASE GRID ── */
.mmt-ucgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(14px, 2.5vw, 16px) 0 clamp(18px, 3vw, 24px);
}
.mmt-uccard {
  background: #fdf6e3;
  border: 1px solid #d4c9a8;
  padding: 14px 12px;
  border-radius: 3px;
  flex: 1 1 160px;
  min-width: 0;
  max-width: 100%;
}
.mmt-uchead {
  font-weight: 700;
  color: #b84c1e;
  margin-bottom: 5px;
  font-size: 0.92rem;
  overflow-wrap: break-word;
}
.mmt-uccard p {
  font-size: 0.84rem;
  line-height: 1.5;
  margin: 0;
}

/* ── WHY LIST (✓) ── */
.mmt-whylist {
  list-style: none;
  margin: clamp(14px, 2.5vw, 16px) 0 clamp(18px, 3vw, 24px);
}
.mmt-whylist li {
  padding: 0.6em 0 0.6em 1.6em;
  position: relative;
  border-bottom: 1px solid #d4c9a8;
  font-size: 0.9rem;
}
.mmt-whylist li:last-child {
  border-bottom: none;
}
.mmt-whylist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #2a8a4a;
  font-weight: 700;
}

/* ── TIPS LIST (Gold left border) ── */
.mmt-tips {
  list-style: none;
  margin: clamp(14px, 2.5vw, 16px) 0 clamp(18px, 3vw, 24px);
}
.mmt-tips li {
  background: #fff;
  border-left: 4px solid #c9952a;
  padding: 0.7em 1em;
  margin-bottom: 0.6em;
  font-size: 0.88rem;
  border-radius: 0 4px 4px 0;
}

/* ── MISTAKES LIST (Red left border) ── */
.mmt-mistakes {
  list-style: none;
  margin: clamp(14px, 2.5vw, 16px) 0 clamp(18px, 3vw, 24px);
}
.mmt-mistakes li {
  background: #fff8f6;
  border-left: 4px solid #b84c1e;
  padding: 0.7em 1em;
  margin-bottom: 0.6em;
  font-size: 0.88rem;
  border-radius: 0 4px 4px 0;
}

/* ── FAQ ── */
.mmt-faq {
  margin: clamp(14px, 2.5vw, 16px) 0 clamp(18px, 3vw, 24px);
}
.mmt-faqitem {
  border: 1px solid #d4c9a8;
  border-radius: 4px;
  margin-bottom: 10px;
  overflow: hidden;
}
.mmt-faqq {
  background: #f0ead8;
  padding: 0.7em 1em;
  font-weight: 700;
  font-size: 0.9rem;
  color: #1a1209;
  overflow-wrap: break-word;
}
.mmt-faqa {
  padding: 0.7em 1em;
  font-size: 0.86rem;
  line-height: 1.65;
  color: #4a3f2e;
  background: #fff;
  overflow-wrap: break-word;
}

/* ── CONCLUSION (Dark background, gold accents) ── */
.mmt-conclusion {
  background: #1a1209;
  color: #faf7f2;
  padding: clamp(18px, 3vw, 22px) clamp(14px, 2.5vw, 20px);
  border-radius: 4px;
  margin-top: clamp(24px, 5vw, 32px);
  border-top: 3px solid #c9952a;
}
.mmt-conclusion h2 {
  color: #e8c06a;
  margin-bottom: 0.7em;
}
.mmt-conclusion p {
  color: #d4c9a8;
  margin-bottom: 0.8em;
  font-size: 0.9rem;
}
.mmt-conclusion p:last-child {
  margin-bottom: 0;
}
.mmt-conclusion a {
  color: #e8c06a;
}

/* ── SMALL-MOBILE FINE-TUNING (320px–375px) ── */
@media (max-width: 375px) {
  .mmt-body {
    padding-left: 10px;
    padding-right: 10px;
  }
  .mmt-grid,
  .mmt-ucgrid {
    gap: 10px;
  }
  .mmt-card,
  .mmt-uccard {
    flex-basis: 100%;
  }
  .mmt-stepnum {
    width: 2em;
    height: 2em;
    font-size: 0.85rem;
  }
}

/* ── LARGE DESKTOP: KEEP CONTENT FROM LOOKING STRETCHED ── */
@media (min-width: 1440px) {
  .mmt-body {
    max-width: 900px;
  }
}