/* /cum-functioneaza, /pentru-gazde, /pentru-experti: the page top, the run of
   steps and the app figures. Sections, FAQ, close and footer come from site.css. */

/* ----------------------------------------------------------------- top -- */
.pg-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 31rem); gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
  padding-block: clamp(3rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem);
}
.pg-top .eyebrow + h1 { margin-top: var(--sc-3); }
.pg-top .pp-title { line-height: 1.08; } /* room for the comma under Ș and Ț */
.pg-top__actions { margin-top: var(--sc-6); display: flex; align-items: center; gap: var(--sc-5); flex-wrap: wrap; }

/* a raised app surface, like the landing's calendar and proof */
.app {
  position: relative; background: var(--sc-surface); border-radius: var(--sc-r-lg);
  padding: var(--sc-6) var(--sc-5) var(--sc-5); box-shadow: var(--sc-e3), var(--sc-edge);
}
.app__head { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.2; padding-right: 6rem; }

/* who does a step: you, Mophop or the Expert, one dot colour each */
.who { display: inline-flex; align-items: center; gap: 0.45em; font-size: var(--sc-t-xs); font-weight: 650; color: var(--sc-ink); }
.who::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
[data-who="tu"] { --dot: var(--sc-ink); }
[data-who="mophop"] { --dot: var(--sc-accent); }
[data-who="expert"] { --dot: var(--sage); }

.key { margin-top: var(--sc-4); display: grid; }
.key > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sc-3); align-items: baseline; padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline); }
.key dt { font-size: var(--sc-t-sm); }
.key dd { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* ---------------------------------------------------------- the steps -- */
/* the landing's time rail stood upright: one line, one dot per step */
.steps { position: relative; display: grid; gap: var(--sc-6); }
.steps::before { content: ""; position: absolute; left: 4px; top: 0.6rem; bottom: 0.6rem; width: 1px; background: color-mix(in oklab, var(--sc-ink) 14%, transparent); }
.steps li { position: relative; padding-left: 2rem; }
.steps li::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 9px; height: 9px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 4px var(--sc-canvas); }
.steps h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); line-height: 1.2; margin-top: var(--sc-1); }
.steps p { margin-top: var(--sc-2); color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; }
.steps .who { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.steps .who::before { display: none; }

.pp-sec .proof { justify-self: start; margin-top: var(--sc-7); }
/* the head stays in view while its long column of steps scrolls past, like the landing's Expert act */
.pp-sec__head { position: sticky; top: calc(var(--bar-h) + 2rem); }

/* --------------------------------------------------- Host: the agenda -- */
.agenda ol { margin-top: var(--sc-4); display: grid; }
.agenda li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--sc-3); align-items: center; padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline); }
.agenda__day { display: grid; justify-items: center; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.1; }
.agenda__day b { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); color: var(--sc-ink); }
.agenda__prop { font-weight: 650; font-size: var(--sc-t-sm); }
.agenda__times { margin-top: 0.15rem; display: flex; flex-wrap: wrap; gap: 0 0.4em; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.agenda__times span + span::before { content: "\2192"; margin-right: 0.4em; }
.agenda__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.3rem var(--sc-3); }
.agenda__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip { font-size: var(--sc-t-xs); font-weight: 650; padding: 0.2em 0.65em; border-radius: var(--sc-r-pill); white-space: nowrap; }
.chip--on { background: var(--sc-accent); color: var(--sc-accent-ink); }      /* coral: the Expert is coming */
.chip--act { background: var(--sc-ink); color: var(--sc-surface); }           /* dark: the Host must act */
.chip--soft { box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); color: var(--sc-ink-soft); }
.agenda__legend { margin-top: var(--sc-3); display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-4); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.agenda__legend span { display: inline-flex; align-items: center; gap: 0.4em; }
.agenda__legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--sc-accent); }
.agenda__legend span + span i { background: var(--sc-ink); }

/* -------------------------------------------------- Expert: the offer -- */
.offer__badges { margin-top: var(--sc-3); display: flex; flex-wrap: wrap; gap: 0.4rem; }
.offer__meta { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.offer__when { margin-top: var(--sc-1); font-size: var(--sc-t-sm); }
.offer__net { margin-top: var(--sc-5); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sc-3); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.offer__net b { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.offer__actions { margin-top: var(--sc-4); display: flex; gap: var(--sc-3); }
.offer__actions .btn { pointer-events: none; flex: 1; }

/* a money line: what a Curățenie pays */
.sum { margin-top: var(--sc-6); display: grid; max-width: 30rem; }
.sum > div { display: flex; justify-content: space-between; gap: var(--sc-4); padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); }
.sum dt { color: var(--sc-ink-soft); }
.sum dd { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum > div:last-child { border-bottom: 1px solid var(--sc-hairline); }

.pg-body .code { max-width: 26rem; }
.pg-body .code__digits { font-size: clamp(3.5rem, 2.4rem + 3vw, 5.5rem); }

/* body copy under a section head or beside it */
.pg-body > * + * { margin-top: var(--sc-5); }
.pg-body .facts { padding-top: 0; }

/* --------------------------------------------------------------- phones -- */
@media (max-width: 860px) {
  .pg-top { grid-template-columns: 1fr; gap: var(--sc-7); }
  .app { padding: var(--sc-5) var(--sc-4) var(--sc-4); }
  .pp-sec .proof { margin-top: var(--sc-6); }
  .pp-sec__head { position: static; }
}
@media (max-width: 400px) {
  .agenda li { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .key > div { grid-template-columns: 1fr; gap: var(--sc-1); }
}