/* ===========================================================================
   FRANCHISEHUB, DE COMPOSITIE VAN /ai-assistent

   Alleen deze pagina laadt dit bestand. De basis, de bouwstenen, de kopbalk,
   het menupaneel, de voet, het donkere oppervlak, de vierkantjes-taal en de
   twee slotblokken staan in landing-gedeeld.css en worden VOOR dit bestand
   geladen.

   DE VORM: EEN DOORSNEDE
   /matching is een tweeluik en gebruikt breedte als grens. /bewijs is een
   grootboek en gebruikt hoogte als volgorde. Deze pagina is geen van beide.

   Hier ligt een horizontale grens dwars door de pagina. Boven die grens staat
   wat de CRM van een mens weet: zijn naam, zijn nummers, zijn geboortedatum.
   Onder die grens staat wat het model krijgt: een dossiernummer en een
   werkprofiel. De grens is een eigen strook over de volle breedte, geen rand
   van een blok: hij hoort bij geen van de twee secties en dat is precies wat
   hij zegt.

   Het donkere vlak begint exact waar die grens ligt en loopt door tot het
   einde van die sectie. Dat vlak IS de andere kant, dus het krijgt geen kader
   en geen afgeronde hoeken. Een blok met een rand eromheen zou lezen als een
   illustratie van de scheiding in plaats van als de scheiding zelf.

   DAAROM STAAN ER GEEN KAARTEN OP DEZE PAGINA
   Een kaart is een ding dat je oppakt. Alles hier is een laag of een regel in
   een register en die stapel je niet. De enige uitzonderingen zijn de twee
   leeskaarten onderaan; daar is een kaart precies wat het is.

   VOLGORDE: landing-tokens.css, landing-gedeeld.css, dit bestand.
   =========================================================================== */

/* ---------- De opening ----------
   De titel links en de drie vragen rechts, met de vragen optisch lager: dat is
   de leesvolgorde en niet twee kolommen die om aandacht vechten. De rechterkolom
   is smaller dan de linker, want de vragen zijn korte regels en een lange regel
   naast een korte kop leest als bijschrift bij de verkeerde tekst. */
.ai-opening{background:var(--wit);overflow:hidden}
.ai-opening-spread{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(34px,5vw,90px);align-items:start;
}
.ai-opening .titel-1{margin-top:var(--r5);max-width:15ch}
.ai-opening .lead{margin-top:var(--r6);max-width:46ch}

.ai-opening-zij{padding-top:clamp(0px,2vw,26px)}
.ai-vragen{margin:var(--r5) 0 0;display:grid;gap:0}
/* Haarlijnen tussen de vragen in plaats van drie omlijnde blokken. Drie vragen
   in drie dozen lezen als drie producten; met een lijn ertussen lezen ze als
   drie regels uit dezelfde week. */
.ai-vraag{padding:var(--r5) 0;border-top:1px solid var(--rand)}
.ai-vraag:last-child{border-bottom:1px solid var(--rand)}
.ai-vraag-zin{font-size:var(--t-lg);font-weight:600;color:var(--ink-900);line-height:1.4;letter-spacing:-.01em}
.ai-vraag-bij{margin-top:var(--r3);font-size:var(--t-md);line-height:1.6;color:var(--ink-500)}
.ai-opening-slot{margin-top:var(--r5);font-size:var(--t-md);line-height:1.65;color:var(--ink-600);max-width:52ch}

/* ---------- De negen ----------
   Een genummerde index, geen raster met tegels. De bewering is dat het er
   precies negen zijn: een doorlopende nummering van 01 tot 09 draagt die
   bewering, drie losse rasters van vier, twee en drie niet. */
.ai-negen{background:var(--papier);border-top:1px solid var(--rand)}
.ai-negen-kop{max-width:62ch}
.ai-negen-kop .titel-2{margin-top:var(--r5);max-width:16ch}
.ai-negen-kop .lead{margin-top:var(--r5)}

.ai-groep{margin-top:clamp(34px,4vw,58px)}
.ai-groep-kop{
  display:flex;align-items:baseline;gap:var(--r4);
  padding-bottom:var(--r3);border-bottom:1px solid var(--rand-sterk);
}
.ai-groep-tel{margin-left:auto;font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-400)}

.ai-lijst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3.4vw,60px)}
.ai-item{
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--r4);
  align-items:start;padding:var(--r5) 0;border-bottom:1px solid var(--rand);
}
/* Het nummer hangt op de basislijn van de naam ernaast en niet erboven. Zo
   leest de rij als een regel in een index en niet als een kaart met een cijfer
   in de hoek. */
