@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap";:root{color:#171714;font-synthesis:none;background:#e9e5dc;font-family:DM Sans,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}.setup-shell{grid-template-columns:minmax(340px,430px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100dvh;display:grid;overflow:hidden}.question-pane{z-index:2;background:#f8f6f0;border-right:1px solid #d4d0c6;grid-template-rows:68px 3px minmax(0,1fr) 76px;display:grid;position:relative}.setup-header{justify-content:space-between;align-items:center;padding:0 28px;display:flex}.wordmark{color:#171714;letter-spacing:-1px;font:700 21px/1 Manrope,sans-serif;text-decoration:none}.preview-trigger{display:none}.progress{appearance:none;background:#e3dfd5;border:0;border-radius:0;width:100%;height:3px;display:block}.progress::-webkit-progress-bar{background:#e3dfd5}.progress::-webkit-progress-value{background:#171714;transition:width .3s}.progress::-moz-progress-bar{background:#171714;transition:width .3s}.question-content{padding:48px 34px 30px;animation:.28s both enter;overflow-y:auto}.eyebrow{color:#776f61;text-transform:uppercase;letter-spacing:.12em;margin:0 0 13px;font-size:11px;font-weight:600}.question-content h1{letter-spacing:-1.7px;max-width:380px;margin:0;font:600 clamp(30px,3.2vw,43px)/1.05 Manrope,sans-serif}.lead{color:#6e695f;max-width:360px;margin:14px 0 32px;line-height:1.55}.question-content label{margin:20px 0 0;font-size:13px;font-weight:600;display:block}.question-content input,.question-content textarea{color:#171714;background:#fff;border:1px solid #cfc9bd;border-radius:10px;outline:0;width:100%;margin-top:8px;padding:14px 15px;font:500 16px/1.4 inherit;transition:all .16s;display:block}.question-content textarea{resize:vertical;min-height:112px}.helper{color:#776f61;margin-top:6px;margin-bottom:0;font-size:12px;font-weight:400}.question-content input:focus,.question-content textarea:focus{border-color:#171714;box-shadow:0 0 0 3px #17171414}.category-search{color:#171714;background:#fff;border:1px solid #cfc9bd;border-radius:10px;outline:0;width:100%;margin:16px 0 12px;padding:14px 15px;font:500 16px/1.4 inherit;transition:all .16s;display:block}.category-search:focus{border-color:#171714;box-shadow:0 0 0 3px #17171414}.category-groups{gap:24px;margin-top:12px;display:grid}.category-group{border:0;gap:10px;margin:0;padding:0;display:grid}.category-group legend{text-transform:uppercase;letter-spacing:.08em;color:#776f61;cursor:auto;padding:0;font-size:12px;font-weight:700}.choice-grid{grid-template-columns:1fr 1fr;gap:9px;display:grid}.choice,.direction{appearance:none;text-align:left;color:#23221e;cursor:pointer;background:#fff;border:1px solid #d5d0c5;border-radius:11px;justify-content:space-between;align-items:center;gap:10px;min-height:54px;padding:13px 14px;font:600 14px/1.25 inherit;transition:all .16s;display:flex}.choice:hover{border-color:#8f897e;transform:translateY(-1px)}.choice-detail{min-height:68px}.choice-detail span{gap:4px;display:grid}.choice-detail small,.direction small{color:#767066;font-size:12px;font-weight:400}.directions{gap:9px;display:grid}.direction{border-color:#0002;grid-template-columns:120px 1fr 30px;gap:12px;min-height:120px;display:grid;position:relative;overflow:hidden}.direction-preview{background:inherit;border-radius:8px;grid-template-rows:40px auto auto 40px;align-content:start;gap:6px;padding:8px;display:grid}.preview-swatch{border-radius:6px;width:100%;height:30px;margin-bottom:4px}.preview-text{overflow:hidden}.preview-descriptors{color:inherit;opacity:.7;font-size:11px;line-height:1.3}.preview-treatments{align-items:center;gap:6px;margin-top:auto;font-size:11px;font-weight:500;display:flex}.treatment{padding:4px 8px;display:inline-block}.treatment-label{opacity:.6}.direction>span{flex:1;gap:4px;display:grid}.direction small{color:inherit;opacity:.66}.direction.selected{outline-offset:1px;outline:2px solid #171714}.error{color:#8f2f19;background:#fbe9e4;border-radius:8px;padding:11px 13px;font-size:13px}.setup-footer{background:#f8f6f0;border-top:1px solid #ddd8cc;justify-content:space-between;align-items:center;padding:0 28px;display:flex}.setup-footer button,.preview-trigger{cursor:pointer;background:0 0;border:0;align-items:center;gap:8px;font:600 14px inherit}.setup-footer button{display:flex}.step-count{color:#776f61;font-size:12px;font-weight:500}.setup-footer .back{color:#514d45;padding:12px 0}.setup-footer .back:disabled{opacity:.28}.setup-footer .continue{color:#fff;background:#171714;border-radius:9px;justify-content:center;min-width:126px;padding:14px 18px}.setup-footer .continue:disabled{opacity:.32;cursor:not-allowed}.preview-pane{background:radial-gradient(circle at 90% 10%,#f7c7b9 0,#0000 30%),linear-gradient(135deg,#d9d4c8,#eeeae2);min-width:0;padding:30px}.browser{background:#fff;border:1px solid #bbb5aa;border-radius:14px;grid-template-rows:42px minmax(0,1fr);height:100%;display:grid;overflow:hidden;box-shadow:0 18px 55px #38332a24}.browser-bar{background:#f5f3ef;border-bottom:1px solid #ddd8cf;align-items:center;gap:6px;padding:0 14px;display:flex}.browser-bar span{background:#d2cdc5;border-radius:50%;width:8px;height:8px}.browser-bar b{color:#837d73;margin:auto;font-size:11px;font-weight:500}.browser iframe{background:#fff;border:0;width:100%;height:100%}.preview-loading{color:#79736a;justify-content:center;align-items:center;gap:10px;font-size:13px;display:flex}.preview-close{display:none}.spin{animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes enter{0%{opacity:0;transform:translateY(7px)}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (width<=760px){.setup-shell{height:100dvh;display:block}.question-pane{border:0;grid-template-rows:62px 3px minmax(0,1fr) 72px;height:100dvh}.setup-header{padding:0 20px}.preview-trigger{color:#454139;display:flex}.question-content{padding:32px 20px 22px}.question-content h1{font-size:32px}.lead{margin-bottom:24px}.choice-grid{grid-template-columns:1fr}.setup-footer{padding:0 20px}.preview-pane{z-index:10;padding:50px 10px 10px;transition:transform .25s;position:fixed;inset:0;transform:translateY(105%)}.preview-pane.open{transform:none}.preview-close{color:#fff;background:#171714;border:0;border-radius:50%;place-items:center;width:36px;height:36px;display:grid;position:absolute;top:8px;right:10px}.browser{border-radius:10px}.directions{padding-bottom:8px}}:root{color:#f7f5ef;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--setup-bg:#0b0d12;--setup-surface:#13161d;--setup-raised:#191d25;--setup-line:#2a303b;--setup-text:#f7f5ef;--setup-muted:#a6afbd;--setup-blue:#3f72ff;background:#0b0d12}.question-pane,.setup-footer{background:var(--setup-surface);border-color:var(--setup-line)}.wordmark,.question-content h1{color:var(--setup-text)}.wordmark span{color:var(--setup-blue)}.progress{background:var(--setup-line)}.progress::-webkit-progress-bar{background:var(--setup-line)}.progress::-webkit-progress-value{background:var(--setup-blue)}.progress::-moz-progress-bar{background:var(--setup-blue)}.eyebrow,.lead,.step-count,.choice-detail small,.category-group legend,.helper{color:var(--setup-muted)}.question-content input,.question-content textarea,.choice,.category-search{background:var(--setup-raised);border-color:var(--setup-line);color:var(--setup-text)}.question-content input:focus,.question-content textarea:focus,.category-search:focus{border-color:var(--setup-blue);box-shadow:0 0 0 3px #3f72ff33}.choice:hover{border-color:#647087}.choice.selected{border-color:var(--setup-blue);box-shadow:0 0 0 1px var(--setup-blue)}.direction.selected{outline-color:var(--setup-blue)}.setup-footer .back,.preview-trigger{color:var(--setup-muted)}.setup-footer .continue{background:var(--setup-blue);color:#fff}.preview-pane{background:radial-gradient(circle at 90% 10%,#233662 0,#0000 30%),linear-gradient(135deg,#111722,#0b0d12)}.browser{border-color:#343d4b;box-shadow:0 22px 70px #0009}.browser-bar{background:var(--setup-raised);border-color:var(--setup-line)}.browser-bar b,.preview-loading{color:var(--setup-muted)}.preview-close{background:var(--setup-blue)}

