/* Video verification use case: device frames around real screens, story blocks, the cost comparison. On top of illustrative.css and site.css. */
.toestel { margin: 0; min-width: 0; }
.toestel img { display: block; width: 100%; height: auto; }
.toestel a { display: block; cursor: zoom-in; color: inherit; text-decoration: none; }
.toestel .scherm, .toestel .voetstuk { display: block; }
.toestel figcaption { font-size: .92rem; line-height: 1.45; color: var(--inkt-zacht); margin: .7rem auto 0; text-align: center; max-width: 30rem; }
.toestel figcaption b { color: var(--inkt); }

/* ---- de telefoon ---- */
.telefoon { width: 100%; max-width: 250px; }
.telefoon .romp {
  display: block; padding: 16px 9px 20px; background: var(--romp, var(--lucht)); border: 2.5px solid var(--inkt); border-radius: 34px;
}
.telefoon .romp::before { content: ""; display: block; width: 46px; height: 7px; margin: 0 auto 9px; border: 2px solid var(--inkt); border-radius: 6px; background: var(--papier); }
.telefoon .romp::after { content: ""; display: block; width: 34%; height: 5px; margin: 11px auto 0; border-radius: 3px; background: var(--inkt); opacity: .75; }
.telefoon .scherm { border: 2px solid var(--inkt); border-radius: 18px; overflow: hidden; background: #111; }

/* ---- het browservenster ---- */
.venster .kader { display: block; border: 2.5px solid var(--inkt); border-radius: 14px; overflow: hidden; background: var(--papier); }
.venster .balk { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-bottom: 2.5px solid var(--inkt); background: var(--papier); }
.venster .balk i { flex: 0 0 auto; width: 12px; height: 12px; border: 1.8px solid var(--inkt); border-radius: 50%; background: var(--koraal); }
.venster .balk i:nth-child(2) { background: var(--boter); }
.venster .balk i:nth-child(3) { background: var(--salie); }
.venster .balk span { flex: 1 1 auto; min-width: 0; margin-left: 10px; padding: 2px 12px; border: 1.8px solid rgba(52, 50, 74, .35); border-radius: 999px;
  font: 600 .8rem/1.5 var(--tekst); color: var(--inkt-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.venster .scherm { background: #fff; }

/* ---- de laptop ---- */
.laptop { width: 100%; }
.laptop .kader { display: block; padding: 12px 12px 14px; background: var(--romp, var(--lila)); border: 2.5px solid var(--inkt); border-radius: 18px 18px 6px 6px; }
.laptop .scherm { border: 2px solid var(--inkt); border-radius: 6px; overflow: hidden; background: #1e1e1e; }
.laptop .voetstuk { position: relative; height: 12px; margin: 0 -4%; border: 2.5px solid var(--inkt); border-top-width: 2px; border-radius: 0 0 18px 18px; background: var(--papier); }
.laptop .voetstuk::before { content: ""; position: absolute; left: 50%; top: -2px; width: 16%; height: 6px; transform: translateX(-50%); border: 2px solid var(--inkt); border-top: 0; border-radius: 0 0 8px 8px; background: var(--romp, var(--lila)); }

/* ---- naast elkaar ---- */
.toestellen { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1.6rem 1.8rem; margin: 1.6rem 0 .6rem; }
.toestellen .telefoon { flex: 0 1 230px; }
.toestellen .venster, .toestellen .laptop { flex: 1 1 26rem; max-width: 44rem; }
.toestellen.ruim .telefoon { flex-basis: 250px; }
@media (max-width: 560px) {
  .toestellen { gap: 1.4rem; }
  .toestellen .telefoon { flex-basis: 70%; max-width: 250px; }
  .toestellen.paar .telefoon { flex-basis: 44%; }
  .venster .balk { height: 30px; }
  .laptop .kader { padding: 7px 7px 9px; border-radius: 12px 12px 5px 5px; }
}


/* een verhaalblok: tekst op leesbreedte, de tekening zwevend rechtsboven IN het blok */
.blok { max-width: 50rem; margin: 0 0 2.2rem; }
.blok::after { content: ""; display: block; clear: both; }
.blok h3 { font: 800 clamp(1.25rem, 2.6vw, 1.6rem)/1.25 var(--tekst); margin: 0 0 .6rem; }
.blok p { margin: 0 0 .9rem; }
.tekening { float: right; width: 220px; margin: .2rem 0 1rem 1.8rem; }
.tekening svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .tekening { width: 132px; margin: .2rem 0 .6rem 1rem; } }

/* wie aan het woord is: de adviseur of de klant */
.wie { display: inline-block; font: 800 .8rem/1 var(--tekst); letter-spacing: .05em; text-transform: uppercase; border: 2px solid var(--inkt);
  border-radius: 999px; padding: .35rem .75rem; margin: 0 0 .7rem; background: var(--lucht); }
.wie.klant { background: var(--perzik); }
.wie.studio { background: var(--salie); }

/* een opdracht zoals de adviseur hem in Claude typte */
.opdracht { display: flow-root; position: relative; max-width: 40rem; margin: 1rem 0 1.2rem; padding: 1rem 1.2rem 1rem 3.4rem; background: #fcf2d3; border-radius: 18px; font-size: 1.05rem; }
.opdracht::before { content: "\201C"; position: absolute; left: 1rem; top: .2rem; font: 700 3rem/1 var(--hand); color: var(--koraal-donker); }
.opdracht small { display: block; margin-top: .4rem; font-size: .85rem; color: var(--inkt-zacht); }

/* de aanroepen die Claude in de studio deed, zoals ze in de run liepen */
.aanroepen { list-style: none; margin: .6rem 0 1.4rem; padding: 0; max-width: 46rem; counter-reset: aanroep; }
.aanroepen li { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: .2rem 1rem; padding: .55rem 0 .55rem .9rem; border-left: 4px solid var(--lucht); margin: 0 0 .35rem; }
.aanroepen li:nth-child(3n+2) { border-color: var(--salie); }
.aanroepen li:nth-child(3n) { border-color: var(--boter); }
.aanroepen code { justify-self: start; align-self: start; font-size: .85rem; background: var(--papier); border: 1.8px solid var(--inkt); border-radius: 8px; padding: .1rem .45rem; white-space: nowrap; }
.aanroepen span { font-size: .97rem; }
.aanroepen em { color: var(--inkt-zacht); font-style: normal; }
@media (max-width: 600px) { .aanroepen li { grid-template-columns: minmax(0, 1fr); } }

/* een rustig getint vlak voor gegevens die bij elkaar horen */
.vlak { background: #e3eef7; border-radius: 16px; padding: 1.1rem 1.3rem; max-width: 46rem; margin: 1rem 0 1.4rem; }
.vlak.salie { background: #e5efe1; }
.vlak.perzik { background: #fde9dc; }
.vlak p:last-child, .vlak ul:last-child { margin-bottom: 0; }
.vlak h4 { font: 800 1.05rem/1.3 var(--tekst); margin: 0 0 .5rem; }

/* de stappen van de klant: per stap een regel tekst, dan de toestellen */
.stappen { list-style: none; margin: 1.2rem 0 0; padding: 0; counter-reset: stap; }
.stappen > li { counter-increment: stap; margin: 0 0 2.6rem; }
.stappen > li > h4 { font: 800 1.15rem/1.3 var(--tekst); margin: 0 0 .4rem; display: flex; align-items: baseline; gap: .6rem; }
.stappen > li > h4::before { content: counter(stap); font: 700 1.9rem/1 var(--hand); color: var(--koraal-donker); }
.stappen > li > p { max-width: 44rem; margin: 0 0 .6rem; }

/* wat de beller hoort, onder een telefoon */
.hoort { display: block; font: 700 1.15rem/1.3 var(--hand); color: var(--koraal-donker); margin-top: .3rem; }

/* een gemeten getal */
.metingen { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin: 1rem 0 1.4rem; padding: 0; list-style: none; }
.metingen li { background: var(--papier); border: 2px solid var(--inkt); border-radius: 14px; padding: .5rem .9rem; font-size: .92rem; max-width: 17rem; }
.metingen b { display: block; font: 700 1.8rem/1.1 var(--hand); color: var(--koraal-donker); }

.citaat-floris { font: 700 1.5rem/1.3 var(--hand); color: var(--inkt); margin: 1rem 0; }
.klein-noot { font-size: .88rem; color: var(--inkt-zacht); max-width: 44rem; }
.voorbeeld-code { max-width: 46rem; }
.voorbeeld-code pre { padding-top: 1.1rem; }
.boeken-band .hoofdstukken { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
.boeken-band .hoofdstukken li { margin: 0 0 .4rem; }
@media (max-width: 640px) { .opdracht { clear: both; } }

/* head-to-head: Wantzel tegenover een bouwpartij met marktoplossingen (de totale kosten over drie jaar) */
.tco-kop { font: 800 clamp(1.25rem, 2.6vw, 1.6rem)/1.25 var(--tekst); margin: 2.2rem 0 .4rem; }
.tco-intro { max-width: 46rem; }
.tco-wrap { max-width: 46rem; margin: 1.2rem 0 1rem; }
.tco { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 1.02rem; }
.tco col.rij { width: 30%; }
.tco col.kol { width: 35%; }
.tco th, .tco td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-bottom: 1.5px solid #e6e1d6; hyphens: auto; }
.tco thead th { font: 800 1.02rem/1.25 var(--tekst); border-bottom: 2.5px solid var(--inkt); }
.tco thead th.wz { background: #dcebd5; border-radius: 14px 14px 0 0; }
.tco thead th.bp { background: #fbe0cf; border-radius: 14px 14px 0 0; }
.tco td.wz { background: #f0f6ec; font-weight: 700; }
.tco td.bp { background: #fdf3ec; font-weight: 700; }
.tco th[scope="row"] { font-weight: 700; }
.tco td small { display: block; font-weight: 400; color: var(--inkt-zacht); font-size: .86rem; line-height: 1.35; margin-top: .2rem; }
.tco tr.sub th, .tco tr.sub td { font-weight: 800; }
.tco tr.totaal th, .tco tr.totaal td { font-weight: 800; font-size: 1.2rem; border-bottom: 0; border-top: 2.5px solid var(--inkt); }
.tco tr.totaal td.wz { color: #1f6b3a; }
/* op een telefoon: per regel de kop over de hele breedte, daaronder de twee bedragen naast elkaar, elk met zijn naam */
@media (max-width: 600px) {
  .tco.kosten, .tco.kosten tbody { display: block; width: 100%; }
  .tco.kosten colgroup, .tco.kosten thead { display: none; }
  .tco.kosten tr { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 .7rem; }
  .tco.kosten th[scope="row"] { grid-column: 1 / -1; border-bottom: 0; padding: .3rem 0 .25rem; }
  .tco.kosten td { padding: .55rem .6rem; border-bottom: 0; font-size: .95rem; }
  .tco.kosten td.wz { border-radius: 12px 0 0 12px; }
  .tco.kosten td.bp { border-radius: 0 12px 12px 0; }
  .tco.kosten td::before { display: block; font: 800 .68rem/1.2 var(--tekst); letter-spacing: .04em; text-transform: uppercase; color: var(--inkt-zacht); margin-bottom: .2rem; }
  .tco.kosten td.wz::before { content: "Wantzel AI Studio"; }
  .tco.kosten td.bp::before { content: "Building partner + market"; }
  .tco.kosten tr.totaal th, .tco.kosten tr.totaal td { border-top: 0; }
  .tco.kosten tr.totaal { border-top: 2.5px solid var(--inkt); padding-top: .4rem; }
}
.tco-noot { font-size: .88rem; color: var(--inkt-zacht); max-width: 46rem; }
.tco-noot a { color: inherit; }

/* the calculation page */
.reken { max-width: 58rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.reken h1 { font: 800 clamp(1.7rem, 4vw, 2.4rem)/1.2 var(--tekst); margin: .6rem 0 .8rem; }
.reken h2 { font: 800 1.35rem/1.3 var(--tekst); margin: 2.2rem 0 .6rem; }
.reken p, .reken li { max-width: 50rem; }
.terug { font-weight: 700; color: var(--inkt); }
.var { min-width: 38rem; table-layout: auto; }
.var tr.groep td { background: #fff7e8; font: 800 .95rem/1.3 var(--tekst); padding-top: 1.1rem; border-bottom: 2.5px solid var(--inkt); }
.var tr.sub th, .var tr.sub td { font-weight: 700; }
.var tr.wz td { background: #f2f7ef; }
.var tr.bp td { background: #fef5ee; }
.var tr.totaal th, .var tr.totaal td { font-weight: 800; border-top: 2px solid var(--inkt); }
.var th[scope="col"] small { font-weight: 400; color: var(--inkt-zacht); }
.aannames td:first-child { font-weight: 700; width: 30%; }
.reken .tco-wrap { max-width: none; overflow-x: auto; }
.reken .aannames { min-width: 0; }
.punten { margin: 0 0 1rem; padding-left: 1.3rem; }
.punten li { margin: 0 0 .4rem; }
.tco td.n, .tco th.n { text-align: right; white-space: nowrap; }

/* a screen in a frame can be enlarged: a small label in the corner */
.toestel .kader.zoom, .toestel .romp.zoom { position: relative; }
.laptop .kader.zoom::after, .venster .kader.zoom::after { content: "Enlarge"; position: absolute; right: .9rem; bottom: .9rem; padding: .2rem .65rem; font: 700 .8rem/1.3 var(--tekst); color: var(--inkt); background: var(--papier); border: 2px solid var(--inkt); border-radius: 999px; box-shadow: 2px 2px 0 var(--inkt); }

/* the bakery use cases: the label of the right-hand column on a phone, and a wider code column in a list of steps */
@media (max-width: 600px) { .tco.kosten.route td.bp::before { content: "The usual route"; } }
.aanroepen.breed li { grid-template-columns: 15rem minmax(0, 1fr); }
.aanroepen.breed code { white-space: normal; }
@media (max-width: 600px) { .aanroepen.breed li { grid-template-columns: minmax(0, 1fr); } }
.tco.var thead th.n { white-space: normal; min-width: 8rem; }
.tco.var th[scope="row"] { min-width: 11rem; hyphens: none; }

/* overview: what a use case costs a month, in one line */
.use-kosten { font: 800 1.05rem/1.35 var(--tekst); color: var(--inkt); margin: 0 0 .5rem; }