@import url("./concepts-01-02.css");

/* Shared preview controls and production-minded hardening */
:root {
  color-scheme: light;
}

body {
  min-width: 280px;
  overflow-x: clip;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn,
input,
summary,
.concept-dock button,
.footer-links a {
  -webkit-tap-highlight-color: transparent;
}

.feed-item.locked .feed-body {
  filter: none;
  opacity: .18;
}

.feed-item.locked::after {
  content: "Accountpreview";
}

body:has(.concept-dock) { padding-bottom: 90px; }

.concept-dock {
  position: fixed;
  inset: auto 10px 10px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: max-content;
  margin-inline: auto;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(10, 10, 10, .92);
  color: #fff;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px);
  scrollbar-width: none;
}

.concept-dock::-webkit-scrollbar {
  display: none;
}

.concept-dock__label {
  display: none;
  padding-inline: 10px 6px;
  font: 700 .62rem var(--font-data);
  letter-spacing: .14em;
  color: #929292;
}

.concept-dock button {
  min-width: 44px;
  min-height: 44px;
  padding: 5px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #a9a9a9;
  cursor: pointer;
  font: 600 .72rem var(--font-body);
}

.concept-dock button b {
  display: block;
  color: inherit;
  font: 800 .78rem var(--font-data);
}

.concept-dock button span {
  display: none;
}

.concept-dock button[aria-pressed="true"] {
  background: #fff;
  color: #111;
}

.concept-dock button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

footer {
  position: relative;
  padding: 38px 0 46px;
  background: #0c0b0a;
  color: #9a9794;
}

/* Eén balk: bedrijfsgegevens en juridische links links, betaalmethoden rechts. */
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
}

/* Bedrijfsregel met de juridische links eronder: samen smal genoeg om de
   betaalmethoden op dezelfde balk rechts te houden. */
.footer-left {
  display: grid;
  gap: 6px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
  font: 500 .86rem var(--font-data);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-legal i {
  color: #6f7b93;
  font-style: normal;
}

.footer-note {
  max-width: 62ch;
  color: #74716e;
  font-size: .78rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .82rem;
}

.footer-links a {
  color: #c2cadb;
  text-underline-offset: 4px;
}

.footer-links a:hover {
  color: #fff;
}

.footer-links a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.payment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-left: auto;
}

.payment-label {
  font: 700 .72rem var(--font-data);
  letter-spacing: .12em;
  color: #b6c0d4;
}

.payment-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* De officiële merkbestanden hebben hun eigen kaartvorm en achtergrond, dus ze
   staan hier zonder tegel of rand; alleen de hoogte wordt gelijkgetrokken. */
.payment-badges img {
  display: block;
  height: 26px;
  width: auto;
}

.payment-row small {
  color: #676461;
  font-size: .68rem;
}

