/* ============================================================
   SLIMME HYPOTHEEK — LANDINGSPAGINA
   Huisstijl 1-op-1 van final.slimmehypotheek.nl:
   koppen Anek Latin wdth 75 / wght 800, tekst Hanken Grotesk 17px,
   lila #F4F1FF, dieppaars #251D42, paars #9273FF, geel #F6FF7F,
   mint #C5F2F7, roze #E7B0EC, knopradius 12px.
   ============================================================ */

:root{
  --paars:#9273FF;
  --paars-donker:#745CCC;
  --paars-licht:#B29DFF;
  --paars-tint:#E9E3FF;
  --diep:#251D42;
  --lila:#F4F1FF;
  --mint:#C5F2F7;
  --mint-licht:#D6F5F9;
  --geel:#F6FF7F;
  --roze:#E7B0EC;
  --wit:#FFFFFF;
  --tekst:#363636;
  --zacht:#5C5670;
  --rand:#D6D1E3;
  --rand-zacht:rgba(37,29,66,.10);

  --kop:"Anek Latin","Anek latin variable",-apple-system,sans-serif;
  --body:"Hanken Grotesk",-apple-system,"Segoe UI",sans-serif;

  --max:1280px;
  --gutter:clamp(20px,4vw,40px);
  --sectie:clamp(64px,8vw,120px);
  --r-s:12px;
  --r-m:16px;
  --r-l:24px;
  --schaduw:0 18px 44px -34px rgba(37,29,66,.42);
  --schaduw-kaart:0 2px 3px rgba(37,29,66,.04),0 14px 30px -22px rgba(37,29,66,.34);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;overflow-x:hidden;background:var(--wit);color:var(--tekst);
  font-family:var(--body);font-size:17px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4,.kop{
  font-family:var(--kop);font-weight:800;font-stretch:75%;
  font-variation-settings:"wdth" 75,"wght" 800;
  color:var(--diep);margin:0;line-height:.92;letter-spacing:-.004em;
}
h1{font-size:clamp(42px,6.1vw,76px)}
h2{font-size:clamp(33px,4.5vw,60px)}
h3{font-size:clamp(21px,1.7vw,26px);line-height:1}
h4{font-size:19px;line-height:1.06}
p{margin:0}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sectie{padding-block:var(--sectie)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--diep);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r-s) 0;text-decoration:none;font-weight:600}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.eyebrow{font-family:var(--body);font-size:15px;font-weight:600;color:var(--diep);
  margin:0 0 14px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--paars);border-radius:2px;flex:none}
.eyebrow--licht{color:#fff}
.eyebrow--licht::before{background:var(--geel)}

.lead{font-size:clamp(17px,1.3vw,19.5px);line-height:1.55;color:var(--zacht);max-width:56ch}

.mark{position:relative;white-space:nowrap}
.mark svg{position:absolute;left:0;right:0;bottom:-.2em;width:100%;height:.2em;overflow:visible}
.mark svg path{fill:none;stroke:var(--paars);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:230;stroke-dashoffset:230;animation:teken .9s .3s cubic-bezier(.5,0,.2,1) forwards}
@keyframes teken{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.mark svg path{animation:none;stroke-dashoffset:0}}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--body);font-size:17px;font-weight:600;line-height:1.2;
  padding:15px 26px;border-radius:var(--r-s);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.knop svg{flex:none}
