/* ============================================================
   Service chunk — loaded on every Option A pasted-HTML service
   page (Word→LaTeX, PDF→LaTeX, DOCX→LaTeX, Elsevier, Springer,
   and future landing pages mapped to the `service` chunk in
   inc/enqueue.php).

   Workflow: editors paste body HTML into the Classic Editor of a
   page using the Full Width template. This stylesheet provides
   the shared component CSS so the pasted markup renders. Per-page
   one-off tweaks belong in the tll_custom_css meta box, NOT here.

   Components are grouped by source page in case future trim-downs
   want to drop unused clusters per-page. All colours route through
   :root tokens (THEME-TOKENS.md); decorative rgba() literals stay
   inline only where no semantic token matches.

   Globally-available primitives reused here (declared in style.css):
   .pricing-card cluster, .delivery-tier cluster, .service-cta-band,
   .testimonials, .flag-strip, .cta-band, .faq-item, .btn, .section.
   ============================================================ */

/* ─── SERVICE BULLETS (.sb cluster from word-to-latex etc.) ───
   Sidebar block on hero: a 2-col stats grid + a deliverables list +
   a guarantee callout, all stacked. Sticky in the source design. */
.service-bullets {
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 16px;
}
.service-bullets__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.service-bullets__stat {
  padding: 18px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  text-align: center;
}
.service-bullets__stat-num {
  font-size: 1.6rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2;
  color: var(--color-text);
}
.service-bullets__stat-label {
  margin-top: 2px;
  font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted);
}

.service-bullets__deliverables {
  padding: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
}
.service-bullets__deliverable-label {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.service-bullets__deliverable {
  display: flex; justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: .82rem;
}
.service-bullets__deliverable:last-child { border-bottom: none; }
.service-bullets__deliverable span:first-child { color: var(--color-text-muted); }
.service-bullets__deliverable span:last-child  { color: var(--color-text); font-weight: 600; }
.service-bullets__deliverable-result {
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: .82rem; font-weight: 600;
  color: var(--color-green);
}

.service-bullets__guarantee {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
  background: var(--color-bg-sand);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
}
.service-bullets__guarantee-text {
  font-size: .82rem; line-height: 1.5;
  color: var(--color-text-muted);
}
.service-bullets__guarantee-text strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-text);
}

@media (max-width: 900px) {
  .service-bullets { position: static; }
}

/* ─── DELIVERABLE CARD (.dc → .deliverable-card) ───
   Standalone card used in the deliverables grid on pdf-to-latex
   and elsevier-latex-formatting pages. Supports .span-2 for full
   width via the existing utility. */
.deliverable-card {
  padding: 28px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: 16px;
  transition: box-shadow .3s;
}
.deliverable-card:hover { box-shadow: var(--shadow-card-hover); }
.deliverable-card h3 {
  margin-bottom: 8px;
  font-size: 1.05rem; font-weight: 700;
  color: var(--color-text);
}
.deliverable-card p {
  margin: 0;
  font-size: .88rem; line-height: 1.6;
  color: var(--color-text-muted);
}
.deliverable-card code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,.06);
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: .82em;
}

/* ─── COMPARISON TABLE (.cmp cluster) ───
   "Us vs. Pandoc vs. AI" table used on service pages. Horizontal
   scroll on narrow viewports; sticky first column inside the
   scroll wrapper. */