/* ==========================================================================
   Twee fasen in de setup-flow — 03-09-2026, verzoek Arian
   --------------------------------------------------------------------------
   Bij de eerste twee vragen (naam/omschrijving en categorie) weet de flow nog
   niets van de klant. De preview stond daar toch al te draaien en liet een
   generieke voorbeeldsite zien — de kop "A clear introduction to what you do"
   met een willekeurige stockfoto. Dat is geen preview, dat is ruis.

   Vanaf hier: de vroege keuzes staan als één gecentreerde kaart op het scherm.
   De preview komt terug bij doel en richting, waar hij wél iets van de klant
   laat zien. Een kaart en niet een losse kolom: zonder omlijsting zweeft de
   vraag in een leeg vlak en ziet het er onaf uit.

   De klassen `step-identity`, `step-category`, `step-niche`, `step-path`,
   `step-goal` en `step-direction` komen uit de bundle
   (`className: setup-shell step-${o}`). Dat is de enige plek waar de huidige
   stap in de DOM staat; zonder die klasse kan CSS niet weten welke vraag in
   beeld is.
   ========================================================================== */

.setup-shell.step-identity,
.setup-shell.step-category {
  --rand: 26px;                                   /* lucht rond de kaart */
  grid-template-columns: min(var(--kaart), 100%);
  grid-template-rows: minmax(0, auto);
  justify-content: center;
  align-content: center;
  padding: var(--rand);
}
.setup-shell.step-identity { --kaart: 620px }     /* twee velden: smal en rustig */
.setup-shell.step-category { --kaart: 920px }     /* 23 keuzes: ruimte voor 3 kolommen */

/* De preview blijft in de DOM staan — zo is hij al geladen zodra stap 3 begint
   — maar is hier niet zichtbaar en niet bereikbaar. */
.setup-shell.step-identity .preview-pane,
.setup-shell.step-category .preview-pane,
.setup-shell.step-identity .preview-trigger,
.setup-shell.step-category .preview-trigger {
  display: none;
}