.ai-nr{
  font-family:var(--mono);font-size:var(--t-md);color:var(--ink-400);
  font-variant-numeric:tabular-nums;line-height:1.5;
}
.ai-item-naam{display:block;font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.01em}
.ai-item p{margin-top:var(--r2);font-size:var(--t-md);line-height:1.65;color:var(--ink-600)}

/* ---------- Boven de grens ---------- */
.ai-boven{background:var(--wit)}
.ai-boven-kop{max-width:62ch}
.ai-boven-kop .titel-2{margin-top:var(--r5);max-width:18ch}
.ai-boven-kop .lead{margin-top:var(--r5)}

/* Vijf regels met een streepje ervoor. Bewust geen vinkjes en geen kruisjes:
   dit is geen lijst van wat er goed of fout is maar van wat er in het dossier
   staat. Een kruisje zou suggereren dat het er niet hoort te staan. */
.ai-blijft{
  margin-top:clamp(30px,3.6vw,50px);display:grid;gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.4vw,60px);
}
.ai-blijft li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--r4);align-items:baseline;
  padding:var(--r4) 0;border-bottom:1px solid var(--rand-zacht);
  font-size:var(--t-md);line-height:1.6;color:var(--ink-700);
}
.ai-blijft-merk{width:18px;height:1px;background:var(--ink-300);transform:translateY(-4px)}

/* ---------- DE GRENS ----------
   Geen sectie en geen rand, maar een eigen strook over de volle breedte met
   het label in het midden. Hij hoort bij geen van beide kanten.

   De twee lijnen zijn losse elementen en geen border op de tekst: een border
   die om de tekst heen loopt eindigt bij de tekstbreedte en dan is het een
   onderstreping in plaats van een grens door de pagina. */
.ai-grens{background:var(--wit);padding:0 var(--r-kant)}
.ai-grens-binnen{
  max-width:var(--breed);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:clamp(14px,2.4vw,32px);
}
.ai-grens-lijn{height:1px;background:linear-gradient(90deg,transparent,var(--rand-sterk) 22%,var(--rand-sterk) 78%,transparent)}
.ai-grens-tekst{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-400);text-align:center;line-height:1.5;
}

/* ---------- Onder de grens ----------
   Het donkere oppervlak komt uit .band-sectie. Hier staat alleen wat van deze
   sectie is. De bovenrand is bewust hard: dit vlak begint waar de grens ligt
   en een koepel of een verloop zou de scheiding juist verzachten. */
.ai-onder{padding-top:clamp(46px,5.4vw,80px)}
.ai-onder-kop{max-width:62ch}
.ai-onder-kop .titel-2{margin-top:var(--r5);max-width:18ch}
.ai-onder-kop .lead{margin-top:var(--r5)}

/* Het dossier zelf. Geen paneel met een rand eromheen: twee haarlijnen boven
   en onder plus de donkere ondergrond die er al is. Wat je ziet is de
   inhoud en niet de doos. */
.ai-dossier{
  margin-top:clamp(34px,4vw,58px);
  border-top:1px solid var(--band-rand-sterk);border-bottom:1px solid var(--band-rand-sterk);
  padding:var(--r6) 0;
}
.ai-dossier-kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r3) var(--r5)}
.ai-dossier-kop .mono{color:var(--band-lila);font-size:var(--t-md);letter-spacing:.1em}
.ai-dossier-bij{font-size:var(--t-md);color:var(--band-zacht)}

/* De velden in twee kolommen van naam en waarde. Een definitielijst en geen
   tabel: er is geen tweede rij om tegen te vergelijken, het is een opsomming
   van wat er in dit ene dossier staat. */
.ai-velden{
  margin-top:var(--r6);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3.4vw,64px);
}
.ai-veld{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--r4);
  align-items:baseline;padding:var(--r3) 0;border-bottom:1px solid var(--band-rand);
}
.ai-veld dt{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--band-lila)}
.ai-veld dd{margin:0;font-size:var(--t-md);color:#fff;line-height:1.5}

/* De oordelen links en het verhaal uit de notitie rechts, in dezelfde twee
   kolommen als de velden erboven. Onder elkaar zou de rechterhelft van deze
   sectie op een breed scherm leeg blijven terwijl de linkerhelft doorloopt. En
   dan leest het dossier als een smalle kolom in plaats van als een dossier. */
.ai-dossier-onder{
  margin-top:var(--r7);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,3.4vw,64px);row-gap:var(--r7);align-items:start;
}
.ai-oordelen .mono{color:var(--band-lila)}
/* De drie bewijsregels blijven licht op dit donkere vlak en dat is met opzet:
   dit zijn de enige dingen in deze sectie die uit het dossier zelf komen in
   plaats van een beschrijving ervan te zijn. De maximumbreedte houdt ze een
   rij regels en maakt er geen drie brede vlakken van. */
