/* ============================================================
   Home chunk — loaded only on the front page.
   Section order: hero · trust strip (shared) · problem · how-it-works
   · bento × 2 · pricing teaser · why-us · shared service-footer.

   The .hero cluster used by the home hero now lives in style.css
   (lifted when the first service page shipped — same markup is
   reused on every Option A page). This chunk holds home-only
   sections: problem, how-it-works, bento, templates teaser ref,
   why-expert.
   ============================================================ */

/* ============================================================
   PROBLEM SECTION — "Your research is done. Why are you still
   fighting LaTeX?" Two-column narrative + coloured pill stack.
   Pills are a one-off traffic-light palette (not promoted to
   tokens — used nowhere else on the site).
   ============================================================ */
.problem-section { padding: 120px 0; background: var(--color-bg-subtle); }
.problem-section__grid {
  display: grid;
  grid-template-columns: 1fr .65fr;
  gap: 120px;
  align-items: start;
}
.problem-section__text h2 {
  font-size: clamp(1.675rem, 3.3vw, 1.889rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0;
}
.problem-section__text p {
  font-size: 1rem; color: var(--color-text-muted);
  line-height: 1.7; margin: 32px 0 0;
}
.problem-section__pills {
  display: flex; flex-direction: column; gap: 14px;
}
.problem-section__pill {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 28px;
  border-radius: 14px 0 0 14px; /* hangs into the right rail */
  font-size: 1.05rem; font-weight: 600;
  color: #fff;
}
.problem-section__pill svg { flex-shrink: 0; }
.problem-section__pill--1 { background: #3D9B70; }
.problem-section__pill--2 { background: #3B82F6; }
.problem-section__pill--3 { background: #D94F4F; }
.problem-section__pill--4 { background: #F4923A; }

@media (max-width: 1024px) {
  .problem-section__grid { gap: 64px; }
}
@media (max-width: 768px) {
  .problem-section { padding: 80px 0; }
  .problem-section__grid { grid-template-columns: 1fr; gap: 40px; }
  .problem-section__pill { border-radius: 14px; }
}

/* ============================================================
   HOW IT WORKS — 3×2 feature grid. Single-pixel hairline lattice
   between cells via gap:1px on a bordered wrapper, rounded so the
   outer corners stay clean.
   ============================================================ */
.how-it-works { padding: 120px 0; }
.how-it-works h2 {
  font-size: clamp(1.5rem, 3vw, 1.889rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 48px;
}
.how-it-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.how-it-works__cell {
  background: var(--color-bg-subtle);
  padding: 32px;
}
.how-it-works__icon {
  margin-bottom: 16px;
  color: var(--color-accent);
}
.how-it-works__cell h3 {
  font-size: 1rem; font-weight: 700;
  margin-bottom: 8px;
}
.how-it-works__cell p {
  font-size: .88rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 1024px) { .how-it-works { padding: 80px 0; } }
@media (max-width: 900px)  { .how-it-works__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .how-it-works__grid { grid-template-columns: 1fr; } }

/* ============================================================
   BENTO — service overview. Two stacked grids:
     1. Primary (2 large cards, one .bento-card--featured with an
        accent border + green halo).
     2. Secondary (2 simpler cards, no icon, with a learn-more link).

   All surfaces, borders, text, and shadows route through tokens.
   Card radii are local one-off literals (24/20px) — not promoted
   to tokens per THEME-TOKENS.md ("only the repeating values").
   ============================================================ */
.bento { padding: 120px 0; text-align: center; }
.bento h2 {
  font-size: clamp(1.44rem, 2.8vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.bento-sub {
  max-width: 620px; margin: 0 auto 48px;
  font-size: calc(1.05rem - 2px);
  color: var(--color-text-muted);
}
.bento-primary-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 30px; margin-bottom: 30px;
}
.bento-secondary-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.bento-card { text-align: left; transition: box-shadow .3s; }
.bento-card--primary {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: 24px;
  padding: 40px;
}
.bento-card--primary:hover { box-shadow: var(--shadow-card); }
.bento-card--featured {
  border: 1.5px solid var(--color-accent);
  box-shadow: var(--shadow-feature);
}
.bento-card--featured:hover { box-shadow: var(--shadow-feature), var(--shadow-card); }

.bento-card__icon-box {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--color-bg-warm);
  color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.bento-card--primary h3 {
  font-size: 1.45rem; font-weight: 700;
  line-height: 1.2; margin-bottom: 10px;
  color: var(--color-text);
}
.bento-card__tagline {
  font-size: .92rem; line-height: 1.55;
  color: var(--color-text-muted);
  margin-bottom: 22px;
}
.bento-card__checklist {
  list-style: none; padding: 0; margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 9px;
}
.bento-card__checklist li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .88rem; line-height: 1.4;
  color: var(--color-text);
}
.bento-card__checklist li::before {
  content: '✓';
  color: var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.bento-card__divider {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: 22px 0;
}
.bento-card__templates {
  font-size: .76rem; line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: 24px;
}
.bento-card__ctas {
  display: flex; gap: 12px; flex-wrap: wrap;
}

.bento-card--secondary {
  background: var(--color-bg-subtle);
  border-radius: 20px;
  padding: 36px;
}
.bento-card--secondary:hover { box-shadow: var(--shadow-card-hover); }
.bento-card--secondary h3 {
  font-size: 1.1rem; font-weight: 700;
  line-height: 1.3; margin-bottom: 10px;
  color: var(--color-text);
}
.bento-card--secondary p {
  font-size: .88rem; line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.bento-card__link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .92rem; font-weight: 700;
  color: var(--color-text);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s;
}
.bento-card__link:hover { color: var(--color-accent); }

@media (max-width: 1024px) { .bento { padding: 80px 0; } }
@media (max-width: 900px)  {
  .bento-primary-grid,
  .bento-secondary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px)  {
  .bento-card--primary   { padding: 28px; }
  .bento-card--secondary { padding: 28px; }
}

/* .templates dark band lifted to style.css alongside the hero —
   shared with every service page. */

/* ============================================================
   WHY-EXPERT — "Why Word to LaTeX Conversion Needs an Expert."
   Two-part section: (1) two-col comparison with a 5-tile tool
   grid on the right (4 competitors + 1 wider Submission-ready
   tile), (2) 6-cell features-grid below.

   Naming: `.why-expert` for the section block to keep it
   distinct from `.expert-byline` (the service-page byline
   component). Tool tiles + features grid follow THEME-NAMING.md.
   ============================================================ */
.why-expert { padding: 120px 0; }
.why-expert__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}
.why-expert__top h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.089rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.why-expert__top p {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: 16px;
}
.why-expert__heading {
  font-size: clamp(1.3rem, 2.3vw, 1.689rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 48px;
}
.why-expert__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 36px;
  font-size: .92rem; font-weight: 600;
  color: var(--color-text);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s;
}
.why-expert__link:hover { color: var(--color-accent); }

/* ─── Tool comparison tiles ─── */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.tool-icon {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  border-radius: 10px;
  background: var(--color-bg-subtle);
  font-size: .75rem; font-weight: 600;
  color: var(--color-text-muted);
}
.tool-icon__mark {
  font-size: .9rem; font-weight: 700;
  color: var(--color-error);
}
.tool-ok {
  grid-column: span 2;
  flex-direction: column;
  align-items: flex-start; justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  background: var(--color-green-tint);
}
.tool-ok__logo { display: block; height: 28px; width: auto; }
.tool-ok__check {
  display: flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 600;
  color: var(--color-green);
}

/* .features-grid cluster lifted to global style.css — used on home's
   "everything you need in one place" band plus the ACM page's How It
   Works section, so it's no longer home-scoped. */

@media (max-width: 1024px) { .why-expert { padding: 80px 0; } }
@media (max-width: 900px) {
  .why-expert__top { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-ok   { grid-column: span 2; }
}