/* ============================================================================
   Long-form pages: the blog, the "Dara vs …" comparisons, the FAQ pages and
   about.html. Loaded after dara.css, which owns the tokens, the type and the
   chrome (nav, footer, buttons, FAQ rows, tables, final CTA).
   ============================================================================ */

.article-container { width: min(780px, calc(100% - 48px)); margin-inline: auto; }
.container-wide    { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

/* --------------------------------------------------------- page headers --- */
.breadcrumb,
.breadcrumbs {
  color: var(--text-muted);
  font-size: 13px;
}
.breadcrumb { margin-bottom: 22px; }
.breadcrumbs { padding: 16px 0 0; }
.breadcrumb .sep,
.breadcrumbs .sep { margin: 0 6px; opacity: 0.55; }
.breadcrumb a,
.breadcrumbs a { color: var(--text-muted); text-decoration: none; transition: color 0.15s ease; }
.breadcrumb a:hover,
.breadcrumbs a:hover { color: var(--text-primary); }

.page-header  { padding: 60px 0 0; }
.page-header h1 { margin-bottom: 16px; }
.page-header p  { max-width: 600px; margin: 0; font-size: 18px; }

.article-header { padding: 60px 0 44px; border-bottom: 1px solid var(--border-color); }
.article-header .eyebrow { margin-bottom: 18px; }
.article-header h1 { margin-bottom: 22px; max-width: 860px; }
.article-header .lead { max-width: 680px; margin: 0; color: var(--text-secondary); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; }

.article-hero { padding: 44px 0 0; }
.article-hero .eyebrow { margin-bottom: 16px; }
.article-hero h1 { margin-bottom: 18px; }

.about-hero { padding: 72px 0 44px; }
.about-hero .eyebrow { margin-bottom: 14px; }
.about-hero h1 { margin-bottom: 22px; }
.about-hero p { max-width: 640px; font-size: clamp(17px, 1.7vw, 20px); }
.about-section { padding: 44px 0; border-top: 1px solid var(--border-color); }
.about-section h2 { margin-bottom: 18px; }
.about-section p { max-width: 680px; font-size: 17px; line-height: 1.65; }

.blog-hero { padding: 72px 0 36px; }
.blog-hero h1 { margin: 10px 0 8px; }
.blog-hero p { max-width: 560px; color: var(--text-secondary); font-size: 17px; }

.article-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  color: var(--text-muted);
  font-size: 13px;
}
.article-meta .pip {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
  opacity: 0.5;
}

.section-label {
  margin: 36px 0 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- article body --- */
.article-body { max-width: 780px; padding: 44px 0 0; }
.article-body p { margin: 0 0 16px; font-size: 17px; line-height: 1.75; }
.article-body h2 { margin: 52px 0 18px; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { margin: 34px 0 12px; }
.article-body strong { color: var(--text-primary); font-weight: 700; }
.article-body a,
article a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover,
article a:hover { text-decoration-thickness: 2px; }
article p { font-size: 17px; line-height: 1.75; margin: 0 0 16px; }
article strong { color: var(--text-primary); font-weight: 700; }

/* A list marker is drawn beside the text, never as a flex sibling of it:
   `display: flex` on an <li> turns every child ELEMENT into its own flex item,
   so `<li><b>249 ₽</b> for the first week</li>` splits in two and the line can
   no longer wrap (landing/AGENTS.md → Layout invariants). Logical offsets, so
   landing/ar mirrors without an override. */
.article-body ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  color: var(--text-secondary);
}
.article-body ul li {
  position: relative;
  margin-bottom: 10px;
  padding-inline-start: 22px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.65;
}
.article-body ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--text-muted);
}
.article-body ol {
  margin: 0 0 20px;
  padding-inline-start: 24px;
  color: var(--text-secondary);
}
.article-body ol li { margin-bottom: 10px; font-size: 16px; line-height: 1.65; }
.article-body ol li::marker { color: var(--text-muted); font-weight: 700; }
.article-body li { font-size: 16px; }