/* Het paneel is nu een kaart in plaats van een kolom tegen de linkerrand: rand
   rondom in plaats van alleen rechts, en hij hoogt mee met zijn inhoud
   (`minmax(0,auto)`) tot het scherm vol is. */
.setup-shell.step-identity .question-pane,
.setup-shell.step-category .question-pane {
  grid-template-rows: 68px 3px minmax(0, auto) 76px;
  border: 1px solid var(--setup-line);
  border-radius: 18px;
  overflow: hidden;
  /* kaart en achtergrond schelen maar een paar procent helderheid; zonder
     schaduw plakt de kaart tegen het vlak in plaats van erop te liggen */
  box-shadow: 0 24px 70px #00000073;
}
/* 68 + 3 + 76 kop/voet + twee keer de rand: wat er overblijft voor de vraag.
   Staat ook op .question-content zelf, want een grid-rij krimpt niet altijd
   mee met een max-height op de container. */
.setup-shell.step-identity .question-pane,
.setup-shell.step-category .question-pane {
  max-height: calc(100dvh - 2 * var(--rand));
}
.setup-shell.step-identity .question-content,
.setup-shell.step-category .question-content {
  max-height: calc(100dvh - 2 * var(--rand) - 147px);
}

/* Stap 1: twee velden, dus de kop mag de volle kaartbreedte gebruiken. */
.setup-shell.step-identity .question-content {
  padding: 42px 34px 34px;
}
.setup-shell.step-identity .question-content h1 {
  max-width: none;
}

/* Stap 2: de kop hoeft niet over de volle 920px te lopen. */
.setup-shell.step-category .question-content h1 {
  max-width: 620px;
}
.setup-shell.step-category .lead {
  max-width: 520px;
}
.setup-shell.step-category .category-search {
  max-width: 420px;
}
.setup-shell.step-category .category-groups {
  gap: 28px;
}
/* Meegroeien met de kaart: drie kolommen op een breed scherm, één op een
   telefoon — zonder een tweede mediaquery die uit de pas kan gaan lopen. */
.setup-shell.step-category .choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Op een telefoon is er geen ruimte voor een kaart: terug naar het volle
   scherm, precies zoals de andere twee stappen daar al staan. */
