/* Opmaak voor de vier productpagina's; de twee voorbeeldpagina's laden hem
   naast offerte.css. Oorspronkelijk voor /telefoonassistent/ en /postvak/.
   Leunt op site.css en offerte.css; hier staat alleen wat die twee niet hebben.
   Geen enkele kleurwaarde: alles komt uit het palet bovenin site.css, zodat een
   themawissel ook deze pagina's meeneemt. */

.op-blok {
  max-width: var(--maat);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 62px) var(--gutter);
  border-top: 1px solid var(--lijn);
}
.op-blok h2 {
  font-size: clamp(26px, 3.9vw, 42px);
  letter-spacing: -.025em;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  max-width: 22ch;
}

/* ---- de cijfers uit het onderzoek ---- */
.op-cijfers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
@media (max-width: 700px) { .op-cijfers { grid-template-columns: 1fr; } }
.op-getal {
  font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 600;
  color: var(--accent);
}
.op-onder {
  margin-top: 9px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--inkt-zacht);
  max-width: 26ch;
}
/* De herkomst hoort bij het cijfer, niet in een voetnoot onderaan de pagina. */
.op-bron {
  margin-top: clamp(22px, 3vw, 32px);
  font-size: 14px;
  line-height: 1.65;
  color: var(--inkt-vaag);
  max-width: 74ch;
}

/* ---- de opsomming, voor de pagina zonder cijfers ---- */
.op-punten {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
@media (max-width: 700px) { .op-punten { grid-template-columns: 1fr; } }
.op-punten--na { margin-top: clamp(26px, 3.4vw, 40px); }
.op-punten li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--inkt-zacht);
  padding-top: 15px;
  border-top: 2px solid var(--accent);
}

/* ---- voor en na ---- */
/* Op een telefoon scrollt de tabel in zijn eigen kader; de pagina zelf niet. */
.op-tabelwrap { overflow-x: auto; }
.op-tabel {
  width: 100%;
  border-collapse: collapse;
  min-width: 34rem;
}
.op-caption {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.op-tabel th, .op-tabel td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--lijn-fijn);
  font-size: 16px;
  line-height: 1.55;
}
.op-tabel thead th {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--inkt-vaag);
  font-weight: 700;
  border-bottom-color: var(--lijn);
}
.op-tabel tbody th {
  font-weight: 600;
  color: var(--inkt);
  width: 26%;
}
.op-tabel td { color: var(--inkt-vaag); }
.op-tabel td.op-straks { color: var(--inkt); }
.op-act {
  margin-top: clamp(18px, 2.4vw, 26px);
  font-size: 14px;
  line-height: 1.65;
  color: var(--inkt-vaag);
  max-width: 68ch;
}

/* ---- het slot ---- */
/* Eigen opmaak in plaats van .demo-slot uit offerte.css: die is voor een donkere
   pagina gemaakt (#a6abb2 op donker) en zou hier lichtgrijs op licht worden. */
.op-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 820px) { .op-slot { grid-template-columns: 1fr; gap: 30px; } }
.op-slot h2 { margin-bottom: 16px; }
.op-slot-tekst > p {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--inkt-zacht);
  max-width: 52ch;
}
.op-feiten { margin: 0; display: grid; gap: 20px; min-width: 15rem; }
.op-feiten dt {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inkt-vaag);
  font-weight: 700;
}
.op-feiten dd {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--inkt);
}


/* ---- het gedeelde productsjabloon (product-hoe.html, product-slot.html) ---- */
.prod-stappen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 36px);
  counter-reset: stap;
}
@media (max-width: 760px) { .prod-stappen { grid-template-columns: 1fr; } }
.prod-stappen li {
  counter-increment: stap;
  padding-top: 14px;
  border-top: 2px solid var(--accent);
}
.prod-stappen li::before {
  content: "0" counter(stap);
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  margin-bottom: 10px;
}
.prod-stappen b { display: block; font-size: 17px; letter-spacing: -.015em; line-height: 1.25; }
.prod-stappen p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--inkt-zacht); }