.comparison { padding: 80px 0; }
.comparison__sub {
  max-width: 800px;
  margin-bottom: 40px;
  font-size: .88rem;
  color: var(--color-text-muted);
}
.comparison__table-wrap {
  margin-bottom: 24px;
  overflow-x: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.comparison__table {
  width: 100%;
  min-width: 680px;
  background: var(--color-bg);
  border-collapse: collapse;
}
.comparison__table th {
  padding: 14px 16px;
  text-align: left;
  background: var(--color-bg-sand);
  border-bottom: 2px solid var(--color-border-subtle);
  font-size: .8rem; font-weight: 600;
  color: var(--color-text);
}
.comparison__table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: .83rem;
  color: var(--color-text-muted);
}
.comparison__table tr:last-child td { border-bottom: none; }
.comparison__table tbody tr:nth-child(even) { background: rgba(0,0,0,.01); }
.comparison__table td:first-child {
  color: var(--color-text);
  font-weight: 600;
}
.comparison__highlight { background: var(--color-green-tint) !important; }
.comparison__highlight td {
  color: var(--color-green-strong) !important;
  font-weight: 600 !important;
}
.comparison__note {
  font-size: .85rem;
  color: var(--color-text-muted);
}

/* ─── TIP LIST (.tl-* → .tip-list*) ───
   List of tips with an optional decorative note block per item. */
.tip-list { margin-top: 28px; }
.tip-list__item {
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.tip-list__item:last-child { padding-bottom: 0; border-bottom: none; }
.tip-list__item h3 {
  margin-bottom: 10px;
  font-size: 1rem; font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}
.tip-list__item > p {
  margin-bottom: .75rem;
  font-size: .88rem; line-height: 1.7;
  color: var(--color-text-muted);
}
.tip-list__item > p:last-of-type { margin-bottom: 0; }
.tip-list__note {
  margin-top: 14px;
  padding: 16px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-left: 3px solid var(--color-border-subtle);
  border-radius: 10px;
}
.tip-list__note p {
  margin: 0;
  font-size: .8rem; line-height: 1.75;
  color: var(--color-text-muted);
}
.tip-list__note code {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,.06);
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: .8em;
}

/* ─── GOTCHAS (.elist / .el-list → .gotchas cluster) ───
   "Elsevier/Springer submission gotchas" block on service pages —
   section heading + sub + flat list of items. */
.gotchas { padding: 120px 0; }
.gotchas h2 {
  margin-bottom: 12px;
  font-size: clamp(1.5rem, 3vw, 1.889rem);
  font-weight: 600;
  letter-spacing: -.02em;
}
.gotchas__sub {
  max-width: 720px;
  margin-bottom: 40px;
  font-size: .88rem;
  color: var(--color-text-muted);
}
.gotchas__list { margin-bottom: 40px; }
.gotchas__item {
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: .95rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}
.gotchas__item:last-child { border-bottom: none; }
.gotchas__item strong { color: var(--color-text); }
.gotchas__item code {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(0,0,0,.06);
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: .82em;
}

/* ─── .gotchas--inline modifier ───
   Default .gotchas has 120px bottom padding + 40px list bottom margin
   so it can sit cleanly as the closing section before the auto-appended
   service-footer (elsevier/springer). On pages where gotchas is mid-
   stream (ACM/arXiv/MDPI: more sections follow), opt into the tighter
   inline variant. The :not(:last-child) rule preserves a 24px gap when
   a .gotchas__footer paragraph follows the list. */
.gotchas--inline { padding-bottom: 60px; }
.gotchas--inline .gotchas__list { margin-bottom: 0; }
.gotchas--inline .gotchas__list:not(:last-child) { margin-bottom: 24px; }

/* ─── .gotchas__footer ───
   Optional footnote paragraph below the .gotchas__list — recap or
   "send us your error log" CTA. Currently used on arXiv only; safe
   to reuse on any service page. */
.gotchas__footer {
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.gotchas__footer a {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}
.gotchas__footer a:hover { color: var(--color-accent-hover); }

@media (max-width: 1024px) { .gotchas { padding: 80px 0; } }

/* ─── EXPERT BYLINE (.expert cluster on service pages) ───
   Author-credentials block above the comparison/features region.
   Distinct from the homepage `.why-expert` section. */
.expert-byline { padding: 80px 0 0; }
.expert-byline__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}
.expert-byline__top h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.expert-byline__top p {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.expert-byline__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;
}
.expert-byline__link:hover { color: var(--color-accent); }