.ai-oordeel-rijen{margin-top:var(--r4);display:grid;gap:var(--r2);max-width:520px}
.ai-oordeel-rijen .bewijsregel{font-size:var(--t-md)}
.ai-telling{
  margin-top:var(--r5);font-size:var(--t-md);line-height:1.75;
  color:var(--band-zacht);max-width:62ch;
}
/* De vakjes staan hier op een donkere ondergrond in plaats van op wit. Groen
   en blauw dragen zichzelf, maar de twee OPEN standen zijn een ring op wit en
   zouden hier als een wit blokje lezen. Ze houden hun witte vulling, want
   gevuld tegenover open is de vormdrager naast de kleur en die mag niet
   omdraaien omdat de achtergrond verandert. */
.ai-telling .vak-mini{vertical-align:1px}

.ai-dossier-noot .mono{color:var(--band-lila)}
.ai-dossier-noot p{
  margin-top:var(--r4);font-size:var(--t-md);line-height:1.7;
  color:var(--band-zacht);max-width:54ch;
}
.ai-onder-slot{
  margin-top:clamp(34px,4vw,54px);max-width:60ch;
  font-size:var(--t-xl);line-height:1.5;color:#fff;font-weight:600;letter-spacing:-.01em;
}

/* ---------- De vier die nooit meegaan ----------
   Rijen onder elkaar met een haarlijn ertussen. Wat het is en wat ermee
   gebeurt staan naast elkaar op de bovenste regel, de reden staat eronder over
   de volle breedte. Die reden is hier het onderwerp en in een derde kolom van
   tweehonderd pixels zou hij tot losse woorden afbreken. */
.ai-nooit{background:var(--papier)}
.ai-nooit-kop{max-width:62ch}
.ai-nooit-kop .titel-2{margin-top:var(--r5);max-width:20ch}
.ai-nooit-kop .lead{margin-top:var(--r5)}

.ai-regels{margin-top:clamp(34px,4vw,58px);display:grid;gap:0}
.ai-regel{padding:var(--r6) 0;border-top:1px solid var(--rand-sterk)}
.ai-regel:last-child{border-bottom:1px solid var(--rand-sterk)}
.ai-regel-wat{font-size:var(--t-xl);font-weight:600;color:var(--ink-900);letter-spacing:-.02em}
.ai-regel-hoe{
  margin-top:var(--r2);font-family:var(--mono);font-size:var(--t-2xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--roze);
}
.ai-regel-waarom{margin-top:var(--r4);font-size:var(--t-md);line-height:1.7;color:var(--ink-600);max-width:88ch}

.ai-wel{margin-top:clamp(38px,4.4vw,64px)}
.ai-wel-kop .mono{color:var(--ink-400)}
.ai-wel-paar{
  margin-top:var(--r5);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3.4vw,60px);
}
.ai-wel-blok b{display:block;font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.01em}
.ai-wel-blok p{margin-top:var(--r3);font-size:var(--t-md);line-height:1.7;color:var(--ink-600)}

/* ---------- Waar het ophoudt ----------
   Twee blokken naast elkaar. Het rechter is het langere en dat is niet
   toevallig: de onzekere kant krijgt meer woorden dan de zekere, want daar
   valt iets uit te leggen. Een symmetrisch tweeluik zou suggereren dat de
   twee even zwaar wegen. */
.ai-eerlijk{background:var(--wit)}
.ai-eerlijk-kop{max-width:62ch}
.ai-eerlijk-kop .titel-2{margin-top:var(--r5);max-width:20ch}
.ai-eerlijk-paar{
  margin-top:clamp(34px,4vw,58px);display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,72px);
}
.ai-zeker,.ai-poging{padding-top:var(--r5);border-top:2px solid var(--mint)}
.ai-poging{border-top-color:var(--amber)}
.ai-zeker .mono{color:var(--mint)}
.ai-poging .mono{color:var(--amber)}
.ai-zeker-zin,.ai-poging-zin{
  margin-top:var(--r4);font-size:var(--t-2xl);font-weight:600;
  color:var(--ink-900);line-height:1.2;letter-spacing:-.02em;
}
.ai-zeker p,.ai-poging p{margin-top:var(--r4);font-size:var(--t-md);line-height:1.7;color:var(--ink-600)}
.ai-poging-slot{color:var(--ink-700);font-weight:600}

/* ---------- De weg terug ---------- */
.ai-terug{background:var(--papier);border-top:1px solid var(--rand)}
.ai-terug-kop{max-width:62ch}
.ai-terug-kop .titel-2{margin-top:var(--r5);max-width:20ch}
.ai-terug-kop .lead{margin-top:var(--r5)}