/* The one claim the page most wants quoted, in a card of its own. */
.direct-answer {
  margin: 0 0 1.3em;
  padding: 26px 30px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.direct-answer p { margin: 0; color: var(--text-primary); font-size: 18px; line-height: 1.6; }

.disclosure {
  margin: 28px 0 0;
  padding: 18px 24px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.disclosure strong { color: var(--text-secondary); font-weight: 700; }

.toc {
  margin: 30px 0;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.toc h4 {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.toc ol { display: grid; gap: 6px; margin: 0; padding-inline-start: 20px; }
.toc li { color: var(--text-secondary); font-size: 15px; }
.toc li::marker { color: var(--text-muted); }
.toc a { color: var(--text-primary); text-decoration: none; }
.toc a:hover { text-decoration: underline; text-underline-offset: 3px; }

.author-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 2.2em 0 0;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.author-box .ava {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: var(--on-accent);
  font-size: 18px;
  font-weight: 700;
}
.author-box p { margin: 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; }
.author-box strong { color: var(--text-primary); }

/* ---------------------------------------------------------------- FAQ --- */
.faq { padding: 80px 0; }
@media (max-width: 720px) { .faq { padding: 56px 0; } }
.faq-page { padding: 44px 0 80px; }
.faq-sections { padding: 0 0 80px; }
.faq-section { margin-bottom: 52px; }
.faq-section:last-child { margin-bottom: 0; }
.faq-section-title {
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.faq-item .answer {
  margin: 0;
  padding: 0 0 24px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}
.faq-item .answer a,
.faq-item .faq-answer a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* One page ships its own chevron span inside the summary instead of using the
   row's ::after marker. Give it the same behaviour and hide the duplicate. */
details.faq-item summary .chevron { display: none; }

.article-faq { margin-top: 24px; }
.article-faq-item { padding: 22px 0; border-bottom: 1px solid var(--border-color); }
.article-faq-item:first-child { border-top: 1px solid var(--border-color); }
.article-faq-item h3 { margin: 0 0 8px; font-size: 17px; }
.article-faq-item p { margin: 0; color: var(--text-secondary); font-size: 16px; line-height: 1.6; }

/* --------------------------------------------------------------- tables --- */
.compare-wrap { overflow-x: auto; margin: 28px 0 32px; -webkit-overflow-scrolling: touch; }
.compare-table thead th,
.price-table thead th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Our own column is the ink one — the page has no second accent to spend. */
.compare-table thead th.col-dara,
.price-table thead th.col-dara,
.price-table th.col-dara { color: var(--text-primary); }
.compare-table .yes,
.price-table .yes { color: var(--badge-green); font-weight: 700; }
.compare-table .no,
.price-table .no { color: var(--text-muted); }
.compare-table .partial { color: var(--accent-warning); font-weight: 600; }
.compare-table tr.highlight-row,
.compare-table .highlight-col { background: var(--bg-secondary); }
.compare-table tr.highlight-row td:first-child,
.price-table .col-dara td:first-child,
.price-table tr.highlight-row td:first-child { color: var(--text-primary); }

/* ------------------------------------------------------------- verdicts --- */
.verdict-box {
  margin: 32px 0;
  padding: 30px 34px;
  border-radius: var(--radius-lg);
  background:
      radial-gradient(120% 80% at 82% 0%, rgba(255, 255, 255, 0.12), transparent 62%),
      var(--accent-primary);
  color: var(--on-accent);
  box-shadow: var(--shadow-md);
}
.verdict-box p { margin: 0; color: rgba(255, 255, 255, 0.82); font-size: 18px; line-height: 1.5; }
.verdict-box strong { color: #FFFFFF; }

.decision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0 32px; }
@media (max-width: 720px) { .decision-grid { grid-template-columns: minmax(0, 1fr); } }
.decision-card {
  min-width: 0;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.decision-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.decision-card .card-label {
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.decision-card h3,
.decision-card h4 { margin: 0 0 8px; font-size: 19px; }
.decision-card p { margin: 0; color: var(--text-secondary); font-size: 15px; }
.decision-card.highlight {
  background:
      radial-gradient(120% 80% at 82% 0%, rgba(255, 255, 255, 0.12), transparent 62%),
      var(--accent-primary);
  box-shadow: var(--shadow-md);
}
.decision-card.highlight .card-label { color: rgba(255, 255, 255, 0.5); }
.decision-card.highlight h3,
.decision-card.highlight h4 { color: #FFFFFF; }
.decision-card.highlight p { color: rgba(255, 255, 255, 0.78); }

/* ---------------------------------------------------------- app reviews --- */
.app-review {
  margin: 32px 0;
  padding: 30px 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.app-review:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.app-review h3 { margin: 0 0 8px; }
.app-review .app-tagline {
  display: block;
  margin-bottom: 16px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.app-review .pros-cons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 20px 0; }
@media (max-width: 560px) { .app-review .pros-cons { grid-template-columns: minmax(0, 1fr); } }
.app-review .pricing-line {
  margin: 16px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 13.5px;
}
.app-review .verdict { margin: 0; color: var(--text-primary); font-size: 15.5px; font-weight: 600; }

.pros-cons h4 {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pros-cons ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pros-cons li {
  position: relative;
  padding-inline-start: 18px;
  color: var(--text-secondary);
  font-size: 15px;
}
.pros-cons .strengths li::before,
.pros-cons .weaknesses li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-weight: 700;
}
.pros-cons .strengths li::before { content: "+"; color: var(--badge-green); }
.pros-cons .weaknesses li::before { content: "\2212"; color: var(--accent-danger); }

/* ---------------------------------------------------------- card grids --- */
.format-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 32px; }
@media (max-width: 860px) { .format-grid { grid-template-columns: minmax(0, 1fr); } }
.format-card {
  min-width: 0;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.format-card .rating {
  display: block;
  margin-bottom: 12px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.format-card h4 { margin: 0 0 10px; font-size: 20px; }
.format-card p { margin: 0; color: var(--text-secondary); font-size: 14.5px; }
.format-card.best {
  background:
      radial-gradient(120% 80% at 82% 0%, rgba(255, 255, 255, 0.12), transparent 62%),
      var(--accent-primary);
  box-shadow: var(--shadow-md);
}
.format-card.best .rating { color: rgba(255, 255, 255, 0.5); }
.format-card.best h4 { color: #FFFFFF; }
.format-card.best p { color: rgba(255, 255, 255, 0.78); }

.fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 28px; }
@media (max-width: 720px) { .fit-grid { grid-template-columns: minmax(0, 1fr); } }
.fit-cell {
  min-width: 0;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.fit-cell h3 {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fit-cell ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fit-cell li {
  position: relative;
  margin: 0;
  padding-inline-start: 22px;
  color: var(--text-secondary);
  font-size: 15px;
}
.fit-cell li::before { content: none; }
.fit-cell.yes li::before,
.fit-cell.no li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-weight: 700;
}
.fit-cell.yes li::before { content: "\2713"; color: var(--badge-green); }
.fit-cell.no li::before { content: "\2717"; color: var(--accent-danger); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin: 26px 0 10px; }
.post-card {
  display: block;
  min-width: 0;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card .kicker {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post-card h3 { margin: 10px 0 8px; font-size: 21px; line-height: 1.25; }
.post-card p { margin: 0 0 14px; color: var(--text-secondary); font-size: 14.5px; line-height: 1.55; }
.post-card .meta { color: var(--text-muted); font-size: 12px; }

/* --------------------------------------------------------- day plan / list --- */
.day-plan { display: grid; gap: 12px; margin: 24px 0 1.3em; }
.day-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
/* The app's icon plate with the number in it — the same object the home page's
   steps use. */
.day-card .day-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.day-card .day-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.day-card h3 { margin: 0 0 4px; font-size: 17px; }
.day-card p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }

.checklist { margin: 24px 0 1.3em; padding: 0; list-style: none; }
.checklist li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 16px;
}
.checklist li:first-child { border-top: 1px solid var(--border-color); }
.checklist li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  color: var(--badge-green);
  font-weight: 700;
}
[dir="rtl"] .checklist li { padding: 10px 26px 10px 0; }

/* ------------------------------------------------------------ chat demo ---
   Two bubbles, drawn the way the product's transcript draws them: Dara on a
   white card, the learner on the peach `--hero`. */
.chat-demo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0 28px;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
}
.chat-label {
  margin-bottom: -8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chat-label.student-label { align-self: flex-end; }
.chat-bubble {
  max-width: 85%;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 15.5px;
  line-height: 1.45;
}
.chat-bubble.dara {
  align-self: flex-start;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  border-end-start-radius: 6px;
}
.chat-bubble.student {
  align-self: flex-end;
  background: var(--hero);
  color: var(--text-primary);
  border-end-end-radius: 6px;
}
.chat-bubble .correction { color: var(--accent-danger); font-weight: 600; }
.chat-bubble .praise { color: var(--badge-green); font-weight: 600; }

/* ---------------------------------------------------------- article CTA --- */
/* Same closing surface as .final-cta, and for the same reason: the article
   above it ends on flat cream, which is this gradient's first stop, so the
   page continues into the CTA instead of hitting a rule. */
.article-cta {
  padding: 96px 0 104px;
  text-align: center;
  background: linear-gradient(180deg, #F7F3EB 0%, #F9EBDE 100%);
}
.article-cta h2 { margin-bottom: 20px; }
.article-cta p { max-width: 500px; margin: 0 auto 30px; font-size: 19px; }
.article-cta .cta-row { justify-content: center; }
.article-cta .hero-meta,
.final-cta .hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.article-cta .hero-meta b,
.final-cta .hero-meta b { color: var(--text-primary); font-weight: 700; }

/* ------------------------------------------------------------ doc footer --- */
footer.doc { padding: 48px 0 32px; background: var(--accent-primary); color: rgba(255, 255, 255, 0.66); }
footer.doc .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
  font-size: 13px;
}
footer.doc a { color: rgba(255, 255, 255, 0.66); text-decoration: none; transition: color 0.15s ease; }
footer.doc a:hover { color: #FFFFFF; }