.expert-byline__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--color-bg-warm);
  overflow: hidden;
}
.expert-byline__name { font-size: 1rem; font-weight: 700; color: var(--color-text); }
.expert-byline__role { font-size: .85rem; color: var(--color-text-muted); }

@media (max-width: 900px) {
  .expert-byline__top { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── SERVICE INTRO (.why → .service-intro) ───
   Section heading + intro copy + sticky .service-bullets sidebar.
   Source uses bare .why; renamed to .service-intro to disambiguate
   from home's .why-expert (which has a tool-grid instead of a
   sidebar). The .insight callout inside the copy is global. */
.service-intro { padding: 120px 0 80px; }
.service-intro__grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: 80px;
  align-items: start;
}
.service-intro__text h2 {
  margin: 0 0 24px;
  font-size: clamp(1.675rem, 3.3vw, 2.089rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.service-intro__text p {
  margin: 0 0 18px;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}
.service-intro__text p:last-child { margin-bottom: 0; }
.service-intro__text a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.service-intro__text a:hover { color: var(--color-accent); }
.service-intro__text code {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,.06);
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: .85em;
}
.service-intro__cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 56px;
  padding: 24px 28px;
  background: var(--color-bg-sand);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.service-intro__cta p {
  margin: 0;
  font-size: .94rem;
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .service-intro { padding: 80px 0 60px; }
  .service-intro__grid { grid-template-columns: 1fr; gap: 48px; }
}

/* ─── DELIVERABLES (.deliv → .deliverables) ───
   "What our service delivers" — a 3-col grid of .deliverable-card
   above an optional .feature-pkg file-package callout. */
.deliverables { padding: 80px 0; }
.deliverables h2 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3vw, 1.889rem);
  font-weight: 600;
  letter-spacing: -.02em;
}
.deliverables__sub {
  max-width: 760px;
  margin: 0 0 32px;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.deliverables h2 + .deliverables__grid { margin-top: 32px; }
.deliverables__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 900px) { .deliverables__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .deliverables__grid { grid-template-columns: 1fr; } }

/* File-package list under the deliverables grid */
.feature-pkg {
  padding: 32px;
  background: var(--color-bg-sand);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.feature-pkg h3 {
  margin: 0 0 8px;
  font-size: 1.05rem; font-weight: 700;
  color: var(--color-text);
}
.feature-pkg__desc {
  margin: 0 0 16px;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.feature-pkg__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
}
.feature-pkg__list li {
  position: relative;
  padding-left: 22px;
  font-size: .92rem; line-height: 1.55;
  color: var(--color-text-muted);
}
.feature-pkg__list li::before {
  content: "";
  position: absolute; left: 0; top: .45em;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-green-tint-2);
  box-shadow: inset 0 0 0 3px var(--color-green);
}
@media (max-width: 600px) { .feature-pkg__list { grid-template-columns: 1fr; } }

/* ─── ADDON STRIP (.addon-strip / .addon-chip--N) ───
   Horizontal pill row of small add-on offers below the pricing
   block on service pages (Rush 24h, Extra revision, OCR…).
   Distinct from pricing-page .addon-card (the larger 4-up grid).
   --N modifiers map to the same accent palette used elsewhere. */
.addon-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 28px;
}
.addon-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--color-bg-warm);
  font-size: .8rem;
}
.addon-chip__label { color: var(--color-text-muted); font-weight: 500; }
.addon-chip__price { color: var(--color-text); font-weight: 700; }

