/* =========================================================
   Variation E (index-e.html), layered on variation-d.css.
   D with the design checklist applied. Same copy, photos, colours and fonts.
   - Reading text at 16–17px with a looser line height.
   - The five "Inside" cards become a plain list next to the tablet; no pill tags.
   - On desktop, section headlines sit left and content reads left-aligned
     (headline column + content column), instead of everything centred.
   - "My favorite" is a small plain label, not an uppercase pill.
   - Spacing groups: tight inside a block, roomy between sections.
   ========================================================= */

.ve {
  --vb-text-size: 16px;
  --ve-lede: 17px;
}
.ve body, body.ve { line-height: 1.6; }

/* ---------- Reading sizes ---------- */
.ve .vb-lede { font-size: var(--ve-lede); line-height: 1.6; max-width: 31rem; }
.ve .vd-ease { font-size: 14px; }
.ve .vd-for__list li,
.ve #inside-title .vc-l2 { font-size: 17px; line-height: 1.6; }
.ve .vb-steps p, .ve .vb-about__text p:not(.vb-sign), .ve .vb-faq details p, .ve .vb-checks li { font-size: 16px; line-height: 1.6; }

/* ---------- Section headers: left-aligned ---------- */
.ve-head, .ve .ve-head .vc-l2, .ve #inside-title .vc-l2 { text-align: left; }
.ve-head .vc-l1, .ve-head .vc-l2 { margin-left: 0; margin-right: 0; max-width: 16em; }
.ve-head .vc-l2 { max-width: 30rem; }

/* headline column + content column (This is for you if, Questions) */
.ve-split { display: grid; gap: var(--s5); }
.ve-split .vc-title .vc-l1 { max-width: 12em; }
.ve .ve-split .vd-for__list { margin: 0; gap: var(--s3); }
.ve .ve-split .vd-for__list li { text-align: left; }
.ve .ve-split .vb-faq { margin-top: 0; }

/* ---------- Inside: tablet beside a plain list ---------- */
.ve-inside { display: grid; gap: var(--s7); margin-top: var(--s7); }
.ve .ve-inside .vc-book { margin: 0; }
.ve-list { margin: 0; border-top: 1px solid var(--vb-text); }
.ve-list > div { padding: var(--s5) 0; border-bottom: 1px solid var(--vb-border); }
.ve-list dt { font: 600 18px/1.35 var(--sans); color: var(--vb-text); }
.ve-list dd { margin: var(--s2) 0 0; max-width: 34rem; font-size: 16px; line-height: 1.6; color: var(--vb-body); }
.ve .ve-inside__list .vc-cta { margin-top: var(--s6); }

/* ---------- Steps: left-aligned header ---------- */
.ve .vb-steps { margin-top: var(--s7); }

/* ---------- About: photo beside the letter ---------- */
.ve-about { display: grid; gap: var(--s6); }
.ve-about .vb-about__photo img { max-width: 100%; }
.ve-about .vb-about__text .vc-title { margin-bottom: var(--s5); }
.ve-about .vb-about__text .vc-l1 { max-width: 12em; }

/* ---------- Offer: what you get beside the choice ---------- */
.ve-offer__grid { display: grid; gap: var(--s6); margin-top: var(--s6); }
.ve-offer__grid .vb-checks { border-top: 1px solid var(--vb-text); }
.ve .ve-offer__buy .vd-options { margin-top: 0; }
.ve .ve-offer__buy .vb-btn { width: 100%; margin-top: var(--s5); }
.ve-fav { display: block; margin-bottom: var(--s1); font: 600 13px/1.3 var(--sans); color: var(--vb-muted); }
.ve .vd-option { padding: var(--s5); }

/* ---------- Phones ---------- */
@media (max-width: 899px) {
  .ve .ve-inside__list .vc-cta { width: 100%; }
  .ve-head .vc-l1, .ve-head .vc-l2 { max-width: none; }
}

/* ---------- Desktop: two columns ---------- */
@media (min-width: 900px) {
  .ve-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
  .ve .vd-for .ve-split { align-items: center; }

  .ve-inside { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
  .ve .ve-inside .vc-book { position: sticky; top: 112px; }

  .ve-about { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: center; }

  .ve-offer__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: start; }
}