/* =========================================================
   RAQ.lk Cosmetics page additions (prototype)
   Builds on ../homepage/styles.css and ../medical-devices/service.css.
   No new colours: verified tokens only.
   ========================================================= */

/* ---------- Two-column section heading (aside + main) ---------- */
.lead-split { display: grid; gap: 32px; }
@media (min-width: 1000px) { .lead-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; } }
.lead-split .section-intro { margin-bottom: 0; }

/* ---------- Key dates band ---------- */
.dates-band { background: var(--white); border-bottom: 1px solid var(--line); padding: 32px 0; }
.dates-band__title { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); font-family: var(--font-body); margin-bottom: 16px; }
.dates { display: grid; gap: 0; border-top: 1px solid var(--ink-900); }
.dates li { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; line-height: 1.45; color: var(--ink-900); }
.dates time { font-family: var(--font-head); font-weight: 600; color: var(--green-700); }
@media (min-width: 900px) {
  .dates { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); border-top: 0; }
  .dates li { display: block; padding: 14px 20px 4px 0; border-bottom: 0; border-top: 2px solid var(--green-700); }
  .dates li + li { padding-left: 20px; border-left: 1px solid var(--line-soft); }
  .dates time { display: block; margin-bottom: 6px; }
}
.dates-band__note { font-size: 13.5px; color: var(--ink-500); margin: 14px 0 0; }

/* ---------- Audiences (Who we help) ---------- */
.audiences { display: grid; border-top: 1px solid var(--ink-900); }
.audience { padding: 24px 0; border-bottom: 1px solid var(--line); }
.audience__title { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.audience p { font-size: 16px; max-width: 46ch; }
@media (min-width: 760px) {
  .audiences { grid-template-columns: 1fr 1fr; }
  .audience:nth-child(odd) { padding-right: 36px; border-right: 1px solid var(--line); }
  .audience:nth-child(even) { padding-left: 36px; }
}

/* ---------- Route track (stage sequence) ---------- */
.track { display: grid; gap: 0; counter-reset: stage; }
.track__stage { position: relative; padding: 0 0 32px 52px; }
.track__stage::before {
  counter-increment: stage; content: counter(stage);
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 15px;
  color: var(--green-700); background: var(--white); border: 1.5px solid var(--green-700);
}
.track__stage::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 1.5px; background: var(--line); }
.track__stage:last-child { padding-bottom: 0; }
.track__stage:last-child::after { display: none; }
.track__label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 4px; }
.track__title { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.track__stage p { font-size: 16px; max-width: 52ch; }
.track__stage p + p { margin-top: 8px; }
@media (min-width: 1000px) {
  .track { grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
  .track__stage { padding: 52px 0 0; }
  .track__stage::after { left: 42px; right: -28px; top: 17px; bottom: auto; width: auto; height: 1.5px; }
  .track__stage p { max-width: 30ch; }
}
.section--warm .track__stage::before { background: var(--warm-50); }

.aside-note { margin-top: 40px; padding: 20px 24px; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--green-700); border-radius: var(--radius-sm); max-width: 820px; }
.aside-note h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.aside-note p { font-size: 15.5px; }
.aside-note p + p { margin-top: 8px; }
.section--warm .aside-note { background: var(--white); }

/* ---------- Three document groups ---------- */
@media (min-width: 1000px) { .docgroups--three { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

/* ---------- Formulation, ingredients and claims ---------- */
.formula { display: grid; gap: 48px; }
@media (min-width: 1000px) { .formula { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; } }
.claim-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.claim-examples li { font-size: 14.5px; font-weight: 500; color: var(--ink-900); background: var(--warm-50); border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; }
.data-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 15px; }
.data-table caption { text-align: left; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); padding-bottom: 10px; }
.data-table th { text-align: left; font-size: 13.5px; font-weight: 600; color: var(--ink-700); padding: 12px 16px; border-bottom: 1px solid var(--ink-900); vertical-align: bottom; }
.data-table td, .data-table tbody th { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-900); vertical-align: top; line-height: 1.5; }
.data-table tbody th { font-weight: 600; font-size: 15px; color: var(--ink-900); }
.data-table tr:last-child td, .data-table tr:last-child th { border-bottom: 0; }
.table-note { font-size: 13.5px; color: var(--ink-500); margin: 12px 0 0; max-width: 62ch; }

/* ---------- Route comparison (stacks on small screens) ---------- */
.compare th[scope="col"]:not(:first-child) { color: var(--green-700); font-family: var(--font-head); font-size: 16px; }
.compare tbody th { width: 24%; }
@media (max-width: 759px) {
  .compare, .compare tbody, .compare tr, .compare td, .compare tbody th { display: block; width: 100%; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tr { border-bottom: 1px solid var(--ink-900); padding: 6px 0 10px; }
  .compare tr:last-child { border-bottom: 0; }
  .compare tbody th { border-bottom: 0; padding-bottom: 4px; }
  .compare td { border-bottom: 0; padding-top: 6px; padding-bottom: 6px; }
  .compare td::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-700); margin-bottom: 2px; }
}

/* ---------- After registration: four items ---------- */
@media (min-width: 900px) {
  .after--four { grid-template-columns: 1fr 1fr; }
  .after--four .after__item { padding: 32px 32px 32px 0; border-left: 0; }
  .after--four .after__item:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--line); }
}
@media (min-width: 1200px) {
  .after--four { grid-template-columns: repeat(4, 1fr); }
  .after--four .after__item { padding: 32px 28px 32px 0; }
  .after--four .after__item + .after__item { padding-left: 28px; border-left: 1px solid var(--line); }
}
.after--four { margin-bottom: 0; }

/* Two-column layout used by Problems and FAQ */
.split { display: grid; gap: 32px; }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; } }