.addon-chip--1 { background: var(--color-bg-warm);     border-color: var(--color-border-subtle); }
.addon-chip--2 { background: var(--color-blue-tint);   border-color: var(--color-blue-tint-2); }
.addon-chip--2 .addon-chip__label,
.addon-chip--2 .addon-chip__price { color: var(--color-blue); }
.addon-chip--3 { background: var(--color-green-tint);  border-color: var(--color-green-tint-2); }
.addon-chip--3 .addon-chip__label,
.addon-chip--3 .addon-chip__price { color: var(--color-green-strong); }
.addon-chip--4 { background: var(--color-purple-tint); border-color: var(--color-purple-tint-2); }
.addon-chip--4 .addon-chip__label,
.addon-chip--4 .addon-chip__price { color: var(--color-purple-strong); }
.addon-chip--5 { background: var(--color-accent-tint); border-color: rgba(191,100,56,.15); }
.addon-chip--5 .addon-chip__label,
.addon-chip--5 .addon-chip__price { color: var(--color-accent-strong); }

/* ─── AUDIENCE LIST ───
   "Who This Is For" arrow-prefix list section. Used on the ACM,
   arXiv, and MDPI service pages (and reusable on any future
   service page that wants the same callout).

   Note on the arrow: literal "→" character rather than the CSS
   escape "\2192" so it survives WordPress's Custom CSS save filter
   (kept here in the theme chunk where it isn't filtered, but the
   convention stays consistent with the per-page guidance). */
.audience-section { padding: 80px 0; }
.audience-section h2 { margin: 0 0 24px; }
/* Sub-paragraph below the h2. Shared rule with .service-section__sub
   below — keep both selectors here so .audience-section keeps its
   own cluster boundary in BEM while the visual treatment stays a
   single source of truth. */
.audience-section__sub,
.service-section__sub {
  max-width: 760px;
  margin: 0 0 32px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.audience-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.audience-list li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: .95rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.audience-list li:last-child { border-bottom: 0; }
.audience-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 14px;
  color: var(--color-accent);
  font-weight: 700;
}
.audience-list code {
  font-size: .88em;
  background: var(--color-bg-warm);
  padding: 1px 6px;
  border-radius: 4px;
}

.audience-section__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
}
.audience-section__links a {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}
.audience-section__links a:hover { color: var(--color-accent-hover); }

@media (max-width: 768px) { .audience-section { padding: 60px 0; } }

/* ─── HOW IT WORKS SECTION ───
   Section wrapper around a global .features-grid used by service
   pages for the "how it works" step cards. Default features-grid
   is 3-col globally; this wrapper overrides to a clean 2×2 because
   service-page step blocks ship 4 cells (would render 3 + 1
   otherwise). Also handles the trailing CTA spacing and the
   contextual code-chip background inside cells.

   Subs: optional intro paragraph after the h2; .insight aside
   commonly used below the grid as a closing note. */
.how-it-works-section { padding: 80px 0; }
.how-it-works-section h2 { margin: 0 0 12px; }
.how-it-works-section__sub {
  max-width: 720px;
  margin: 0 0 32px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.how-it-works-section .features-grid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.how-it-works-section .btn-group { margin-top: 24px; }

@media (max-width: 768px) {
  .how-it-works-section { padding: 60px 0; }
  .how-it-works-section .features-grid { grid-template-columns: 1fr; }
}

/* ─── SERVICE SECTION ───
   Generic padded content-section wrapper for service-page sections
   that don't have their own named cluster (e.g. "What we handle",
   "Why us"). Provides the same 80px/60px vertical-padding rhythm and
   h2 typography as the other named service-page sections
   (.deliverables, .audience-section, .how-it-works-section, .gotchas)
   so pasted content stays visually consistent.

   Replaces the page-scoped .lts-handles / .lts-why / .tlf-why /
   .tfa-why / .tfu-why / .dfg-why family that shipped on five pages
   before promotion.

   Minimum markup:
     <section class="service-section"><div class="section">
       <h2>...</h2>
       <p class="service-section__sub">...</p>   (optional)
       ...
     </div></section>                                                  */
.service-section { padding: 80px 0; }
.service-section h2 {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 3vw, 1.889rem);
  font-weight: 600;
  letter-spacing: -.02em;
}
/* .service-section__sub shares its rule with .audience-section__sub —
   declared near the top of this file alongside .audience-section. */
@media (max-width: 1024px) { .service-section { padding: 60px 0; } }