/* Voor de publieke pagina's home.html en plugin.html (stories
   platform-en-infrastructuur/18, 19 en 20): de volle paginabreedte van
   style.css, alles gecentreerd, met plaatjes. Losse file, zodat style.css
   generiek blijft. */

.home-page h1,
.home-page h2 { line-height: 1.2; }
.home-page h2 { font-size: 1.7rem; margin: 0 0 0.5rem; text-align: center; }
.home-page .lead { font-size: 1.15rem; line-height: 1.55; color: #334155; }
.home-page p { line-height: 1.55; }

/* Bovenaan: de belofte links, het beeld rechts. */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 2.5rem;
  margin: 1rem 0 3.5rem;
}
.home-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0 0 1rem; }
.home-hero-image { width: 100%; height: auto; display: block; }

.home-section { margin: 0 0 3.5rem; }
.section-intro,
.section-note {
  max-width: 44rem;
  margin: 0 auto 1.75rem;
  text-align: center;
  color: #475569;
}
.section-note { margin: 1.75rem auto 0; font-size: 0.95rem; }

/* De vijf stappen en de drie rollen: kaarten in een rij die meeschuift. */
.step-cards,
.role-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.step-cards { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); counter-reset: step; }
.role-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); max-width: 62rem; margin: 1.5rem auto 0; }
.step-card,
.role-card {
  position: relative;
  padding: 1.5rem 1.1rem 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.step-card { counter-increment: step; }
.step-card::before {
  content: counter(step);
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #ff7e5f;
  color: #fff;
  font-weight: 700;
  line-height: 1.8rem;
}
.step-card img,
.role-card img { display: block; margin: 0 auto 0.75rem; }
.step-card h3,
.role-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: #0f172a; }
.step-card p,
.role-card p { margin: 0; font-size: 0.93rem; color: #475569; }

/* Het beeld van de viewer naast wat je erin ziet. */
.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
  padding: 2rem;
  border-radius: 16px;
  background: #f8fafc;
}
.home-split img { width: 100%; height: auto; display: block; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); border-radius: 12px; }
.home-split h2 { text-align: left; }
.check-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.check-list li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.9rem;
  line-height: 1.5;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #ff7e5f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Een blok met alleen een lijst: in een smalle kolom, zodat de regels leesbaar blijven. */
.home-narrow { max-width: 48rem; margin-left: auto; margin-right: auto; }
.home-narrow .check-list { margin-top: 1.25rem; }

/* Zo begin je: een gecentreerd blok met de stappen en de knoppen. */
.home-start {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  border: 1px solid #ffd2c2;
  border-radius: 16px;
  background: #fff5f2;
}
.start-list { margin: 1rem 0 0; padding-left: 1.4rem; line-height: 1.7; }
.home-start .page-actions { justify-content: center; margin-top: 1.5rem; }

.home-beta {
  max-width: 44rem;
  margin: 0 auto 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #64748b;
}

