/* ==========================================================================
   OVEXI — service and guide pages
   Loads after tokens.css. Shares the site header, footer, accordion and
   prose styles; adds the page-specific hero, feature list, plan grid and
   related-links band.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — copy left, price fact right
   -------------------------------------------------------------------------- */
.service-hero {
  padding-top: var(--s-7);
  padding-bottom: var(--section-y);
}
.service-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 4.5rem);
}
.service-hero-copy { min-width: 0; }
.service-hero-copy h1 { max-width: 18ch; }
.service-hero-copy .lead { margin-bottom: var(--s-6); max-width: 56ch; }

/* A plain bordered block, not a translucent glass panel. */
.service-price {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}
.service-price-label {
  margin-bottom: var(--s-2);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.service-price-value {
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.service-price-note { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Features — rule-separated columns, not three bordered cards
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
.feature-item { padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.feature-item h3 { margin-bottom: var(--s-2); font-size: 1.125rem; }
.feature-item p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Plans — price first, because that is what the visitor came to compare
   -------------------------------------------------------------------------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.plan-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
}
.plan-card--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.plan-card h3 { margin-bottom: var(--s-3); font-size: 1.125rem; }
.plan-price {
  margin-bottom: var(--s-3);
  color: var(--ink);
  font-size: clamp(1.625rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.plan-desc {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-sm);
}
.plan-card .rule-list { flex: 1; margin-bottom: var(--s-6); }
.plan-card .button { margin-top: auto; }

/* --------------------------------------------------------------------------
   FAQ — shares .accordion from tokens.css
   -------------------------------------------------------------------------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.faq-intro { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.faq-intro p:not(.eyebrow) { color: var(--ink-3); font-size: var(--fs-sm); }
.faq-intro a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Guide articles
   -------------------------------------------------------------------------- */
.guide-article { padding-top: var(--s-6); padding-bottom: var(--section-y-lg); }
.guide-head {
  max-width: var(--max-text);
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.guide-head h1 { font-size: clamp(2.125rem, 4.4vw, 3.25rem); }
.guide-head .lead { margin-bottom: 0; }
.guide-article .prose { font-size: 1.0625rem; }
.guide-article .prose h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.guide-article .prose .callout { margin-block: var(--s-5); font-size: 1rem; }

/* --------------------------------------------------------------------------
   Related links — a dark band of real link targets, not pill chips
   -------------------------------------------------------------------------- */
.related-section h2 { margin-bottom: var(--s-6); font-size: var(--fs-h3); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.related-link {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-5);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.related-link:hover { border-color: var(--accent-on-dark); background: var(--ink-surface-2); }
.related-link span {
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}
.related-link small { color: var(--on-dark-3); font-size: var(--fs-sm); }
.related-link::after {
  content: "→";
  color: var(--accent-on-dark);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .service-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .service-price { max-width: 30rem; }
  .plan-grid,
  .related-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-intro { position: static; }
}

/* --------------------------------------------------------------------------
   Guide visuals
   These are HTML, not images: selectable, translatable, responsive, readable
   by a screen reader, and they add no bytes to download.
   -------------------------------------------------------------------------- */

/* Worked cost example — the figures were buried in a paragraph. */
.cost-figure {
  margin-block: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}
.cost-figure caption,
.cost-figure-head {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
.cost-figure table { width: 100%; margin: 0; border-collapse: collapse; }
.cost-figure th,
.cost-figure td {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  text-align: left;
  vertical-align: baseline;
}
.cost-figure th { color: var(--ink); font-weight: 600; }
.cost-figure td:last-child,
.cost-figure th:last-child {
  color: var(--ink);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.cost-figure .cost-note { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 400; }
.cost-figure tfoot th,
.cost-figure tfoot td {
  border-bottom: 0;
  background: var(--accent-soft);
  font-size: var(--fs-body);
}
.cost-figure tfoot td:last-child { font-size: 1.25rem; letter-spacing: -0.02em; }
.cost-figure figcaption {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

/* What each maintenance level does and does not cover. */
.compare-figure { margin-block: var(--s-6); }
.compare-figure table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.compare-figure thead th {
  padding: 0 var(--s-4) var(--s-3);
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
.compare-figure tbody th,
.compare-figure tbody td {
  padding: var(--s-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare-figure tbody th {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  white-space: nowrap;
}
.compare-figure tbody th small {
  display: block;
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 400;
}
.compare-figure td { color: var(--ink-2); }
.compare-figure .not-covered { color: var(--ink-3); }

@media (max-width: 680px) {
  /* Stack each row into a labelled block — a 3-column matrix cannot hold. */
  .compare-figure thead { display: none; }
  .compare-figure tbody tr { display: block; padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
  .compare-figure tbody th,
  .compare-figure tbody td { display: block; padding: 0 0 var(--s-2); border: 0; }
  .compare-figure tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ink-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .cost-figure th, .cost-figure td { padding: var(--s-3) var(--s-4); }
}