@media (width <= 760px) {
  .setup-shell.step-identity,
  .setup-shell.step-category {
    --rand: 0px;
    display: block;
    padding: 0;
  }
  .setup-shell.step-identity .question-pane,
  .setup-shell.step-category .question-pane {
    grid-template-rows: 62px 3px minmax(0, 1fr) 72px;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .setup-shell.step-identity .question-content,
  .setup-shell.step-category .question-content {
    max-height: none;
    padding: 32px 20px 22px;
  }
}

/* ==========================================================================
   De nichekeuze, vork en templategalerij — 12-09-2026
   --------------------------------------------------------------------------
   Na de categorievraag kiest de klant eerst een specialistische blauwdruk en
   daarna hoe hij verder wil: een afgemaakt ontwerp uit zijn eigen branche, of
   de volledige wizard. Deze stappen weten nog niets wat een preview zou kunnen
   tonen, dus ze staan -- net als stap 1 en 2 hierboven -- als één gecentreerde
   kaart op het scherm.

   Bij `step-template` is de kaart breder: daar staan zevenentwintig
   miniaturen in, en die moeten met z'n drieën of vieren naast elkaar passen
   voor je iets kunt vergelijken.
   ========================================================================== */

.setup-shell.step-niche,
.setup-shell.step-path,
.setup-shell.step-template {
  --rand: 26px;
  grid-template-columns: min(var(--kaart), 100%);
  grid-template-rows: minmax(0, auto);
  justify-content: center;
  align-content: center;
  padding: var(--rand);
}
.setup-shell.step-niche    { --kaart: 920px }    /* nichekaarten en ontwerpintensiteit */
.setup-shell.step-path     { --kaart: 760px }    /* twee kaarten naast elkaar */
.setup-shell.step-template { --kaart: 1180px }   /* vier miniaturen op een rij */

.setup-shell.step-niche .preview-pane,
.setup-shell.step-path .preview-pane,
.setup-shell.step-template .preview-pane,
.setup-shell.step-niche .preview-trigger,
.setup-shell.step-path .preview-trigger,
.setup-shell.step-template .preview-trigger {
  display: none;
}

.setup-shell.step-path .question-pane,
.setup-shell.step-niche .question-pane,
.setup-shell.step-template .question-pane {
  grid-template-rows: 68px 3px minmax(0, auto) 76px;
  border: 1px solid var(--setup-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px #00000073;
  max-height: calc(100dvh - 2 * var(--rand));
}
.setup-shell.step-path .question-content,
.setup-shell.step-niche .question-content,
.setup-shell.step-template .question-content {
  max-height: calc(100dvh - 2 * var(--rand) - 147px);
}
.setup-shell.step-path .question-content h1,
.setup-shell.step-niche .question-content h1,
.setup-shell.step-template .question-content h1 { max-width: 640px }
.setup-shell.step-path .lead,
.setup-shell.step-niche .lead,
.setup-shell.step-template .lead { max-width: 620px }

/* ---- de vork: twee wegen ------------------------------------------------ */

.pathcards {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  display: grid;
}
.pathcard {
  appearance: none;
  cursor: pointer;
  text-align: left;
  color: var(--setup-text);
  background: var(--setup-raised);
  border: 1px solid var(--setup-line);
  border-radius: 14px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 20px;
  font: inherit;
  transition: border-color .16s, transform .16s;
  display: flex;
}
.pathcard:hover { border-color: #647087; transform: translateY(-2px) }
.pathcard.selected {
  border-color: var(--setup-blue);
  box-shadow: 0 0 0 1px var(--setup-blue);
}
.pathcard-body { gap: 8px; display: grid }
.pathcard strong { font: 600 17px/1.2 Manrope, sans-serif; letter-spacing: -.4px }
.pathcard small { color: var(--setup-muted); font-size: 13px; line-height: 1.5 }
.pathcard em {
  color: #93b4ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.nichecards { margin-bottom: 18px }
.vibecards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vibecard{min-height:126px;align-items:center;gap:16px}
.vibe-swatch{display:flex;align-items:flex-end;gap:5px;width:52px;height:62px;padding:8px;flex-shrink:0;border:1px solid #ffffff30}
.vibe-swatch span{display:block;width:15px;height:32px}
.vibe-swatch span:last-child{height:19px}
.vibecard .pathcard-body{min-width:0}
.vibecard>svg{flex-shrink:0}
@media(max-width:620px){.vibecards{grid-template-columns:1fr}.vibecard{min-height:100px}}
.intensitycards { grid-template-columns: repeat(3, 1fr) }
.intensitycards .pathcard { padding: 16px }
.intensitycards .pathcard strong { font-size: 14px }
/* het vinkje mag niet meekrimpen als de tekst lang is */
.pathcard > svg { flex: none; color: var(--setup-blue); margin-top: 2px }

/* ---- de templategalerij ------------------------------------------------- */

.template-groups { gap: 30px; margin-top: 10px; display: grid }
.template-group { border: 0; gap: 14px; margin: 0; padding: 0; display: grid }
.template-group legend {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--setup-muted);
  padding: 0;
  font-size: 12px;
  font-weight: 700;
}
.template-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px 16px;
  display: grid;
}
.template {
  appearance: none;
  cursor: pointer;
  text-align: left;
  color: var(--setup-text);
  background: 0 0;
  border: 0;
  border-radius: 12px;
  gap: 10px;
  padding: 0;
  font: inherit;
  display: grid;
  position: relative;
}
/* De miniatuur is de knop; de rand zit om het beeld, niet om de hele kaart,
   zodat de naam eronder niet in een doos komt te staan. */
.template-shot {
  border: 1px solid var(--setup-line);
  border-radius: 11px;
  aspect-ratio: 660 / 410;
  background: var(--setup-raised);
  display: block;
  overflow: hidden;
  position: relative;
  transition: border-color .16s, transform .16s;
}
.template-shot img { display: block; width: 100%; height: auto }
.template:hover .template-shot { border-color: #647087; transform: translateY(-2px) }
.template:focus-visible { outline: 0 }
.template:focus-visible .template-shot {
  outline: 2px solid var(--setup-blue);
  outline-offset: 2px;
}
.template.selected .template-shot {
  border-color: var(--setup-blue);
  box-shadow: 0 0 0 2px var(--setup-blue);
}
.template-badge {
  background: var(--setup-blue);
  color: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  top: 8px;
  left: 8px;
}
.template-meta { gap: 2px; padding: 0 2px; display: grid }
.template-meta strong { font: 600 14px/1.25 Manrope, sans-serif }
.template-meta small { color: var(--setup-muted); font-size: 12px; line-height: 1.4 }
.template-meta .template-reason { color: #3f5f96; margin-top: 5px }
.template-check {
  background: var(--setup-blue);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 26px;
  height: 26px;
  display: grid;
  position: absolute;
  top: 8px;
  right: 8px;
}
.browse-all{color:var(--setup-text);background:var(--setup-raised);border:1px solid var(--setup-line);border-radius:10px;padding:13px 16px;font:600 13px/1.3 Manrope,sans-serif;text-align:center;cursor:pointer}
.browse-all:hover{border-color:var(--setup-blue);color:#fff}

/* Op een telefoon is er geen ruimte voor een kaart: terug naar het volle
   scherm, net als stap 1 en 2 daar al doen. */
@media (width <= 760px) {
  .setup-shell.step-path,
  .setup-shell.step-niche,
  .setup-shell.step-template {
    --rand: 0px;
    display: block;
    padding: 0;
  }
  .setup-shell.step-path .question-pane,
  .setup-shell.step-niche .question-pane,
  .setup-shell.step-template .question-pane {
    grid-template-rows: 62px 3px minmax(0, 1fr) 72px;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .setup-shell.step-path .question-content,
  .setup-shell.step-niche .question-content,
  .setup-shell.step-template .question-content {
    max-height: none;
    padding: 32px 20px 22px;
  }
  .pathcards, .intensitycards { grid-template-columns: 1fr }
  .template-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) }
}

.domain-search label{display:block;margin-bottom:10px;font-weight:600}.domain-search-row{display:flex;gap:12px}.domain-search-row input{min-width:0;flex:1;font-size:16px}.domain-search-row button{white-space:nowrap}.domain-result{margin:18px 0;line-height:1.6;overflow-wrap:anywhere}.domain-result.available{color:#216847}.domain-result.error,.domain-result.unavailable{color:#934526}@media(max-width:620px){.domain-search-row{flex-direction:column}}
/* A focused address step, with the same card styling as the earlier questions. */
.setup-shell.step-domain{grid-template-columns:min(760px,100%);grid-template-rows:minmax(0,auto);justify-content:center;align-content:center;padding:26px}
.step-domain .preview-pane,.step-domain .preview-trigger{display:none}
.step-domain .question-pane{border:1px solid var(--setup-line);border-radius:18px;overflow:hidden;min-height:min(700px,calc(100dvh - 52px))}
.step-domain .question-content{padding:38px;max-height:calc(100dvh - 210px);overflow-y:auto}
.step-domain .question-content h1{font-size:clamp(30px,4vw,40px)}
.domain-search-row button{border:0;border-radius:10px;padding:14px 18px;background:var(--setup-blue,#3d6cff);color:#fff;font:600 14px/1.4 Manrope,sans-serif;cursor:pointer}
.domain-search-row button:disabled{opacity:.55;cursor:default}
.domain-result.available{color:#91d8ae}.domain-result.error,.domain-result.unavailable{color:#f0bc99}
@media(max-width:760px){.setup-shell.step-domain{display:block;padding:0}.step-domain .question-pane{height:100dvh;border:0;border-radius:0;grid-template-rows:62px 3px minmax(0,1fr) 72px}.step-domain .question-content{max-height:none;padding:30px 20px}}

.domain-extensions{border:0;padding:0;margin:24px 0;min-width:0}.domain-extensions legend{font-size:14px;font-weight:600;margin-bottom:12px}.domain-extension{display:flex;align-items:center;gap:14px;padding:16px;margin:10px 0;border:1px solid var(--setup-line);border-radius:12px;background:var(--setup-raised);cursor:pointer}.domain-extension.selected{border-color:var(--setup-blue);box-shadow:inset 0 0 0 1px var(--setup-blue)}.domain-extension.disabled{opacity:.6;cursor:default}.domain-extension input{width:18px;height:18px;flex:0 0 18px;margin:0;accent-color:var(--setup-blue)}.domain-extension-name{flex:1;min-width:0}.domain-extension-name strong{display:block;font-size:16px;overflow-wrap:anywhere}.domain-extension-name small{display:block;margin-top:4px;color:var(--setup-muted);font-size:13px}.domain-extension-ending{font-size:15px;font-weight:600;color:var(--setup-muted)}.domain-extension:focus-within{outline:2px solid var(--setup-blue);outline-offset:3px}
.step-domain .domain-extensions .domain-extension{display:flex;flex-direction:row;align-items:center;gap:14px}.step-domain .domain-extensions .domain-extension input{width:18px;height:18px;padding:0;margin:0;flex:0 0 18px}

/* Compact domain search with progressively disclosed results. */
.step-domain .domain-search-label{font-size:14px;font-weight:600;margin:24px 0 10px}
.domain-searchbox{display:flex;align-items:center;border:1px solid var(--setup-line);border-radius:10px;background:var(--setup-raised);overflow:hidden}
.domain-searchbox>span{padding:15px 0 15px 16px;color:var(--setup-muted);font-size:16px}
.step-domain .domain-searchbox input{border:0;box-shadow:none;background:transparent;min-width:0;width:100%;padding:15px 12px;font-size:16px;margin:0}
.domain-searchbox:focus-within{outline:2px solid var(--setup-blue);outline-offset:2px}
.domain-results{border:0;padding:0;margin:18px 0 0;min-width:0}.domain-results-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.step-domain .domain-results .domain-result-row{display:flex;flex-direction:row;align-items:center;gap:12px;min-height:58px;padding:14px 10px;margin:0;border-bottom:1px solid var(--setup-line);cursor:pointer}
.domain-result-row.selected{background:#3d6cff12}.step-domain .domain-result-row input{width:17px;height:17px;flex:0 0 17px;margin:0;padding:0;accent-color:var(--setup-blue)}
.domain-result-row strong{font-size:15px;font-weight:550;flex:1;min-width:0;overflow-wrap:anywhere}.domain-row-status{font-size:13px;color:var(--setup-muted);text-align:right}.domain-row-status.available{color:#91d8ae}.domain-row-status.unavailable,.domain-row-status.unknown{color:#f0bc99}
.domain-result-row:focus-within{outline:2px solid var(--setup-blue);outline-offset:1px}.domain-more{border:0;background:none;color:#9ab6ff;padding:14px 0;font:600 14px/1.5 Manrope,sans-serif;text-align:left;cursor:pointer}.domain-more:hover{text-decoration:underline}
.domain-check-note{margin:14px 0 18px}.domain-later{margin-top:14px}.domain-empty{margin:16px 0 24px}
@media(max-width:420px){.step-domain .domain-results .domain-result-row{gap:9px;padding:13px 3px}.domain-row-status{max-width:90px;font-size:12px}.domain-result-row strong{font-size:14px}}

.domain-test-notice{border:1px solid #8c6933;background:#3d301b;color:#f3d5a7;border-radius:10px;padding:14px 16px;margin:18px 0;font-size:14px;line-height:1.6}.domain-test-notice p{margin:5px 0 0}.domain-row-status.test_available,.domain-row-status.test_unavailable{color:#f3d5a7}

/* Guided self-build: use the product's quiet paper/green palette. */
.guided-route{--setup-bg:#f6f5ef;--setup-surface:#fffdf8;--setup-raised:#fff;--setup-line:#d8ded5;--setup-text:#173d2c;--setup-muted:#647069;--setup-blue:#275c43;color:var(--setup-text);background:var(--setup-bg);color-scheme:light}
.guided-route .preview-pane{background:#e7ebe4}
.guided-route .question-pane,.guided-route .browser{box-shadow:none}
/* The preview fills its half edge to edge, straight against the questions. */
@media(min-width:761px){.guided-route .preview-pane{padding:0;background:var(--setup-raised)}.guided-route .browser{border:0;border-radius:0}}
.guided-route .question-content{padding-top:32px}
.guided-route .question-content h1{font-size:clamp(28px,2.4vw,36px);letter-spacing:-1px;overflow-wrap:anywhere}
.guided-route.step-identity{--kaart:860px}
@media(min-width:761px){.guided-route.step-identity .question-content{padding:64px 60px 56px}}
.guided-route.step-identity .question-content label,.guided-route.step-identity .category-label{display:block;margin:24px 0 0;font-size:16px;font-weight:600}
.guided-route.step-identity .question-content input,.guided-route.step-identity .question-content textarea{padding:16px 17px;font-family:inherit;font-size:17px;font-weight:500;line-height:1.45}
.guided-route.step-identity .question-content textarea{min-height:128px}
.guided-route.step-identity .description-words{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.guided-route.step-identity .description-word{padding:7px 12px;border:1px solid var(--setup-line);border-radius:999px;background:var(--setup-raised);color:var(--setup-text);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .16s,background .16s}
.guided-route.step-identity .description-word:hover:not(:disabled){border-color:var(--setup-blue);background:#eef3ec}
.guided-route.step-identity .description-word:disabled{cursor:default;border-color:transparent;background:#e3ede4;color:var(--setup-blue)}
.guided-route.step-identity .category-trigger{display:flex;align-items:center;width:100%;margin-top:8px;padding:16px 46px 16px 17px;text-align:left;cursor:pointer;border:1px solid var(--setup-line);border-radius:10px;color:var(--setup-text);font-family:inherit;font-size:17px;font-weight:500;line-height:1.45;background:var(--setup-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23647069' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 17px center;transition:border-color .16s,box-shadow .16s}
.guided-route.step-identity .category-trigger.empty{color:var(--setup-muted)}
.guided-route.step-identity .category-trigger:hover{border-color:#a9b5ab}
.guided-route.step-identity .category-trigger:focus-visible,.guided-route.step-identity .category-picker.open .category-trigger{outline:0;border-color:var(--setup-blue);box-shadow:0 0 0 3px #275c4326}
.guided-route.step-identity .category-picker.open .category-trigger{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23275c43' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E")}
.guided-route.step-identity .category-list{list-style:none;margin:8px 0 0;padding:6px;max-height:320px;overflow-y:auto;border:1px solid var(--setup-line);border-radius:12px;background:var(--setup-raised);box-shadow:0 6px 18px #173d2c1a;animation:.16s both enter}
.guided-route.step-identity .category-list ul{list-style:none;margin:0;padding:0}
.guided-route.step-identity .category-section+.category-section{margin-top:6px;padding-top:6px;border-top:1px solid var(--setup-line)}
.guided-route.step-identity .category-heading{padding:8px 12px 4px;color:var(--setup-muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.guided-route.step-identity .category-option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;font-size:15px;font-weight:500;color:var(--setup-text)}
.guided-route.step-identity .category-option.active{background:#eef3ec}
.guided-route.step-identity .category-option.selected{background:#e3ede4;color:var(--setup-blue);font-weight:600}
.guided-route.step-identity .category-option svg{flex:none;color:var(--setup-blue)}
.guided-route .question-content select{width:100%;margin-top:8px;padding:12px;border:1px solid var(--setup-line);border-radius:8px;background:var(--setup-raised);color:var(--setup-text);font:inherit}
.guided-route button:focus-visible,.guided-route summary:focus-visible,.guided-route select:focus-visible{outline:3px solid #b99729;outline-offset:3px}
.guided-route .pathcard{color:var(--setup-text);background:var(--setup-raised)}
.self-choices{display:grid;gap:12px;margin:24px 0}
.self-choice{display:grid;gap:7px;text-align:left;padding:18px;border:1px solid var(--setup-line);border-radius:8px;background:var(--setup-raised);color:var(--setup-text);font:inherit;cursor:pointer}
.self-choice small{font-size:13px;line-height:1.5;color:inherit;opacity:.8}
.self-choice.selected{border-color:var(--setup-blue);box-shadow:inset 3px 0 var(--setup-blue)}
.self-sketch{display:block;width:98px;height:55px;border:1px solid var(--setup-line)}
.self-choices:has(.self-shot) .self-sketch{width:100%;height:auto;aspect-ratio:16/10;border-radius:5px}
.self-choices:has(.self-shot){grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.self-choice>.self-badge{justify-self:start}
.self-shot{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:5px;border:1px solid var(--setup-line);background:var(--setup-line)}

.self-style-sample{font-size:24px;overflow-wrap:anywhere}
.self-sections{list-style:none;margin:24px 0;padding:0;display:grid;gap:12px}
.self-sections>li{padding:16px;border:1px solid var(--setup-line);border-radius:8px;background:var(--setup-raised)}
.self-section-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.self-order,.self-layouts,.self-add,.self-preset-group{display:flex;gap:7px;flex-wrap:wrap}
.self-layouts{margin-top:14px}
.self-order button,.self-layouts button,.self-add button,.self-preset-group button,.self-details>button{font:inherit;font-size:13px;min-height:38px;padding:8px 11px;border:1px solid var(--setup-line);background:var(--setup-raised);color:var(--setup-text);border-radius:5px;cursor:pointer}
.self-layouts button[aria-pressed=true],.self-add button[aria-pressed=true],.self-preset-group button[aria-pressed=true]{border-color:var(--setup-blue);background:#edf3e7}
.self-order button:disabled{opacity:.4;cursor:default}
.self-preset-group{border:0;padding:0;margin:22px 0;min-width:0}
.self-preset-group legend{font-size:14px;font-weight:600;margin-bottom:10px}
.self-details{border:1px solid var(--setup-line);border-radius:8px;padding:16px;margin:18px 0;background:var(--setup-raised)}
.self-details summary{font-size:15px;font-weight:600;cursor:pointer;line-height:1.5}
.self-details .self-field{font-size:13px}.self-details>button{margin-top:16px}
.self-details .profile-group{border:0;padding:0;margin:16px 0}
.guided-route .self-color{display:flex;align-items:center;justify-content:space-between}
.guided-route .self-color input{width:58px;height:40px;padding:4px;margin:0}
.guided-route input[type=range]{padding:0;accent-color:var(--setup-blue)}
.self-preview-canvas{position:relative;overflow:hidden;min-height:0;background:#e7ebe4}
.self-preview-canvas iframe{display:block;border:0;max-width:none}
.self-preview-sizes{display:flex;gap:4px}.self-preview-sizes button{font:inherit;font-size:11px;padding:5px;border:1px solid var(--setup-line);border-radius:4px;background:#fff;color:#173d2c;cursor:pointer}
.self-preview-sizes button[aria-pressed=true]{color:#fff;background:#275c43}
@media(max-width:760px){.guided-route .setup-beta-badge{display:none}.guided-route .question-content{padding:28px 20px}.guided-route .browser-bar{padding:0 8px}.guided-route .browser-bar>span{display:none}.guided-route .browser-bar b{max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.self-choices{gap:10px}.self-section-head{align-items:flex-start}}

/* Stap 3 (doel) in de self-build route: grotere, beter leesbare keuzes. */
.guided-route.step-goal .choice-grid{grid-template-columns:1fr;gap:12px}
.guided-route.step-goal .choice-detail{min-height:0;padding:18px 20px;font-family:inherit;border-radius:12px}
.guided-route.step-goal .choice-detail span{gap:6px}
.guided-route.step-goal .choice-detail strong{font-size:17px;font-weight:600;line-height:1.3}
.guided-route.step-goal .choice-detail small{font-size:15px;line-height:1.5;opacity:.85}
.guided-route.step-goal .question-content label{margin-top:24px;font-size:16px;font-weight:600}
.guided-route.step-goal .question-content input{padding:16px 17px;font-family:inherit;font-size:17px;font-weight:500;line-height:1.45}

/* Local previews of files selected for the setup step. */
.selected-images{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:9px}.selected-image{display:block;width:100%;height:82px;object-fit:cover;border:1px solid var(--setup-line);border-radius:8px;background:var(--setup-raised)}.asset-grid>label>.selected-image{width:120px;margin-top:9px}

/* Build it yourself — Style, Colours and Fonts (from the first, Squarespace-style
   setup) and the pages step that shows every page side by side. */
.self-looks,.self-grid{display:grid;gap:12px;margin:24px 0}
.self-grid{grid-template-columns:1fr 1fr;margin:12px 0 26px}
.self-look,.self-palette,.self-fontpair{display:grid;gap:6px;align-content:start;text-align:left;padding:14px;border:1px solid var(--setup-line);border-radius:8px;background:var(--setup-raised);color:var(--setup-text);font:inherit;cursor:pointer;position:relative}
.self-look:hover,.self-palette:hover,.self-fontpair:hover{border-color:#8f9a90}
.self-look.selected,.self-palette.selected,.self-fontpair.selected{border-color:var(--setup-blue);box-shadow:0 0 0 1px var(--setup-blue)}
.self-look.selected::after,.self-palette.selected::after,.self-fontpair.selected::after{content:"✓";position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--setup-blue);color:#fff;font-size:11px;line-height:20px;text-align:center}
.self-look>strong{font-size:16px;margin-top:6px}.self-look>small,.self-fontpair>small{font-size:13px;line-height:1.45;opacity:.8}
.self-look-meta{font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.self-sample{display:grid;gap:6px;justify-items:start;padding:14px 14px 0;border:1px solid #0000001a;border-radius:4px;overflow:hidden}
.self-sample b{font-size:18px;font-weight:600;line-height:1.15}
.self-sample i{font-style:normal;font-size:11px;opacity:.75}
.self-sample em{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px;margin:4px 0 10px}
.self-swatches{display:flex;width:100%;height:6px}.self-swatches span{flex:1}
.self-sample .self-swatches{margin:0 -14px;width:calc(100% + 28px)}
.self-swatches.big{height:40px;border-radius:4px;overflow:hidden;border:1px solid #0000001a}
.self-palette strong,.self-fontpair strong{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px;padding-right:18px}
.self-badge{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:99px;background:var(--setup-text);color:var(--setup-surface)}
.self-group-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--setup-muted);margin:6px 0 0}
.self-group-label span{font-weight:500;letter-spacing:0;text-transform:none}
.step-fonts .self-grid{grid-template-columns:1fr}
.self-fontpair-aa{font-size:34px;line-height:1}
.self-fontpair-line{font-size:13px;opacity:.8;padding-bottom:10px;border-bottom:1px solid var(--setup-line)}
.self-pages-overview{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}
.self-pages-count{margin:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--setup-muted)}
.self-pages-strip{display:flex;gap:22px;min-height:0;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:10px}
.self-page-column{flex:0 0 600px;margin:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;min-height:0}
.self-page-column figcaption{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--setup-muted)}
.self-page-column .self-preview-canvas,.self-page-column .preview-loading{height:100%;border-radius:10px;border:1px solid var(--setup-line);box-shadow:0 14px 40px #1f2a2224;background:#fff}
@media(max-width:760px){.self-grid{grid-template-columns:1fr 1fr}.self-page-column{flex-basis:330px}}

/* Build it yourself: small building blocks per section (SectionDesign). */
.self-block-design{margin:14px 0 0}
.self-block-design summary small{font-weight:500;color:var(--setup-muted)}
.self-block-group{margin:14px 0 0!important}
.self-block-group legend{font-size:12px!important;letter-spacing:.06em;text-transform:uppercase;color:var(--setup-muted);margin-bottom:6px!important}
.self-block-group button{min-height:34px!important;padding:6px 10px!important}
.self-block-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.self-block-actions button{font:inherit;font-size:13px;min-height:36px;padding:7px 12px;border:1px solid var(--setup-line);background:var(--setup-raised);color:var(--setup-text);border-radius:5px;cursor:pointer}
.self-page-choices{margin:14px 0 18px}.self-choices.self-page-choices:has(.self-shot){grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.self-page-choices .self-choice small{font-size:12px}
.setup-back-editor{color:var(--setup-muted,#776f61);font-size:13px;font-weight:600;text-decoration:none;margin-left:auto;margin-right:14px}.setup-back-editor:hover{color:var(--setup-text,#171714);text-decoration:underline}
/* Loading screen while a choice is applied: a large white surface with a square that keeps tipping over. */
.browser>.self-preview-canvas,.browser>iframe{grid-row:2;grid-column:1}
.roll-loader{grid-row:2;grid-column:1;z-index:3;background:#fff;display:grid;place-content:center;justify-items:center;gap:22px;min-height:0;animation:roll-in .2s ease-out}
.self-page-column>:not(figcaption){grid-row:2;grid-column:1}
.self-page-column>.roll-loader{border-radius:10px}
.roll-loader p{margin:0;color:#5d6b62;font-size:14px;font-weight:500}
.roll-track{position:relative;width:110px;height:22px;border-bottom:2px solid #e4e8e2}
.roll-step{position:absolute;left:0;bottom:0;width:22px;height:22px;animation:roll-step 2.4s steps(4,end) infinite,roll-fade 2.4s linear infinite}
.roll-square{display:block;width:100%;height:100%;background:#275c43;border-radius:3px;transform-origin:100% 100%;animation:roll-flip .6s cubic-bezier(.55,0,.35,1) infinite}
@keyframes roll-step{to{transform:translateX(88px)}}
@keyframes roll-fade{0%{opacity:0}8%,94%{opacity:1}100%{opacity:0}}
@keyframes roll-flip{0%,15%{transform:rotate(0)}70%,100%{transform:rotate(90deg)}}
@keyframes roll-in{from{opacity:0}}
.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 16px}.quick-shuffle{font:inherit;font-size:18px;font-weight:700;padding:16px 26px;border-radius:12px;border:0;background:var(--setup-accent,#2f5d46);color:#fff;cursor:pointer;box-shadow:0 8px 22px #1f2a2230}.quick-shuffle:hover{filter:brightness(1.08)}.quick-back{font:inherit;padding:14px 18px;border-radius:12px;border:1px solid var(--setup-line);background:transparent;color:inherit;cursor:pointer}.quick-back:disabled{opacity:.45;cursor:default}
.quick-now{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--setup-line);border-radius:12px;margin-bottom:18px}.quick-now span{display:grid;gap:3px}.quick-now strong{font-size:17px}.quick-now small{color:var(--setup-muted)}
.logo-maker{margin:18px 0 8px;padding:16px;border:1px solid var(--setup-line);border-radius:12px}
.logo-maker-head{margin:0 0 12px}.logo-maker-head small{color:var(--setup-muted)}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.logo-option{display:flex;align-items:center;gap:10px;min-height:66px;padding:10px 12px;border:1px solid var(--setup-line);border-radius:10px;cursor:pointer;font:inherit;text-align:left;overflow:hidden}
.logo-option img{width:44px;height:44px;flex:0 0 44px}
.logo-option span{font-weight:700;font-size:15px;line-height:1.15;overflow:hidden;text-overflow:ellipsis}
.logo-option.selected{outline:3px solid var(--setup-accent,#2f5d46);outline-offset:1px}
.logo-wait{width:44px;height:44px;border-radius:50%;background:#0000000f}
.logo-more{margin-top:12px;font:inherit;padding:10px 14px;border-radius:10px;border:1px solid var(--setup-line);background:transparent;color:inherit;cursor:pointer}
.logo-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.logo-option span{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
/* Close button on step 1: back to where the visitor came from. */
.setup-exit{display:grid;place-items:center;width:40px;height:40px;margin-left:auto;border-radius:50%;color:var(--setup-muted,#776f61);text-decoration:none;transition:background .16s,color .16s}
.setup-exit:hover{background:var(--setup-line,#e3dfd5);color:var(--setup-text,#171714)}
.setup-exit:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (width<=760px){.setup-header .preview-trigger{margin-left:auto}.preview-trigger+.setup-exit{margin-left:4px}}