@media (max-width: 860px) {
  .home-hero,
  .home-split { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .home-hero { text-align: center; margin-bottom: 2.5rem; }
  .home-hero .page-actions { justify-content: center; }
  .home-split { padding: 1.25rem; }
  .home-split h2 { text-align: center; }
}

/* ---- De pagina over de plugin (plugin.html) -------------------------------- */

/* Kaarten zonder nummer (wat de plugin doet). */
.step-cards.plain .step-card::before { content: none; }
.step-cards.plain { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.section-image {
  display: block;
  width: min(100%, 26rem);
  height: auto;
  margin: 0 auto 1.75rem;
}

/* Installeren per platform, en de twee stappen van het instellen: kaarten
   naast elkaar met de stappen links uitgelijnd (het zijn instructies). */
.platform-cards,
.setup-cards {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}
.platform-cards { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.setup-cards { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); max-width: 68rem; margin: 1.5rem auto 0; }
.plugin-page section.platform,
.setup-card {
  margin: 0;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  min-width: 0;
}
.plugin-page section.platform img,
.setup-card img { display: block; margin: 0 auto 0.5rem; }
.plugin-page section.platform h3,
.setup-card h3 { margin: 0 0 0.75rem; text-align: center; font-size: 1.1rem; color: #0f172a; }
.plugin-page section.platform ol,
.setup-card ol,
.setup-card ul { margin: 0; padding-left: 1.3rem; line-height: 1.6; font-size: 0.95rem; }
.plugin-page section.platform li,
.setup-card li { margin-bottom: 0.3rem; }
.plugin-page section.platform .hint,
.setup-card .hint { margin: 0.75rem 0 0; }
.setup-card p { font-size: 0.95rem; }

.plugin-page code {
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: #eef2f7;
  font-size: 0.88em;
  overflow-wrap: anywhere;
}
.plugin-page pre {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  background: #0f172a;
  color: #e2e8f0;
  /* Een lange opdracht breekt af in plaats van buiten de kaart te vallen;
     kopiëren geeft nog steeds de regel zoals hij is. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}
.plugin-page pre code { padding: 0; background: none; color: inherit; font-size: inherit; }

/* Als het niet werkt: een gecentreerde kolom met vragen en antwoorden. */
.faq-section dl.faq { max-width: 48rem; margin: 1.5rem auto 0; }
.faq-section dl.faq dt {
  margin-top: 0.75rem;
  padding: 0.8rem 1rem 0;
  border: 1px solid #e2e8f0;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: #fff;
  font-weight: 600;
}
.faq-section dl.faq dd {
  margin: 0;
  padding: 0.3rem 1rem 0.9rem;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 10px 10px;
  background: #fff;
  color: #475569;
  line-height: 1.55;
}
.home-page :target { scroll-margin-top: 1rem; }


/* ---- De handleiding (manual.html, story platform-en-infrastructuur/23) -------- */

/* Het beeld bovenaan is een schermafbeelding, geen tekening: met een rand en een schaduw. */
.manual-hero-image,
.manual-shot img {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  background: #fff;
}
.manual-toc {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 2rem;
  border: 1px solid #ffd2c2;
  border-radius: 16px;
  background: #fff5f2;
}
.manual-toc ol { margin: 1rem 0 0; padding-left: 1.4rem; line-height: 1.8; columns: 2; column-gap: 2.5rem; }
.manual-toc li { break-inside: avoid; }

/* Een hoofdstuk: de kop gecentreerd zoals op de andere pagina's, de tekst in een leesbare kolom. */
.manual-section { max-width: 60rem; margin-left: auto; margin-right: auto; scroll-margin-top: 1rem; }
.manual-section > h3,
.manual-section > p:not(.section-intro),
.manual-section > ul,
.manual-section > ol,
.manual-section > dl.manual-terms { max-width: 48rem; margin-left: auto; margin-right: auto; }
.manual-section > h3 { margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1.15rem; color: #0f172a; }
.manual-section > p,
.manual-section li { line-height: 1.65; }
.manual-section > ul,
.manual-section > ol { padding-left: 1.4rem; }
.manual-section li { margin-bottom: 0.35rem; }
.manual-number {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: #ff7e5f;
  color: #fff;
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
  vertical-align: 0.15em;
}
.manual-top { text-align: right; font-size: 0.85rem; }

.manual-shot { margin: 1.75rem auto; text-align: center; }
.manual-shot img { display: block; width: 100%; height: auto; }
.manual-shot-small { max-width: 30rem; }
.manual-shot figcaption { margin-top: 0.6rem; font-size: 0.88rem; color: #64748b; }

.manual-terms dt { margin-top: 0.9rem; font-weight: 700; color: #0f172a; }
.manual-terms dd { margin: 0.15rem 0 0; line-height: 1.6; color: #334155; }

.manual-table-wrap { max-width: 48rem; margin: 1rem auto; overflow-x: auto; }
.manual-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.manual-table th,
.manual-table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #e2e8f0; text-align: left; vertical-align: top; }
.manual-table thead th { background: #f8fafc; color: #0f172a; }
.manual-table tbody td:first-child { font-weight: 600; color: #0f172a; white-space: nowrap; }
.manual-roles th:not(:first-child),
.manual-roles td:not(:first-child) { text-align: center; }
.manual-roles tbody td:first-child { white-space: normal; font-weight: 500; }

/* Twee manieren naast elkaar. */
.manual-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.manual-choice > section { padding: 1.25rem 1.5rem; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; }
.manual-choice h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: #0f172a; }
.manual-choice p { margin: 0.4rem 0; font-size: 0.95rem; }
.manual-choice ol { margin: 0.5rem 0; padding-left: 1.3rem; font-size: 0.95rem; }

@media (max-width: 700px) {
  .manual-toc ol { columns: 1; }
  .manual-table tbody td:first-child { white-space: normal; }
}

/* ---- De pakketten (pricing.html, epic "pakketten en betalen") ----------------- */

.pricing-hero { text-align: center; max-width: 46rem; margin-left: auto; margin-right: auto; }
.pricing-hero h1 { margin-bottom: 0.75rem; }
.pricing-interval { display: inline-flex; gap: 1.5rem; margin: 1.25rem 0 0; padding: 0.5rem 1.25rem; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; }
.pricing-interval label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 600; cursor: pointer; }
.pricing-interval input { width: auto; margin: 0; }

.plan-cards { list-style: none; margin: 0 auto; padding: 0; max-width: 68rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; align-items: stretch; }
.plan-card { display: flex; flex-direction: column; padding: 1.75rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.plan-card-featured { border-color: #ff7e5f; box-shadow: 0 10px 30px rgba(255, 126, 95, 0.18); }
.plan-card-wanted { outline: 3px solid #ff7e5f; outline-offset: 2px; }
.plan-card h2 { margin: 0; text-align: left; font-size: 1.4rem; color: #0f172a; }
.plan-price { margin: 0.5rem 0 0; }
.plan-price-amount { font-size: 2.6rem; font-weight: 700; color: #0f172a; }
.plan-price-note { margin: 0; font-size: 0.85rem; color: #64748b; min-height: 1.3rem; }
.plan-for { margin: 0.75rem 0 0; color: #475569; }
.plan-card .check-list { flex: 1; margin: 1rem 0 1.25rem; font-size: 0.95rem; }
.plan-card .plan-choose,
.plan-card .plan-start { width: 100%; margin: 0; text-align: center; box-sizing: border-box; }
.plan-card .plan-choose { padding: 0.6rem 1rem; border: 1px solid #ff7e5f; border-radius: 8px; background: #ff7e5f; color: #fff; font-weight: 600; cursor: pointer; }
.plan-card .plan-choose:hover { background: #f26a49; }
.plan-card .plan-choose:disabled { opacity: 0.6; cursor: default; }
/* De betaalde pakketten staan nog dicht: wel te zien, niet te kiezen. */
.plan-card-soon { opacity: 0.75; box-shadow: none; border-color: #e2e8f0; }
.plan-card-soon .plan-choose,
.plan-card-soon .plan-choose:disabled { background: #e2e8f0; border-color: #e2e8f0; color: #475569; opacity: 1; cursor: default; }
.pricing-soon { max-width: 40rem; margin: 2rem auto 0; padding: 1rem 1.5rem; border: 1px solid #ffd2c2; border-radius: 16px; background: #fff5f2; text-align: center; font-weight: 600; }
.pricing-checkout[hidden] { display: none; }
.pricing-checkout { max-width: 34rem; margin: 2rem auto 0; padding: 1.25rem 1.5rem; border: 1px solid #ffd2c2; border-radius: 16px; background: #fff5f2; }
.pricing-checkout label { display: block; margin: 0 0 0.75rem; }
.pricing-checkout .pricing-code { display: block; margin-top: 0.3rem; max-width: 16rem; }
.pricing-terms { display: flex !important; align-items: flex-start; gap: 0.5rem; }
.pricing-terms input { width: auto; margin: 0.25rem 0 0; }
.pricing-checkout .hint { margin: 0.5rem 0 0; }

/* ---- Over Architrium (about.html), in de opzet van de startpagina ------------- */
.about-cards .setup-card p { margin: 0; line-height: 1.6; color: #475569; }