.ai-stappen{margin-top:clamp(34px,4vw,58px);display:grid;gap:0}
.ai-stap{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--r5);
  align-items:start;padding:var(--r6) 0;border-top:1px solid var(--rand);
}
.ai-stap:last-child{border-bottom:1px solid var(--rand)}
.ai-stap-nr{
  font-family:var(--mono);font-size:var(--t-lg);color:var(--blauw);
  font-variant-numeric:tabular-nums;line-height:1.4;
}
.ai-stap b{font-size:var(--t-lg);font-weight:600;color:var(--ink-900);letter-spacing:-.01em}
.ai-stap p{margin-top:var(--r3);font-size:var(--t-md);line-height:1.7;color:var(--ink-600);max-width:88ch}

/* ---------- De begrenzing ----------
   Twee getallen die groot mogen staan. Displaytype is op deze site schaars en
   vergeven aan de heromomenten; dit is een maat daaronder, groot genoeg om als
   getal te lezen en klein genoeg om geen vijfde heromoment te worden. */
.ai-lezen{background:var(--wit)}
.ai-lezen-spread{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,4.4vw,80px);align-items:start;
}
.ai-lezen .titel-2{margin-top:var(--r5);max-width:18ch}
.ai-lezen .lead{margin-top:var(--r5);max-width:50ch}
.ai-plafonds{display:grid;gap:var(--r6)}
.ai-plafond{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--r5);align-items:start;
  padding-top:var(--r5);border-top:1px solid var(--rand-sterk);
}
.ai-plafond-getal{
  font-family:var(--letter);font-weight:600;font-size:clamp(44px,5.2vw,72px);
  line-height:.9;color:var(--blauw);font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;min-width:1.6ch;
}
.ai-plafond p{font-size:var(--t-md);line-height:1.7;color:var(--ink-600)}
.ai-plafond b{color:var(--ink-900);font-weight:600}

/* ---------------------------------------------------------------------------
   SCHERMBREEDTES

   Alleen die van deze pagina. De kopbalk, het menupaneel en de voet hebben hun
   eigen omslagpunten in landing-gedeeld.css.
   --------------------------------------------------------------------------- */

@media (max-width:1080px){
  /* De opening en de begrenzing worden een kolom. Twee kolommen van nog geen
     vierhonderd pixels breken de vragen af tot drie woorden per regel. */
  .ai-opening-spread{grid-template-columns:minmax(0,1fr);gap:var(--r8)}
  .ai-opening .titel-1{max-width:18ch}
  .ai-opening .lead{max-width:62ch}
  .ai-opening-zij{padding-top:0}
  .ai-lezen-spread{grid-template-columns:minmax(0,1fr);gap:var(--r8)}
  .ai-lezen .lead{max-width:66ch}
}

@media (max-width:940px){
  /* De negen onder elkaar in plaats van in twee kolommen. Bij twee kolommen op
     deze breedte is elke omschrijving nog zo'n driehonderd pixels breed en dan
     wordt een zin van twee regels er vijf. */
  .ai-lijst{grid-template-columns:minmax(0,1fr)}
  .ai-blijft{grid-template-columns:minmax(0,1fr)}
  .ai-velden{grid-template-columns:minmax(0,1fr)}
  .ai-dossier-onder{grid-template-columns:minmax(0,1fr)}
  /* Het tweeluik van zeker en beste poging wordt een kolom, met de zekere kant
     bovenaan: eerst wat wel dichtgetimmerd is, dan waar het ophoudt. */
  .ai-eerlijk-paar{grid-template-columns:minmax(0,1fr);gap:var(--r8)}
  .ai-wel-paar{grid-template-columns:minmax(0,1fr);gap:var(--r7)}
}

@media (max-width:640px){
  /* De veldnaam boven de waarde in plaats van ernaast. Naast elkaar houdt de
     waarde hier honderdvijftig pixels over en dan breekt "Samenwonend met
     kinderen" in drie regels van een woord. */
  .ai-veld{grid-template-columns:minmax(0,1fr);gap:var(--r1)}
  /* Het nummer boven de tekst. Een kolom van 44 pixels naast een tekstkolom van
     tweehonderd is een kwart van de breedte kwijt aan twee cijfers. */
  .ai-item{grid-template-columns:minmax(0,1fr);gap:var(--r2)}
  .ai-stap{grid-template-columns:minmax(0,1fr);gap:var(--r2)}
  .ai-plafond{grid-template-columns:minmax(0,1fr);gap:var(--r3)}
  .ai-grens-binnen{grid-template-columns:minmax(0,1fr);gap:var(--r3);justify-items:center}
  /* De twee lijnen naast de tekst worden twee korte streepjes erboven en
     eronder. Een lijn van veertig pixels naast een label van drie regels leest
     als een fout in plaats van als een grens. */
  .ai-grens-lijn{width:100%;max-width:180px}
}