.prod-krijg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(30px, 5vw, 76px);
  align-items: start;
}
@media (max-width: 820px) { .prod-krijg { grid-template-columns: 1fr; gap: 30px; } }
.prod-lijst, .prod-punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prod-lijst li, .prod-punten li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.55; }
.prod-lijst li::before, .prod-punten li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.prod-lijst { max-width: 52ch; }
/* het vinkje komt per regel binnen, een tel na de regel zelf (--sc-delay uit tel.js) */
.prod-lijst li::before { transform: scale(0); transition: transform .35s var(--ease) calc(var(--sc-delay, 0ms) + 180ms); }
.prod-lijst li.sc-in::before, html:not(.sc-ready) .prod-lijst li::before { transform: none; }
@media (prefers-reduced-motion: reduce) { .prod-lijst li::before { transform: none !important; transition: none; } }
/* rechts: het traject als drie stippen aan een lijn */
.prod-traject { min-width: 15rem; max-width: 32ch; }
.prod-traject-kop { margin: 0 0 14px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-vaag); font-weight: 700; }
.prod-traject-stappen { list-style: none; margin: 0 0 18px; padding: 0; }
.prod-traject-stappen li { position: relative; padding: 0 0 18px 26px; }
.prod-traject-stappen li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.prod-traject-stappen li::after { content: ""; position: absolute; left: 7.5px; top: 18px; bottom: 0; width: 1px; background: var(--lijn); }
.prod-traject-stappen li:last-child::after { display: none; }
.prod-traject-stappen b { display: block; font-size: 16px; letter-spacing: -.015em; }
.prod-traject-stappen span { display: block; margin-top: 2px; font-size: 14px; color: var(--inkt-zacht); }
.prod-traject .tekstknop { font-size: 16px; }

.prod-faq { max-width: 760px; }

.prod-mail { margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--inkt-vaag); }
.prod-mail a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prod-punten { min-width: 15rem; font-size: 16px; }

/* ---- het voorbeeld op de twee oplossingspagina's: links het gesprek of de lijst,
   rechts wat het systeem ervan maakt ---- */
.op-voorbeeld-kop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.6vw, 30px); }
.op-voorbeeld-kop h2 { margin-bottom: 0; }
.op-voorbeeld-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
/* Op /telefoonassistent/ staat links de telefoon van de klant (tw-chat.html), rechts de intake. */
.op-voorbeeld-grid:has(.tw-chat) { grid-template-columns: 236px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 820px) { .op-voorbeeld-grid:has(.tw-chat) { grid-template-columns: 1fr; justify-items: center; } .op-voorbeeld-grid:has(.tw-chat) .intake { justify-self: stretch; } }
@media (max-width: 820px) { .op-voorbeeld-grid { grid-template-columns: 1fr; } }
.gesprek, .lijst { margin: 0; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal-groot); overflow: hidden; }
.gesprek .chat-kop, .lijst .chat-kop { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--lijn-fijn); font-size: 12px; font-weight: 600; color: var(--inkt-vaag); letter-spacing: .02em; }
.gesprek-regles, .gesprek-regels { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 12px; }
.gesprek-regels li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.5; }
.gesprek-regels b { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding-top: 3px; color: var(--inkt-vaag); }
.gesprek-regels .van-assistent b { color: var(--accent); }
.gesprek-regels p { margin: 0; }
.gesprek-regels .van-beller p { color: var(--inkt-zacht); }
.intake { background: var(--accent-zacht); border-radius: var(--straal-groot); padding: clamp(16px, 2vw, 22px); }
.intake-kop { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.intake-velden { margin: 0; display: grid; gap: 9px; }
.intake-velden div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.45; }
.intake-velden dt { color: var(--inkt-vaag); }
.intake-velden dd { margin: 0; }
.intake-haast { font-weight: 700; }
.intake-bericht { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn); font-size: 14px; line-height: 1.55; color: var(--inkt-zacht); }
.intake-bericht b { color: var(--inkt); }
/* De melding zoals hij op het scherm van de vakman verschijnt: icoon, titel, tijd, tekst. */
.intake-melding { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; background: var(--vlak); border-radius: var(--straal-groot); box-shadow: var(--schaduw); font-size: 14px; line-height: 1.45; color: var(--inkt); }
.intake-melding-icoon { flex: none; width: 30px; height: 30px; border-radius: var(--straal); background: var(--inkt); color: var(--grond); display: grid; place-items: center; }
.intake-melding-icoon svg { width: 20px; height: 13px; }
.intake-melding-tekst { min-width: 0; }
.intake-melding-tekst b { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.intake-melding-tekst small { font-size: 12px; font-weight: 400; color: var(--inkt-vaag); }
/* De intake vult zich als hij in beeld komt: veld voor veld, dan de melding. Alleen
   binnenkomen; tel.js zet is-in. Zonder javascript (geen tel-ready) of met "minder
   beweging" staat alles er gewoon. */
html.tel-ready .intake-velden div, html.tel-ready .intake-melding { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .5s var(--ease), transform .5s var(--ease); }
html.tel-ready .intake.is-in .intake-velden div, html.tel-ready .intake.is-in .intake-melding { opacity: 1; transform: none; }
.intake.is-in .intake-velden div:nth-child(2) { transition-delay: .15s; }
.intake.is-in .intake-velden div:nth-child(3) { transition-delay: .3s; }
.intake.is-in .intake-velden div:nth-child(4) { transition-delay: .45s; }
.intake.is-in .intake-velden div:nth-child(5) { transition-delay: .6s; }
.intake.is-in .intake-melding { transition-delay: .95s; }
@media (prefers-reduced-motion: reduce) { html.tel-ready .intake-velden div, html.tel-ready .intake-melding { opacity: 1; transform: none; transition: none; } }
.lijst-rijen { list-style: none; margin: 0; padding: 0; }
.lijst-rijen li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "soort wie" "soort wat" "soort via"; column-gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--lijn-fijn); font-size: 14px; line-height: 1.45; }
.lijst-rijen li:last-child { border-bottom: 0; }
.lijst-rijen i { grid-area: soort; align-self: start; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt-vaag); border: 1px solid var(--lijn); border-radius: var(--straal); padding: 2px 7px; white-space: nowrap; }
.lijst-rijen .is-spoed i { color: var(--accent); border-color: var(--accent); background: var(--vlak); }
.lijst-rijen .is-spoed { background: var(--accent-zacht); }
.lijst-rijen b { grid-area: wie; font-weight: 600; }
.lijst-rijen span { grid-area: wat; color: var(--inkt-zacht); }
.lijst-rijen small { grid-area: via; font-size: 12px; color: var(--inkt-vaag); margin-top: 2px; }
.concept { background: var(--vlak); border: 1px solid var(--lijn-fijn); border-radius: var(--straal); padding: 14px 16px; font-size: 16px; line-height: 1.55; display: grid; gap: 10px; }
.concept-knop { display: inline-block; padding: 7px 12px; font-size: 14px; font-weight: 600; color: var(--accent); }