@media (min-width: 580px) {
  .concept-dock {
    inset-inline: 50%;
    transform: translateX(-50%);
  }

  .concept-dock__label,
  .concept-dock button span {
    display: block;
  }

  .concept-dock button {
    min-width: 82px;
  }

  .payment-row {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .payment-row small {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .topbar .wrap {
    gap: 8px;
  }

  .topbar .live {
    display: none;
  }

  .topbar .btn {
    padding-inline: 11px;
  }

  .tablewrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  tbody {
    display: grid;
    gap: 10px;
  }

  tr {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: 0 1px 3px rgba(25, 27, 31, .07);
  }

  td {
    display: grid;
    grid-template-columns: minmax(76px, .62fr) 1fr;
    gap: 10px;
    padding: 6px 0;
    border: 0;
  }

  td::before {
    color: var(--ink-3);
    font: 700 .64rem var(--font-data);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* Het statuslabel is een span in de waardekolom van een grid en rekte
     daardoor over de volle breedte uit. Een gekleurd vlak van rand tot rand
     leest als een balk, niet als een label bij een woord. */
  td .status {
    justify-self: start;
    width: fit-content;
  }

  td:nth-child(1)::before { content: "Datum"; }
  td:nth-child(2)::before { content: "Gemeente"; }
  td:nth-child(3)::before { content: "Type"; }
  td:nth-child(4)::before { content: "Locatie"; }
  td:nth-child(5)::before { content: "Status"; }
}

@media (max-width: 350px) {
  .logo {
    font-size: 1rem;
  }

  .topbar .btn {
    min-height: 38px;
    padding: 7px 9px;
    font-size: .78rem;
  }

  .concept-dock {
    justify-content: flex-start;
    max-width: calc(100vw - 20px);
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ==========================================================
   03. OPERATOR CONSOLE
   A dark operational rail paired with a warm, analytical canvas.
   ========================================================== */

:root[data-concept="operator"] {
  --ink: #171915;
  --ink-2: #4f524b;
  --ink-3: #74766f;
  --paper: #f0efe9;
  --card: #fbfaf6;
  --line: #d5d4cc;
  --ok: #607e45;
  --warn: #8f572d;
  --accent: #668f48;
  --accent-ink: #0c1208;
  --accent-soft: #e1ead9;
  --radius: 20px;
  --shadow: 0 18px 48px rgba(24, 26, 20, .09);
  --wrap: 1160px;
}

[data-concept="operator"] body {
  background: #11120f;
}

[data-concept="operator"] .topbar {
  background: #10110f;
  color: #f7f4eb;
  border-color: #2a2c27;
}

[data-concept="operator"] .logo b {
  color: #a8c591;
}

[data-concept="operator"] .topbar .live {
  color: #96998f;
}

[data-concept="operator"] .topbar .btn {
  background: #d6b390;
  color: #17120f;
}

[data-concept="operator"] main,
[data-concept="operator"] .trust {
  background: var(--paper);
}

[data-concept="operator"] .hero {
  position: relative;
  overflow: hidden;
  padding-top: 34px;
}

[data-concept="operator"] .hero::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -130px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 35%, #d7b89c 0 16%, #93ae79 55%, transparent 56%);
  opacity: .42;
  filter: blur(8px);
}

[data-concept="operator"] .hero .wrap {
  position: relative;
}

[data-concept="operator"] .hero-copy {
  align-content: center;
  padding: 12px 0;
}

[data-concept="operator"] .kicker {
  color: #506c3d;
}

[data-concept="operator"] h1 {
  max-width: 13ch;
  font-size: clamp(2.4rem, 7vw, 4.9rem);
  letter-spacing: -.055em;
}

[data-concept="operator"] .hero form {
  max-width: 620px;
  padding: 8px;
  border: 1px solid #dedcd3;
  border-radius: 18px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 12px 30px rgba(25, 28, 21, .07);
}

[data-concept="operator"] .hero input[type="text"] {
  border: 0;
  background: transparent;
}

[data-concept="operator"] .btn {
  border-radius: 13px;
}

[data-concept="operator"] .btn-primary {
  background: #171915;
  color: #fff;
}

[data-concept="operator"] .feed {
  position: relative;
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 17%, rgba(208, 172, 138, .46), transparent 24%),
    linear-gradient(145deg, #fbfaf6, #e4ebdd);
  box-shadow: 0 28px 70px rgba(31, 34, 26, .16);
}

[data-concept="operator"] .feed::after {
  content: "82% relevant";
  position: absolute;
  right: 16px;
  bottom: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #151713;
  color: #fff;
  font: 700 .65rem var(--font-data);
}

[data-concept="operator"] .feed-head {
  border: 0;
  padding: 20px 20px 12px;
}

[data-concept="operator"] .feed-item {
  margin: 0 10px 8px;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .7);
}

[data-concept="operator"] .feed-item:last-child {
  margin-bottom: 58px;
}

[data-concept="operator"] .feed-body .chip {
  background: #dfe9d6;
  color: #375229;
}

[data-concept="operator"] .trust {
  border: 0;
  padding: 8px 0 28px;
}

[data-concept="operator"] .trust .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  padding: 0;
  border-radius: 22px;
  background: #383a34;
}

[data-concept="operator"] .stat {
  min-height: 102px;
  align-content: center;
  gap: 2px;
  padding: 20px 24px;
  background: #181a16;
  color: #f7f5ed;
}

[data-concept="operator"] .stat:first-child {
  background: #acc594;
  color: #17200f;
}

[data-concept="operator"] .stat:nth-child(2) {
  background: #d7b598;
  color: #231810;
}

[data-concept="operator"] .stat span {
  color: inherit;
  opacity: .65;
}

[data-concept="operator"] main > section:not(.hero):not(.final) {
  border-top: 1px solid #deddd6;
}

[data-concept="operator"] .steps {
  grid-auto-rows: 1fr;
}

[data-concept="operator"] .step {
  min-height: 210px;
  align-content: end;
  border: 0;
  border-radius: 22px;
  background: #fbfaf6;
  box-shadow: inset 0 0 0 1px #deddd5;
}

[data-concept="operator"] .step:nth-child(2) {
  background: linear-gradient(145deg, #e4eddb, #f7eee6);
  box-shadow: none;
}

[data-concept="operator"] .step .n {
  margin-bottom: auto;
  color: #5f7d49;
}

[data-concept="operator"] .tablewrap {
  border: 0;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

[data-concept="operator"] th {
  background: #ecebe4;
}

[data-concept="operator"] .roi {
  border: 0;
  border-radius: 20px;
  background: #171915;
  color: #f8f5ed;
}

[data-concept="operator"] .plans {
  max-width: none;
}

[data-concept="operator"] .plan {
  min-height: 330px;
  border: 0;
  border-radius: 24px;
  background: #fbfaf6;
  box-shadow: inset 0 0 0 1px #d8d7cf;
}

[data-concept="operator"] .plan.featured {
  background:
    radial-gradient(circle at 85% 8%, rgba(208, 172, 138, .75), transparent 24%),
    #dce8d2;
  color: #17200f;
  box-shadow: none;
}

[data-concept="operator"] .plan .badge {
  top: 18px;
  right: 18px;
  left: auto;
  background: #171915;
}

[data-concept="operator"] details {
  border: 0;
  border-bottom: 1px solid #cfcec6;
  border-radius: 0;
  background: transparent;
}

[data-concept="operator"] .final {
  position: relative;
  overflow: hidden;
  background: #181a16;
}

[data-concept="operator"] .final::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -130px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a9c492, #d2a985);
  opacity: .82;
}

[data-concept="operator"] .final .wrap {
  position: relative;
  z-index: 1;
}

[data-concept="operator"] .final .btn-primary {
  background: #eef4e8;
  color: #151713;
}

@media (min-width: 720px) {
  [data-concept="operator"] .trust .wrap {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 980px) {
  [data-concept="operator"] .topbar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 154px;
    border-right: 1px solid #2a2c27;
    border-bottom: 0;
  }

  [data-concept="operator"] .topbar .wrap {
    height: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 28px 18px;
  }

  [data-concept="operator"] .topbar .logo {
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  [data-concept="operator"] .topbar .live {
    margin-top: 28px;
    line-height: 1.4;
  }

  [data-concept="operator"] .topbar .btn {
    width: 100%;
    margin: auto 0 0;
    padding-inline: 10px;
  }

  [data-concept="operator"] main,
  [data-concept="operator"] .trust,
  [data-concept="operator"] footer {
    margin-left: 154px;
  }

  [data-concept="operator"] .concept-dock {
    margin-left: 77px;
  }

  [data-concept="operator"] .hero .wrap {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================
   04. REGIONAL INTELLIGENCE
   Capsule navigation, lavender canvas and map-like data modules.
   ========================================================== */

:root[data-concept="regional"] {
  --ink: #18231a;
  --ink-2: #5a5963;
  --ink-3: #777582;
  --paper: #eeeaf5;
  --card: #fbf9ff;
  --line: #d8d2e3;
  --ok: #3f9e29;
  --warn: #816a12;
  --accent: #3926d6;
  --accent-ink: #fff;
  --accent-soft: #e2ddff;
  --radius: 18px;
  --shadow: 0 16px 50px rgba(54, 39, 90, .12);
  --wrap: 1160px;
}

[data-concept="regional"] body {
  padding-top: 6px;
  background: #575164;
}

[data-concept="regional"] .topbar {
  top: 8px;
  width: calc(100% - 16px);
  max-width: 1180px;
  margin: 0 auto 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(248, 245, 252, .94);
  box-shadow: 0 12px 40px rgba(31, 22, 42, .18);
  backdrop-filter: blur(14px);
}

[data-concept="regional"] .topbar .wrap {
  padding: 8px 12px 8px 18px;
}

[data-concept="regional"] .logo b {
  color: #3926d6;
}

[data-concept="regional"] .topbar .btn,
[data-concept="regional"] .btn {
  border-radius: 999px;
}

[data-concept="regional"] main {
  margin: 0 6px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--paper);
}

[data-concept="regional"] .hero {
  position: relative;
  overflow: hidden;
  padding-top: 40px;
}

[data-concept="regional"] .hero::after {
  content: "";
  position: absolute;
  top: -130px;
  right: -100px;
  width: 380px;
  height: 380px;
  border-radius: 48% 52% 65% 35%;
  background:
    radial-gradient(circle at 45% 38%, #54bd26 0 16%, transparent 17%),
    conic-gradient(from 180deg, #3521dd, #aa5492, #b4b81e, #3521dd);
  opacity: .2;
  filter: blur(8px);
}

[data-concept="regional"] .hero .wrap {
  position: relative;
  z-index: 1;
}

[data-concept="regional"] .kicker {
  display: inline-flex;
  width: max-content;
  padding: 6px 11px;
  border-radius: 999px;
  background: #dfdaf0;
  color: #4c3cb3;
}

[data-concept="regional"] h1 {
  max-width: 14ch;
  font-size: clamp(2.35rem, 7vw, 4.65rem);
  letter-spacing: -.055em;
}

[data-concept="regional"] .hero form {
  max-width: 620px;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(55, 41, 89, .1);
}

[data-concept="regional"] .hero input[type="text"] {
  border: 0;
  border-radius: 999px;
  background: transparent;
}

[data-concept="regional"] .hero form .micro {
  padding: 0 12px 8px;
}

[data-concept="regional"] .feed {
  position: relative;
  padding: 12px;
  border: 0;
  border-radius: 28px;
  background:
    linear-gradient(110deg, transparent 0 48%, rgba(57, 38, 214, .08) 49% 51%, transparent 52%),
    linear-gradient(25deg, transparent 0 48%, rgba(84, 189, 38, .08) 49% 51%, transparent 52%),
    #f9f7fd;
  box-shadow: var(--shadow);
}

[data-concept="regional"] .feed::before {
  content: "";
  position: absolute;
  top: 72px;
  right: 24px;
  width: 62px;
  height: 62px;
  border: 15px solid rgba(84, 189, 38, .22);
  border-radius: 50% 50% 50% 8px;
  transform: rotate(-45deg);
}

[data-concept="regional"] .feed-head {
  position: relative;
  z-index: 1;
  border: 0;
}

[data-concept="regional"] .feed-item {
  position: relative;
  z-index: 1;
  width: calc(100% - 26px);
  margin: 7px 0;
  padding: 13px 15px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 7px 24px rgba(60, 43, 91, .07);
}

[data-concept="regional"] .feed-item:nth-child(even) {
  margin-left: 26px;
}

[data-concept="regional"] .feed-item:nth-child(2) {
  border-left: 5px solid #54bd26;
}

[data-concept="regional"] .feed-item:nth-child(3) {
  border-left: 5px solid #3521dd;
}

[data-concept="regional"] .feed-item:nth-child(4) {
  border-left: 5px solid #aa5492;
}

[data-concept="regional"] .trust {
  border: 0;
  background: transparent;
}

[data-concept="regional"] .trust .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

[data-concept="regional"] .stat {
  min-height: 112px;
  align-content: end;
  padding: 20px;
  border-radius: 20px;
  background: #faf8fd;
}

[data-concept="regional"] .stat:first-child {
  background: #dcd6ff;
}

[data-concept="regional"] .stat:nth-child(2) {
  background: #dcefcf;
}

[data-concept="regional"] .stat:nth-child(3) {
  background: #272141;
  color: #fff;
}

[data-concept="regional"] .stat:nth-child(3) span {
  color: #bbb5c8;
}

[data-concept="regional"] main > section:not(.hero):not(.final) {
  padding-block: 62px;
}

[data-concept="regional"] .steps {
  gap: 12px;
}

[data-concept="regional"] .step {
  min-height: 200px;
  align-content: end;
  border: 0;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px #d8d2e3;
}

[data-concept="regional"] .step:nth-child(2) {
  background: #3725d3;
  color: #fff;
  box-shadow: none;
}

[data-concept="regional"] .step:nth-child(2) p {
  color: #d9d3ff;
}

[data-concept="regional"] .step:nth-child(2) .n {
  color: #bcb3ff;
}

[data-concept="regional"] .tablewrap {
  border: 0;
  border-radius: 24px;
  box-shadow: var(--shadow);
}

[data-concept="regional"] th,
[data-concept="regional"] td {
  padding-block: 16px;
}

[data-concept="regional"] tbody tr:hover {
  background: #f0ecff;
}

[data-concept="regional"] .roi {
  border: 0;
  border-radius: 22px;
  background: #ddefd0;
}

[data-concept="regional"] .plans {
  max-width: none;
}

[data-concept="regional"] .plan {
  border: 0;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px #d8d2e3;
}

[data-concept="regional"] .plan.featured {
  background: #26203f;
  color: #fff;
  box-shadow: none;
}

[data-concept="regional"] .plan.featured li,
[data-concept="regional"] .plan.featured .price small {
  color: #c9c3d6;
}

[data-concept="regional"] .plan .badge {
  top: 18px;
  right: 18px;
  left: auto;
  background: #55be2a;
  color: #11280b;
}

[data-concept="regional"] details {
  border: 0;
  border-radius: 18px;
  background: #faf8fd;
}

[data-concept="regional"] .final {
  background:
    radial-gradient(circle at 85% 45%, rgba(84, 189, 38, .92) 0 11%, transparent 11.5%),
    linear-gradient(120deg, #3521dd, #241b53);
}

[data-concept="regional"] .final .kicker {
  background: rgba(255, 255, 255, .14);
  color: #fff;
}

[data-concept="regional"] .final .btn-primary {
  background: #bceca7;
  color: #15200f;
}

@media (min-width: 660px) {
  [data-concept="regional"] .trust .wrap {
    grid-template-columns: repeat(3, 1fr);
  }

  [data-concept="regional"] main {
    margin-inline: 10px;
  }
}

/* ==========================================================
   05. CIVIC PULSE
   Editorial public-record character with a crisp Dutch utility grid.
   ========================================================== */

:root[data-concept="civic"] {
  --ink: #151513;
  --ink-2: #46443f;
  --ink-3: #6f6c65;
  --paper: #f1efe8;
  --card: #faf8f1;
  --line: #22211e;
  --ok: #21693b;
  --warn: #95520f;
  --accent: #c9470e;
  --accent-ink: #fffaf2;
  --accent-soft: #f8dcca;
  --radius: 0;
  --shadow: 8px 8px 0 rgba(22, 21, 18, .15);
  --wrap: 1120px;
}

[data-concept="civic"] body {
  background:
    linear-gradient(rgba(21, 21, 19, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 21, 19, .045) 1px, transparent 1px),
    var(--paper);
  background-size: 28px 28px;
}

[data-concept="civic"] .topbar {
  background: rgba(241, 239, 232, .96);
  border-bottom: 2px solid var(--ink);
  backdrop-filter: blur(12px);
}

[data-concept="civic"] .logo {
  padding: 5px 8px;
  background: var(--ink);
  color: #fff;
  letter-spacing: -.03em;
}

[data-concept="civic"] .logo b {
  color: #ff7a36;
}

[data-concept="civic"] .live .dot {
  border-radius: 0;
  background: var(--accent);
}

[data-concept="civic"] .btn {
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}

[data-concept="civic"] .btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

[data-concept="civic"] .btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

[data-concept="civic"] .hero {
  position: relative;
  border-bottom: 2px solid var(--ink);
}

[data-concept="civic"] .hero::before {
  content: "OPENBARE PUBLICATIE  /  SIGNAAL  /  SELECTIE";
  position: absolute;
  top: 12px;
  right: 0;
  padding: 7px 12px;
  background: var(--ink);
  color: #fff;
  font: 700 .58rem var(--font-data);
  letter-spacing: .12em;
}

[data-concept="civic"] .hero-copy {
  padding-top: 18px;
}

[data-concept="civic"] .kicker {
  width: max-content;
  padding: 5px 8px;
  border: 1px solid var(--ink);
  background: #fff9e8;
  color: var(--ink);
}

[data-concept="civic"] h1 {
  max-width: 13ch;
  font-size: clamp(2.35rem, 7.5vw, 5rem);
  line-height: .98;
  letter-spacing: -.065em;
}

[data-concept="civic"] .hero form {
  max-width: 660px;
  gap: 0;
}

[data-concept="civic"] .hero input[type="text"] {
  border: 2px solid var(--ink);
  background: #fffdf7;
}

[data-concept="civic"] .hero form .btn {
  box-shadow: none;
}

[data-concept="civic"] .hero form .micro {
  margin-top: 10px;
}

[data-concept="civic"] .feed {
  position: relative;
  border: 2px solid var(--ink);
  background: #fffdf7;
  box-shadow: 10px 10px 0 #d95517;
}

[data-concept="civic"] .feed::before {
  content: "DOSSIERSELECTIE";
  position: absolute;
  top: -11px;
  right: 13px;
  z-index: 2;
  padding: 3px 8px;
  border: 1px solid var(--ink);
  background: #f6cf3e;
  color: var(--ink);
  font: 800 .58rem var(--font-data);
  letter-spacing: .1em;
}

[data-concept="civic"] .feed-head {
  border-bottom: 2px solid var(--ink);
  background: #f1efe8;
}

[data-concept="civic"] .feed-item {
  grid-template-columns: 54px 1fr;
  border-bottom: 1px solid var(--ink);
  border-left: 8px solid var(--accent);
}

[data-concept="civic"] .feed-item:nth-child(3) {
  border-left-color: #2563c9;
}

[data-concept="civic"] .feed-item:nth-child(4) {
  border-left-color: #18754b;
}

[data-concept="civic"] .feed-body .chip {
  border: 1px solid currentColor;
  border-radius: 0;
}

[data-concept="civic"] .trust {
  border: 0;
  background: var(--ink);
  color: #fff;
}

[data-concept="civic"] .trust .wrap {
  justify-content: flex-start;
}

[data-concept="civic"] .stat {
  min-width: min(100%, 220px);
  padding-right: 28px;
  border-right: 1px solid #5b5954;
}

[data-concept="civic"] .stat span {
  color: #aaa7a0;
}

[data-concept="civic"] main > section:not(.hero):not(.final) {
  border-bottom: 2px solid var(--ink);
}

[data-concept="civic"] .steps {
  gap: 0;
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 #d8d3c7;
}

[data-concept="civic"] .step {
  min-height: 240px;
  align-content: end;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: #fffdf7;
}

[data-concept="civic"] .step:last-child {
  border-bottom: 0;
}

[data-concept="civic"] .step .n {
  margin-bottom: auto;
  font-size: 1.8rem;
  color: var(--accent);
}

[data-concept="civic"] .tablewrap {
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 #d8d3c7;
}

[data-concept="civic"] th {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

[data-concept="civic"] td {
  border-color: #a9a59a;
}

[data-concept="civic"] .status {
  border: 1px solid currentColor;
  border-radius: 0;
}

[data-concept="civic"] .roi {
  border: 2px solid var(--ink);
  border-left: 14px solid var(--accent);
  background: #f6cf3e;
  box-shadow: 8px 8px 0 var(--ink);
}

[data-concept="civic"] .plans {
  max-width: none;
  gap: 24px;
}

[data-concept="civic"] .plan {
  border: 2px solid var(--ink);
  background: #fffdf7;
  box-shadow: 8px 8px 0 #d8d3c7;
}

[data-concept="civic"] .plan.featured {
  border-width: 2px;
  background: #1f5ed1;
  color: #fff;
  box-shadow: 8px 8px 0 var(--ink);
}

[data-concept="civic"] .plan.featured li,
[data-concept="civic"] .plan.featured .price small {
  color: #dce8ff;
}

[data-concept="civic"] .plan .badge {
  top: -13px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: #f6cf3e;
  color: var(--ink);
}

[data-concept="civic"] details {
  border: 0;
  border-top: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
}

[data-concept="civic"] details:last-child {
  border-bottom: 2px solid var(--ink);
}

[data-concept="civic"] .final {
  border-bottom: 2px solid #fff;
  background:
    linear-gradient(90deg, transparent 0 70%, rgba(255,255,255,.1) 70% 72%, transparent 72%),
    var(--accent);
  color: #fff;
}

[data-concept="civic"] .final .kicker {
  border-color: #fff;
  background: transparent;
  color: #fff;
}

[data-concept="civic"] .final .btn-primary {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

@media (min-width: 820px) {
  [data-concept="civic"] .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  [data-concept="civic"] .step {
    border-right: 2px solid var(--ink);
    border-bottom: 0;
  }

  [data-concept="civic"] .step:last-child {
    border-right: 0;
  }
}


/* De mobiele tabel viel buiten beeld: de labelkolom stond op `auto` en groeide
   mee met de inhoud, waardoor de rij 620 pixels breed werd in een kolom van
   322. Een vaste labelkolom met een krimpbare waardekolom houdt alles binnen
   het scherm. Deze regels staan achteraan omdat dit bestand als laatste laadt. */
@media (max-width: 819px) {
  [data-concept] .tablewrap {
    overflow-x: hidden;
  }

  [data-concept] .tablewrap table,
  [data-concept] .tablewrap tbody,
  [data-concept] .tablewrap tr,
  [data-concept] .tablewrap td {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  [data-concept] .tablewrap td {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    overflow-wrap: anywhere;
  }
}