.knop--primair{background:var(--paars);color:#fff;box-shadow:0 14px 28px -18px rgba(146,115,255,1)}
.knop--primair:hover{background:var(--paars-donker);transform:translateY(-1px)}
.knop--secundair{background:transparent;color:var(--diep);border-color:var(--rand)}
.knop--secundair:hover{background:var(--wit);border-color:var(--diep);transform:translateY(-1px)}
.knop--diep{background:var(--diep);color:#fff}
.knop--diep:hover{background:#17102f;transform:translateY(-1px)}
.knop--randlicht{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.knop--randlicht:hover{background:rgba(255,255,255,.14);border-color:#fff}
.knop--blok{width:100%}
:focus-visible{outline:3px solid var(--paars);outline-offset:3px;border-radius:4px}
.tag{font-size:13px;font-weight:600;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.24)}
.knop--secundair .tag{background:var(--paars-tint);color:var(--diep)}

/* CMS-veld dat Slimme Hypotheek nog aanlevert */
.cms{border-bottom:1.5px dotted var(--paars-licht);cursor:help}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{position:sticky;top:0;z-index:60;background:var(--lila);transition:box-shadow .25s ease}
.hdr.vast{box-shadow:0 1px 0 var(--rand-zacht),0 12px 30px -26px rgba(37,29,66,.6)}
.hdr__in{display:flex;align-items:center;gap:24px;padding-block:13px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.logo__tekst{font-family:var(--kop);font-weight:800;font-stretch:75%;
  font-variation-settings:"wdth" 75,"wght" 800;font-size:21px;line-height:.86;color:var(--paars)}
/* Geen menu op deze pagina: alleen het logo en het telefoonnummer. Elk
   menu-item is een uitgang op een pagina waar betaald verkeer landt. Er staan
   twee belknoppen in de markup omdat de tekst verschilt - het volledige nummer
   op een breed scherm, "Bel ons" op een telefoon - en niet omdat er twee
   acties zijn. */
.hdr__acties{margin-left:auto;display:flex;align-items:center;gap:10px}
.hdr .knop{padding:11px 18px;font-size:15.5px;white-space:nowrap}
/* Bellen is de secundaire actie op elke pagina; het formulier is de primaire.
   Transparant op een lila header leest slecht, dus wel een witte bodem. */
.hdr .knop--secundair{background:var(--wit);border-color:var(--rand)}
.hdr .knop--secundair:hover{border-color:var(--diep)}
.hdr__bel{display:none}
@media (max-width:1120px){
  .hdr__nr{display:none}
  .hdr__bel{display:inline-flex;padding:10px 15px;font-size:14.5px;gap:8px}
}

/* ============================================================
   01 HERO + 02 BEWIJSBALK
   ============================================================ */
.hero{background:var(--lila);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(780px 440px at 90% -10%,rgba(146,115,255,.17),transparent 62%),
    radial-gradient(560px 380px at 0% 112%,rgba(197,242,247,.6),transparent 66%)}
.hero__in{position:relative;z-index:1;padding-top:clamp(30px,3.2vw,44px);padding-bottom:clamp(30px,3.2vw,46px)}
.hero__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4.2vw,62px);align-items:start}
.hero__grid>*{min-width:0}
.duo>*,.bewijs__grid>*,.deuren__grid>*,.stappen>*,.verhalen__grid>*,.cijfers__grid>*,.kennis__grid>*,.ftr__grid>*,.verg__rij>*{min-width:0}
.hero h1{margin-bottom:20px;max-width:13ch}
/* De koppen van de campagnevarianten zijn langer dan de generieke kop. Op 13ch
   wordt de langste zes regels hoog en duwt hij het formulier uit beeld. */
.hero h1.kop--lang{max-width:20ch;font-size:clamp(34px,3.6vw,52px)}
.hero .lead{max-width:50ch}
.hero__acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.keur{display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.bol{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--geel);border:2px solid var(--diep);font-family:var(--kop);font-weight:800;
  font-stretch:75%;font-variation-settings:"wdth" 75,"wght" 800;font-size:21px;color:var(--diep);line-height:1}
.keur p{font-size:15px;line-height:1.35;color:var(--zacht)}
.keur strong{color:var(--diep);font-weight:600}

.bewijs{position:relative;z-index:1;padding-bottom:clamp(42px,5vw,72px)}
.bewijs__venster{display:contents}
.usp__stippen{display:none;justify-content:center;gap:7px;margin-top:16px}
.bewijs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:var(--wit);border:1px solid var(--rand-zacht);border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 14px 34px -30px rgba(37,29,66,.4)}
.bkaart{background:transparent;border:0;border-left:1px solid var(--rand-zacht);border-radius:0;
  padding:26px 24px 24px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:7px;
  transition:background-color .2s ease}
.bkaart:first-child{border-left:0}
a.bkaart:hover{background:var(--lila)}
.bkaart__cijfer{font-family:var(--kop);font-weight:800;font-stretch:75%;
  font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(26px,2.4vw,35px);line-height:.9;color:var(--diep)}
.bkaart__tekst{font-size:15px;line-height:1.42;color:var(--zacht)}
.bkaart .cms{border-bottom-color:var(--paars)}
.bkaart__link{font-size:13.5px;font-weight:600;color:var(--paars-donker);margin-top:auto;padding-top:12px;
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;overflow-wrap:break-word;hyphens:auto}
.bkaart__link .punt{display:none}
.bkaart__link a{color:var(--paars-donker);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:rgba(146,115,255,.6)}
.bkaart__link a:hover{color:var(--diep);text-decoration-color:var(--diep)}

@media (max-width:1000px){
  /* het formulier moet zo hoog mogelijk: kop, tekst, de vier deuren, dan meteen het formulier */
  .hero__grid{grid-template-columns:1fr;gap:18px}
  .hero__tekst{display:contents}
  .hero h1{order:1;margin-bottom:0}
  .hero .lead{order:2;margin-bottom:2px}
  .hero__acties{display:none}
  .form{order:3}
  .keur{order:4;margin-top:2px;flex-wrap:nowrap;gap:12px}
  .keur .bol{width:46px;height:46px;font-size:18px}
  .keur p{flex:1;min-width:0;font-size:14px}
  .hero h1{max-width:none}
  .hero__acties .knop{flex:1 1 100%}
  .bewijs__grid{grid-template-columns:1fr 1fr}
  .bkaart:nth-child(odd){border-left:0}
  .bkaart:nth-child(n+3){border-top:1px solid var(--rand-zacht)}
}
/* telefoon: twee kolommen van twee, niet vier onder elkaar */
/* ---------- telefoon: zelfbewegende slider ----------
   De actieve USP staat gecentreerd, links en rechts is de buur even ver
   afgekapt. De rij loopt oneindig door in dezelfde volgorde. */
@media (max-width:760px){
  .bewijs__venster{display:block;overflow:hidden;
    margin-inline:calc(var(--gutter) * -1);padding-block:2px}
  .bewijs__grid{display:flex;gap:12px;background:none;border:0;border-radius:0;
    box-shadow:none;overflow:visible;will-change:transform}
  .bewijs__grid.schuift{transition:transform .55s cubic-bezier(.4,0,.2,1)}
  .bkaart{flex:0 0 auto;width:var(--usp-breedte,74%);
    background:var(--wit);border:1px solid var(--rand-zacht);border-radius:var(--r-l);
    border-left:1px solid var(--rand-zacht);border-top:1px solid var(--rand-zacht);
    display:flex;flex-direction:column;align-items:center;text-align:center;
    justify-content:center;gap:7px;padding:24px 20px;min-height:150px;
    opacity:.42;transform:scale(.94);
    transition:opacity .45s ease,transform .45s ease}
  .bkaart.actief{opacity:1;transform:none;box-shadow:var(--schaduw-kaart)}
  .bkaart__cijfer{font-size:24px}
  .bkaart__tekst{font-size:14.5px}
  .bkaart__link{margin-top:0;padding-top:6px;font-size:12.5px;align-items:center;gap:4px}

  .usp__stippen{display:flex}
  .usp__stippen button{width:7px;height:7px;padding:0;border:0;border-radius:50%;
    background:var(--rand);cursor:pointer;transition:background-color .3s ease,width .3s ease}
  .usp__stippen button[aria-current="true"]{background:var(--paars);width:20px;border-radius:99px}
}
@media (max-width:400px){.lang{display:none}}

/* ============================================================
   FORMULIER - een vraag per stap, zoals de bestaande formulieren
   op final.slimmehypotheek.nl (Stap x van y, voortgangsbalk,
   grote keuzekaarten, Vorige / Volgende stap)
   ============================================================ */
.form{background:var(--wit);border:1px solid var(--rand-zacht);border-radius:var(--r-l);
  box-shadow:var(--schaduw);overflow:hidden;position:relative}

/* ---------- Toms formulieropmaak, overgenomen van /overwaarde-lp/ ----------
   Zonder deze laag rendert InstantForm zijn keuzes als kale radioknopjes en
   valt de stapvraag weg tegen de rest. Dit is zijn eigen CSS; de kleuren
   waren al de onze. */
.form--ifo{padding:24px}
@media (max-width:560px){ .form--ifo{padding:20px 16px} }

.ow-calc .ifo-form-step-title{font-size:24px;line-height:1.25;font-weight:800;
  color:var(--diep);margin:0 0 20px}
@media (max-width:520px){ .ow-calc .ifo-form-step-title{font-size:21px} }

.ow-progress{margin-bottom:22px;min-height:44px}
.ow-progress-info{display:flex;justify-content:space-between;gap:12px;
  font-size:13.5px;font-weight:600;color:var(--zacht);margin-bottom:9px}
.ow-progress-track{height:6px;background:var(--paars-tint);border-radius:8px;overflow:hidden}
.ow-progress-fill{height:100%;width:10%;background:var(--paars);border-radius:8px;
  transition:width .35s ease}

/* keuzeblokken in plaats van radioknopjes, twee naast elkaar zoals bij Tom.
   Onder de 620px past er nog maar één naast elkaar. */
.ow-calc .ifo-form-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){ .ow-calc .ifo-form-choices{grid-template-columns:1fr} }
.ow-calc .ifo-form-choice{position:relative;display:flex;align-items:center;gap:12px;
  padding:15px 18px;border:1px solid #251d4226;border-radius:12px;cursor:pointer;
  transition:border-color .2s,box-shadow .2s,transform .2s,background .2s;
  background:var(--wit);font-size:16px;font-weight:500;color:var(--diep);min-width:0}
.ow-calc .ifo-form-choice:hover{border-color:var(--paars);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(146,115,255,.18)}
.ow-calc .ifo-form-choice input{position:absolute;opacity:0;pointer-events:none}
.ow-calc .ifo-form-choice:has(input:checked){border-color:var(--paars);
  background:var(--lila);box-shadow:0 0 0 2px var(--paars) inset}

.ow-calc input[type="text"],.ow-calc input[type="email"],.ow-calc input[type="tel"],
.ow-calc input[type="number"],.ow-calc select,.ow-calc textarea{width:100%;
  max-width:100%;box-sizing:border-box}

/* de bolletjesrij van de plugin zegt hetzelfde als onze balk erboven, en
   formulier 4 heeft hem sowieso niet; weg ermee zodat beide gelijk staan */
.ow-calc .ifo-form-progress{display:none}

.ow-review-banner{display:flex;flex-direction:column;gap:6px;padding:16px 18px;
  margin-bottom:18px;background:var(--lila);border:2px solid var(--paars);
  border-radius:12px;text-align:center}
.ow-review-banner strong{color:var(--paars-donker);font-size:15px}
.ow-review-banner span{font-size:13px;color:var(--zacht)}
.ow-review-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid #251d4212;font-size:14px}
.ow-review-row .lbl{color:var(--zacht)}
.ow-review-row .val{color:var(--diep);font-weight:600;text-align:right}

.form__top{padding:20px 26px 0}
.balk{height:6px;background:var(--paars-tint);border-radius:99px;overflow:hidden}
.balk i{display:block;height:100%;width:0;background:var(--paars);border-radius:99px;
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.form__meta{display:flex;justify-content:space-between;gap:12px;margin-top:9px;
  font-size:13.5px;font-weight:600;color:var(--zacht)}
.form__meta b{color:var(--diep);font-weight:600}

/* de behaalde indicatie blijft in beeld tijdens de laatste stappen */
.uitkomst{display:none;align-items:center;justify-content:space-between;gap:14px;
  margin:16px 26px 0;padding:12px 16px;border-radius:var(--r-s);
  background:var(--mint-licht);border:1.5px solid #A9E3EB}
.uitkomst.zichtbaar{display:flex}
.uitkomst span{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--diep);opacity:.72}
.uitkomst b{font-family:var(--kop);font-weight:800;font-stretch:75%;
  font-variation-settings:"wdth" 75,"wght" 800;font-size:26px;line-height:1;color:var(--diep)}

.form__body{padding:20px 26px 4px;min-height:268px}
fieldset{border:0;margin:0;padding:0}
legend{padding:0}

.stapv{display:none}
.stapv.actief{display:block;animation:stapin .32s cubic-bezier(.2,.7,.3,1) both}
@keyframes stapin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stapv.actief{animation:none}}

.vraag{font-size:clamp(23px,2vw,29px);line-height:1.02;margin-bottom:6px}
.vraag--klein{font-size:clamp(21px,1.7vw,25px)}
.uitleg{font-size:15px;line-height:1.45;color:var(--zacht);margin-bottom:18px}

.veld{margin-bottom:4px}
.veld__label{display:block;font-size:14.5px;font-weight:600;color:var(--diep);margin-bottom:8px}
.invoer{width:100%;font-family:var(--body);font-size:19px;color:var(--diep);background:var(--wit);
  border:1.5px solid var(--rand);border-radius:var(--r-s);padding:15px 16px;
  transition:border-color .16s ease,box-shadow .16s ease}
.invoer::placeholder{color:#A7A2B5}
.invoer:focus{border-color:var(--paars);box-shadow:0 0 0 4px rgba(146,115,255,.16);outline:none}
.invoer.fout{border-color:#C6285A;box-shadow:0 0 0 4px rgba(198,40,90,.12)}
.euro{position:relative}
.euro span{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--zacht);
  font-size:19px;pointer-events:none}
.euro .invoer{padding-left:36px}
.tip{font-size:13.5px;line-height:1.45;color:var(--zacht);margin-top:9px}
.fout-tekst{display:none;font-size:13.5px;color:#C6285A;margin-top:9px;font-weight:500}
.veld.heeft-fout .fout-tekst,fieldset.heeft-fout .fout-tekst{display:block}

/* grote keuzekaarten, een per regel */
.keuzes{display:grid;grid-template-columns:1fr;gap:10px}
.kz{position:relative}
.kz input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.kz>span{display:flex;align-items:center;gap:13px;min-height:58px;padding:13px 16px;
  border:1.5px solid var(--rand);border-radius:var(--r-s);font-size:16.5px;font-weight:500;
  line-height:1.25;color:var(--diep);background:var(--wit);cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,transform .16s ease}
/* icoon bij de vier deuren: zegt iets over de vraag zelf */
.kz__ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--lila);
  border:1px solid var(--paars-tint);display:grid;place-items:center;color:var(--diep);
  transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.kz input:checked+span .kz__ic{background:var(--paars);border-color:var(--paars);color:#fff}
/* gewone keuzerondjes waar een icoon niets toevoegt */
.kz__radio{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--rand);
  transition:border-color .16s ease,box-shadow .16s ease}
.kz input:checked+span .kz__radio{border-color:var(--paars);box-shadow:inset 0 0 0 5px var(--paars)}
.kz input:hover+span{border-color:var(--paars-licht);transform:translateX(2px)}
.kz input:checked+span{border-color:var(--paars);background:var(--lila)}
.kz input:focus-visible+span{outline:3px solid var(--paars);outline-offset:2px}

/* het resultaatscherm na vraag 3 */
.indicatie__label{font-size:13.5px;font-weight:600;color:var(--diep);opacity:.72;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.indicatie__bedrag{font-family:var(--kop);font-weight:800;font-stretch:75%;
  font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(42px,4.6vw,58px);
  line-height:.9;color:var(--diep);margin-bottom:12px}
.indicatie__uitleg{font-size:15.5px;line-height:1.5;color:var(--diep);opacity:.86}
.indicatie__rij{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-size:13px;font-weight:600;background:var(--paars-tint);color:var(--diep);
  padding:6px 11px;border-radius:99px}
.indicatie__voet{margin-top:16px;padding:12px 14px;border-radius:var(--r-s);
  background:#F6F5F8;font-size:13px;line-height:1.45;color:var(--zacht)}

.form__nav{display:flex;align-items:center;gap:12px;padding:16px 26px 24px}
.form__nav .knop{padding:14px 22px}
#vorige{visibility:hidden}
#vorige.zichtbaar{visibility:visible}
#volgende{margin-left:auto}
.form__voet{font-size:13px;color:var(--zacht);text-align:center;padding:0 26px 6px}
/* Een telefoonnummer in lopende tekst is op een telefoon maar 23 px hoog en
   dus lastig te raken. Verticale padding vergroot alleen het raakvlak; de
   regelhoogte verandert niet, dus de tekst schuift niet op. */
@media (max-width:760px){
  a[href^="tel:"]:not(.knop){display:inline-block;padding-block:11px}
}

.privacy{font-size:12.5px;color:var(--zacht);line-height:1.45;padding:0 26px 22px;text-align:center}
.privacy a{color:var(--paars-donker)}

.bedankt{display:none;padding:44px 26px 40px;text-align:center}
.bedankt.zichtbaar{display:block}
.bedankt__vink{width:64px;height:64px;border-radius:50%;background:var(--geel);
  border:2px solid var(--diep);display:grid;place-items:center;margin:0 auto 20px}
.bedankt h2{margin-bottom:12px}
.bedankt p{color:var(--zacht);max-width:38ch;margin:0 auto 18px}

@media (max-width:560px){
  .form__top{padding:18px 20px 0}
  .form__body{padding:20px 20px 4px;min-height:0}
  .form__nav{padding:14px 20px 20px}
  .uitkomst{margin-inline:20px;flex-wrap:wrap;gap:4px}
  .privacy,.form__voet{padding-inline:20px}
  /* knoppen onder elkaar, de primaire bovenaan */
  .form__nav{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .form__nav .knop{padding:15px 16px;white-space:nowrap;margin:0;width:100%}
  #vorige{display:none}
  #vorige.zichtbaar{display:inline-flex;visibility:visible}
}

/* ============================================================
   03 STATEMENTBAND
   ============================================================ */
.band{background:var(--wit);overflow:hidden}
.band__rij{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,22px);flex-wrap:nowrap}
.band__rij+.band__rij{margin-top:clamp(6px,1vw,14px)}
.band__woord{font-family:var(--kop);font-weight:800;font-stretch:75%;
  font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(40px,8.2vw,112px);
  line-height:.94;color:var(--diep);white-space:nowrap}
.blok{border-radius:var(--r-s);flex:none;height:clamp(46px,7.8vw,120px)}
.blok--geel{background:var(--geel);width:clamp(28px,4.4vw,62px)}
.blok--mint{background:var(--mint);width:clamp(56px,14vw,196px)}
.blok--paars{background:var(--paars);width:clamp(60px,15vw,206px)}
.blok--diep{background:var(--diep);width:clamp(70px,17vw,236px)}
.blok--roze{background:var(--roze);width:clamp(50px,12vw,168px)}
.blok--klein{width:clamp(24px,3.4vw,48px)}
@media (max-width:760px){.blok--verberg{display:none}}
@media (max-width:620px){
  /* losse blokjes tussen de woorden worden op deze breedte rommel;
     de kleuren komen terug als een balk onder de uitspraak */
  .band__rij{display:block;text-align:left}
  .band__rij+.band__rij{margin-top:0}
  .blok{display:none}
  .band__woord{display:inline;font-size:clamp(40px,11.6vw,58px);line-height:1.02}
  .band .wrap{position:relative}
  .band .wrap::after{content:"";display:block;height:12px;border-radius:99px;margin-top:22px;
    background:linear-gradient(90deg,
      var(--geel) 0 20%,var(--mint) 20% 40%,var(--paars) 40% 60%,
      var(--roze) 60% 80%,var(--diep) 80% 100%)}
}

/* ============================================================
   04 KIES JE SITUATIE
   ============================================================ */
.deuren{background:var(--lila)}
.deuren__kop{max-width:60ch;margin-bottom:clamp(30px,3.4vw,46px)}
.deuren__kop h2{margin-bottom:14px}
.deuren__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.deur{position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 24px 22px;
  border-radius:var(--r-l);text-decoration:none;color:var(--diep);min-height:270px;overflow:hidden;
  transition:transform .22s cubic-bezier(.3,.8,.4,1),box-shadow .22s ease}
.deur:hover{transform:translateY(-6px);box-shadow:0 26px 46px -28px rgba(37,29,66,.6)}
.deur--geel{background:var(--geel)}
.deur--mint{background:var(--mint)}
.deur--roze{background:var(--roze)}
.deur--diep{background:var(--diep);color:#fff}
.deur--diep h3{color:#fff}
.deur__nr{font-family:var(--kop);font-weight:800;font-stretch:75%;
  font-variation-settings:"wdth" 75,"wght" 800;font-size:15px;letter-spacing:.1em;opacity:.5;color:inherit}
.deur h3{font-size:clamp(22px,1.9vw,27px);max-width:14ch}
.deur p{font-size:15px;line-height:1.45;opacity:.82}
.deur__pijl{margin-top:auto;display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;padding-top:14px}
.deur__pijl svg{transition:transform .22s ease}
.deur:hover .deur__pijl svg{transform:translateX(5px)}
@media (max-width:1000px){.deuren__grid{grid-template-columns:1fr 1fr}.deur{min-height:0}}
@media (max-width:560px){.deuren__grid{grid-template-columns:1fr}}

/* ============================================================
   05 WAAROM HIER WEL
   ============================================================ */
.verg{background:var(--wit)}
.verg__kop{max-width:62ch;margin-bottom:clamp(28px,3.2vw,44px)}
.verg__kop h2{margin-bottom:14px;max-width:20ch}

.verg__tabel{display:grid;grid-template-columns:minmax(132px,.62fr) 1fr 1fr;gap:0 16px;align-items:stretch}
.verg__rij{display:contents}

.vc{padding:19px 22px;font-size:15.5px;line-height:1.5;display:flex;align-items:flex-start;gap:11px}
.vc p{margin:0}

/* de twee gekleurde kopbalken boven de kolommen */
.vc--hoofd{padding:13px 22px;font-size:13px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;align-items:center;border-radius:var(--r-m) var(--r-m) 0 0}
.vc--hoofd.vc--bank{background:#E4E1EA;color:#4A4458}
.vc--hoofd.vc--ons{background:var(--paars-donker);color:#fff}
.vc--hoofd.vc--leeg{background:none;padding-inline:0}

/* rijlabel links, met een accentstreepje ervoor */
.vc--label{font-weight:600;color:var(--diep);font-size:16px;padding:19px 16px 19px 26px;
  border-top:1px solid var(--rand-zacht);align-items:flex-start;position:relative}
.vc--label::before{content:"";position:absolute;left:0;top:26px;width:14px;height:2px;
  background:var(--paars);border-radius:2px}

/* kolom bank: doorlopende grijze balk */
.vc--bank{background:#F5F4F7;color:var(--zacht);border-top:1px solid rgba(37,29,66,.07)}

/* kolom Slimme Hypotheek: doorlopende lila balk */
.vc--ons{background:var(--lila);color:var(--diep);border-top:1px solid rgba(146,115,255,.24)}

.verg__rij:last-of-type .vc--bank,
.verg__rij:last-of-type .vc--ons{border-radius:0 0 var(--r-m) var(--r-m);padding-bottom:22px}
.verg__rij:last-of-type .vc--label{box-shadow:inset 0 -1px 0 var(--rand-zacht)}

/* vinkjes en kruisjes */
.ic{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.ic--nee{background:#DCD8E3;color:#635D71}
.ic--ja{background:var(--paars);color:#fff}
.cel__label{display:none;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:8px}

@media (max-width:900px){
  /* per onderwerp een blokje: het onderwerp als kop, de bank als kale regel,
     en alleen ons antwoord in een gekleurd vlak. Een vlak in plaats van twee,
     dus half zo zwaar en het verschil is meteen te zien. */
  .verg__tabel{display:block;border-top:1px solid var(--rand-zacht)}
  .verg__rij{display:block;padding:20px 0 22px;border-bottom:1px solid var(--rand-zacht)}
  .verg__rij:first-of-type{display:none}

  .vc{padding:0;display:block}
  .vc--label{border:0;box-shadow:none;background:none;font-size:17px;
    padding:0 0 0 24px;margin-bottom:12px}
  .vc--label::before{left:0;top:11px;width:14px}

  .vc--bank{background:none;border:0;border-radius:0;color:var(--zacht);
    font-size:15px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;
    align-items:start;margin-bottom:10px}
  .vc--ons{background:var(--lila);border:1px solid var(--paars-tint);border-radius:var(--r-s);
    padding:14px 16px;font-size:15.5px;display:grid;grid-template-columns:auto 1fr;
    column-gap:10px;align-items:start}
  .verg__rij:last-of-type .vc--bank{border-radius:0;padding-bottom:0}
  .verg__rij:last-of-type .vc--ons{border-radius:var(--r-s);padding-bottom:14px}
  .verg__rij:last-of-type .vc--label{box-shadow:none}

  .cel__label{display:block;grid-column:2;grid-row:1;margin-bottom:5px}
  .vc--bank .cel__label{color:#78738A}
  .vc--ons .cel__label{color:var(--paars-donker)}
  .vc--bank .ic,.vc--ons .ic{display:grid;grid-column:1;grid-row:1 / 3;align-self:start;margin-top:0}
  .vc--bank p:not(.cel__label),.vc--ons p:not(.cel__label){grid-column:2;grid-row:2}
}

.verg__voet{margin-top:20px;font-size:13.5px;line-height:1.5;color:var(--zacht);max-width:70ch}

/* ============================================================
   06 PROCES
   ============================================================ */
.proces{background:var(--paars);color:var(--diep)}
.proces__kop{margin-bottom:clamp(34px,4vw,56px)}
.proces__kop h2{color:var(--diep)}
.proces .eyebrow{color:var(--diep)}
.proces .eyebrow::before{background:var(--diep)}
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px)}
.stap{border-top:2px solid rgba(37,29,66,.28);padding-top:22px;position:relative}
.stap .stap__nr{font-family:var(--kop);font-weight:800;font-stretch:75%;
  font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(64px,7.4vw,104px);
  line-height:.82;color:#fff;margin-bottom:14px}
.stap .stap__tijd{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;background:var(--diep);color:var(--geel);
  padding:6px 12px;border-radius:99px;margin-bottom:14px}
.stap h3{margin-bottom:10px;max-width:16ch}
.stap p{font-size:16px;line-height:1.5;color:rgba(37,29,66,.86)}
.stap a{color:var(--diep);font-weight:600}
@media (max-width:880px){.stappen{grid-template-columns:1fr}.stap__nr{font-size:58px}}

/* ============================================================
   07 WAT HET KOST
   ============================================================ */
.kosten{background:var(--wit)}
.kosten__blok{background:var(--diep);color:#fff;border-radius:var(--r-l);
  padding:clamp(34px,4.4vw,64px);display:grid;grid-template-columns:1fr auto;
  gap:clamp(26px,3.4vw,54px);align-items:center;position:relative;overflow:hidden}
.kosten__blok>*{min-width:0}
.kosten__blok::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(146,115,255,.42),transparent 66%);pointer-events:none}
.kosten__blok h2{color:#fff;margin-bottom:16px}
.kosten__blok p{font-size:clamp(16px,1.3vw,18.5px);line-height:1.55;color:rgba(255,255,255,.84);max-width:54ch}
.kosten__prijs{position:relative;z-index:1;text-align:center;flex:none}
.kosten__foto{position:relative;z-index:1;flex:none;margin:0;align-self:end;
  max-width:300px;justify-self:center}
.kosten__foto img{display:block;width:100%;height:auto}
@media (max-width:900px){.kosten__foto{max-width:220px;justify-self:start}}

.kosten__prijs b{display:block;font-family:var(--kop);font-weight:800;font-stretch:75%;
  font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(46px,5.2vw,72px);line-height:.9;color:var(--geel)}
.kosten__prijs em{display:block;font-style:normal;font-size:14px;color:rgba(255,255,255,.7);margin-top:8px}
.kosten__blok .knop{margin-top:24px}
.kosten__links{position:relative;z-index:1}
@media (max-width:880px){.kosten__blok{grid-template-columns:1fr}.kosten__prijs{text-align:left}}

/* ============================================================
   08 KLANTVERHALEN
   ============================================================ */
.verhalen{background:var(--lila)}
.verhalen__kop{margin-bottom:clamp(30px,3.4vw,46px)}
.verhalen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.verhaal{background:var(--wit);border:1px solid var(--rand-zacht);border-radius:var(--r-l);
  padding:30px 28px 26px;display:flex;flex-direction:column;gap:18px}
.verhaal__quote{font-family:var(--kop);font-weight:800;font-stretch:75%;
  font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(22px,1.8vw,27px);
  line-height:1.06;color:var(--diep)}
.verhaal__wie{font-size:15px;color:var(--zacht)}
.verhaal__wie b{color:var(--diep);font-weight:600}
.feiten{margin-top:auto;border-top:1px solid var(--rand-zacht);padding-top:16px;
  display:flex;flex-direction:column;gap:8px}
.feit{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.4;color:var(--diep)}
.feit svg{flex:none;margin-top:3px;color:var(--paars)}
@media (max-width:960px){.verhalen__grid{grid-template-columns:1fr}}

/* ============================================================
   09 CIJFERS
   ============================================================ */
.cijfers{background:var(--mint)}
.cijfers__kop{margin-bottom:clamp(30px,3.4vw,48px)}
.cijfers__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.cijfer{border-top:2px solid rgba(37,29,66,.22);padding-top:20px}
.cijfer b{display:block;font-family:var(--kop);font-weight:800;font-stretch:75%;
  font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(46px,5.4vw,76px);
  line-height:.86;color:var(--diep);margin-bottom:12px}
.cijfer p{font-size:15.5px;line-height:1.4;color:rgba(37,29,66,.8)}
.cijfer em{display:block;font-style:normal;font-size:12.5px;color:rgba(37,29,66,.74);margin-top:8px}
@media (max-width:820px){.cijfers__grid{grid-template-columns:1fr 1fr}}

/* ============================================================
   10 KENNISBANK
   ============================================================ */
.kennis{background:var(--wit)}
.kennis__kop{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:clamp(28px,3.2vw,44px);flex-wrap:wrap}
.kennis__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.art{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border-radius:var(--r-m);
  border:1px solid var(--rand-zacht);text-decoration:none;color:inherit;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.art:hover{transform:translateY(-4px);box-shadow:var(--schaduw-kaart);border-color:var(--paars-licht)}
.art__meta{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--paars-donker)}
.art h3{font-size:21px;line-height:1.08}
.art__lees{margin-top:auto;padding-top:12px;font-size:14.5px;font-weight:600;color:var(--diep);
  display:inline-flex;align-items:center;gap:8px}
.art__lees svg{transition:transform .2s ease}
.art:hover .art__lees svg{transform:translateX(4px)}
@media (max-width:960px){.kennis__grid{grid-template-columns:1fr}}

/* ============================================================
   11 AFSLUITER
   ============================================================ */
.slot{background:var(--geel);position:relative;overflow:hidden}
.slot__in{position:relative;z-index:1;text-align:center;max-width:56ch;margin-inline:auto}
.slot h2{margin-bottom:16px}
.slot p{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:rgba(37,29,66,.82)}
.slot__acties{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.slot__blokken{position:absolute;inset:0;pointer-events:none;opacity:.9}
.slot__blokken i{position:absolute;border-radius:var(--r-s);display:block}
.slot__blokken i:nth-child(1){background:var(--paars);width:150px;height:60px;left:-40px;top:16%}
.slot__blokken i:nth-child(2){background:var(--mint);width:110px;height:110px;right:-32px;top:12%}
.slot__blokken i:nth-child(3){background:var(--roze);width:88px;height:54px;left:6%;bottom:12%}
.slot__blokken i:nth-child(4){background:var(--diep);width:130px;height:46px;right:7%;bottom:16%}
@media (max-width:900px){.slot__blokken{display:none}.slot__acties .knop{flex:1 1 100%}}

/* ============================================================
   12 FOOTER
   ============================================================ */
.ftr{background:var(--diep);color:rgba(255,255,255,.78);padding-block:clamp(48px,5.4vw,76px) 0}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.ftr h4{color:#fff;font-size:17px;margin-bottom:16px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr a{color:rgba(255,255,255,.78);text-decoration:none;font-size:15.5px;transition:color .16s ease}
.ftr a:hover{color:var(--geel)}
.ftr__contact{font-size:15.5px;line-height:1.65;font-style:normal}
.ftr__contact a{display:inline-block}
.nieuwsbrief{margin-top:22px;max-width:340px}
.nieuwsbrief p{font-size:14px;color:rgba(255,255,255,.62);margin-bottom:10px}
.nieuwsbrief__rij{display:flex;gap:8px}
.nieuwsbrief input{flex:1;min-width:0;font-family:var(--body);font-size:15px;color:#fff;
  background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.2);
  border-radius:var(--r-s);padding:12px 14px}
.nieuwsbrief input::placeholder{color:rgba(255,255,255,.45)}
.nieuwsbrief button{font-family:var(--body);font-size:15px;font-weight:600;cursor:pointer;
  background:var(--geel);color:var(--diep);border:0;border-radius:var(--r-s);padding:12px 18px}
.juridisch{margin-top:clamp(38px,4vw,56px);padding:20px 0;border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.62)}
.juridisch a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.juridisch .cms{border-bottom-color:rgba(255,255,255,.45)}
.copy{padding:16px 0 22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.62)}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}

/* mobiel: knoppen onder elkaar op volle breedte, zoals de briefing vraagt */
@media (max-width:600px){
  .knop{white-space:normal;text-align:center;padding-inline:18px}
  .hero__acties .knop,.slot__acties .knop,.kosten__links .knop,.kennis__kop .knop,.bedankt .knop{width:100%}
  .mbalk .knop{white-space:nowrap;width:100%}
}
@media (max-width:560px){
  .kosten__blok{padding:28px 20px}
}

/* ============================================================
   BEELD - foto's en het beeldmerk, overgenomen van
   final.slimmehypotheek.nl. Losse bestanden in final-lp-assets/.
   Geen enkele sectie verandert van indeling; het beeld komt
   binnen de bestaande blokken en kaders.
   ============================================================ */
.logo__merk{width:38px;height:38px;flex:none;display:block}

/* statementband - portretten in de gekleurde blokken, net als op de homepage */
.blok--foto{overflow:hidden;position:relative;padding:0}
.blok--foto img{display:block;width:100%;height:100%;object-fit:cover}
.blok--mint.blok--foto img{object-position:50% 8%}
.blok--paars.blok--foto img{object-position:50% 3%}
.blok--diep.blok--foto img{object-position:50% 14%}
.band__mobiel{display:none}

/* Hier stond een kantoorfoto achter de tabel met een schuin wit verloop
   eroverheen. Hij bleef met de vergelijking concurreren; op 04-09 weg, op beide
   landingspagina's. De sectie staat nu op wit. */

/* afsluiter - de grijsharige man met het beeldmerk over zijn hoofd,
   dezelfde opbouw als de homepage-CTA "Heb je een vraag?" */
.slot__beeld{position:absolute;right:max(8px,calc((100% - 1310px) / 2));bottom:0;z-index:1;
  width:clamp(230px,30vw,420px);pointer-events:none}
.slot__beeld img{display:block;width:100%;height:auto}
.slot__merk{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  width:82%;aspect-ratio:278/243;background:var(--paars);
  -webkit-mask-image:url(final-lp-assets/hex-lijn.png);mask-image:url(final-lp-assets/hex-lijn.png);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.slot .wrap{position:relative;z-index:2}
@media (min-width:901px){
  .slot__in{margin-inline:auto clamp(236px,30vw,420px)}
  .slot__blokken i:nth-child(4){display:none}
}
@media (max-width:900px){
  .slot{padding-bottom:0}
  .slot__beeld{position:relative;right:auto;width:min(260px,64%);margin:30px auto -1px;display:block}
  .slot__in{margin-inline:auto}
}

/* proces - een brede fotostrook onder de drie stappen */
.procesfoto{margin:clamp(30px,3.6vw,52px) 0 0;border-radius:var(--r-l);overflow:hidden;
  box-shadow:0 26px 50px -34px rgba(37,29,66,.8)}
.procesfoto img{display:block;width:100%;height:clamp(230px,34vw,470px);
  object-fit:cover;object-position:50% 42%}

/* ---------- telefoon ---------- */
@media (max-width:620px){
  /* de kleurbalk onder de uitspraak wordt een rij portretten */
  .band .wrap::after{display:none}
  .band__mobiel{display:flex;gap:9px;margin-top:24px}
  .mfoto{flex:1;min-width:0;height:clamp(88px,27vw,118px);border-radius:var(--r-s);
    overflow:hidden;display:block}
  .mfoto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
  .mfoto--mint{background:var(--mint)}
  .mfoto--paars{background:var(--paars)}
  .mfoto--geel{background:var(--geel)}
}

/* ============================================================
   MOBIELE VASTE BALK
   ============================================================ */
.mbalk{display:none}
@media (max-width:820px){
  .mbalk{display:grid;grid-template-columns:1fr 1.2fr;gap:9px;position:fixed;
    left:0;right:0;bottom:0;z-index:70;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--rand);box-shadow:0 -10px 30px -22px rgba(37,29,66,.6)}
  /* min-width:0, anders weigert een rasteritem te krimpen onder zijn tekst en
     steekt "Start je berekening" op 390px buiten zijn vak */
  .mbalk .knop{padding:13px 10px;font-size:14.5px;width:100%;min-width:0}
  @media (max-width:370px){ .mbalk .knop{font-size:13.5px;padding-inline:8px} }
  body{padding-bottom:78px}
}


/* ---------- inbedding in een WordPress-pagina ----------
   Bricks geeft het content-artikel een vaste breedte (1280px, gecentreerd).
   Onze secties lopen van rand tot rand, dus die werden links en rechts
   afgesneden. */
#brx-content{width:100% !important;max-width:none !important;margin-inline:0 !important}

/* Het thema drukt de paginatitel als kale h1 boven onze hero af. Die concurreert
   met onze eigen H1 en hoort er op een landingspagina niet te staan. */
#brx-content > h1:first-child{display:none}

/* De swoosh onder het laatste woord van de kop. Op de losse pagina klopt hij;
   in de WordPress-inbedding werd zijn vak 76px hoog in plaats van .2em, waardoor
   de streep een blob werd. Vandaar hier expliciet, met !important. */
.hero h1 .mark svg{height:.2em !important;max-height:.2em !important;
  width:100% !important;align-self:auto !important}