/* De kop van elke productpagina in het palet; offerte.css zet daar grijstinten
   van een donkere pagina, en die lezen slecht op papier. */
.demo-lead { color: var(--inkt-zacht); }
.demo-eyebrow { color: var(--inkt-vaag); }
.demo-echt { color: var(--inkt-vaag); }
.demo .header { display: none; }

/* ---- de andere producten, onderaan elke productpagina ---- */
.prod-anderen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .prod-anderen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prod-anderen a { display: block; background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--straal-groot); padding: 16px 18px; font-weight: 600; font-size: 16px; }
.prod-anderen a:hover { border-color: var(--accent); color: var(--accent); }
/* Niet de pagina waar je al bent; wel de tegel 'op aanvraag'. */
body[data-hier="telefoonassistent"] .prod-anderen a[href$="/telefoonassistent/"],
body[data-hier="offertemachine"] .prod-anderen a[href$="/offertemachine/"],
body[data-hier="werkbon"] .prod-anderen a[href$="/werkbon/"],
body[data-hier="postvak"] .prod-anderen a[href$="/postvak/"] { display: none; }
.prod-anderen a small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--inkt-zacht); }

/* Op een telefoon passen drie kolommen zinnen niet naast elkaar. Elke rij wordt
   dan een blokje: de situatie als kop, daaronder "nu" en "straks" met het
   kolomlabel ervoor, zodat de kolom die ertoe doet niet buiten beeld valt. */
@media (max-width: 640px) {
  .op-tabel { min-width: 0; }
  .op-tabel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .op-tabel tr, .op-tabel th, .op-tabel td { display: block; width: auto; }
  .op-tabel tbody th { width: auto; padding: 18px 0 4px; border-bottom: 0; }
  .op-tabel td { padding: 4px 0 0; border-bottom: 0; font-size: 16px; }
  .op-tabel td::before { content: attr(data-kop) " · "; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--inkt-vaag); }
  .op-tabel tr { border-bottom: 1px solid var(--lijn-fijn); padding-bottom: 16px; }
}