/* =====================================================================
   EVIC — the new design, applied over the application's own stylesheet.

   Every rule is scoped to body.evic-new, which only the EVIC layout sets.
   That is not tidiness: the six sites share one stylesheet pipeline, and an
   unscoped rule here would reach analist.nl. If a rule in this file has no
   .evic-new ancestor, it is a bug.

   The approach is to restyle the markup that already exists rather than to
   replace the views. Bootstrap's tables, panels, forms, alerts and
   pagination all keep their classes and their behaviour; what changes is
   how they look.

   The palette is the one from the homepage, so the front page and the rest
   of the platform read as the same product.
   ===================================================================== */

/* The page root, so the strip above the header is not left showing the
   browser's own white when the body's gradient does not reach it. */
html:has(body.evic-new) { background: #050c17; }

body.evic-new {
  --bg: #07111f;
  --bg-strong: #050c17;
  --surface: rgba(13, 27, 46, 0.86);
  --surface-strong: rgba(17, 36, 62, 0.96);
  --ink: #ecf3ff;
  --ink-soft: #a7b8d4;
  --line: rgba(134, 255, 207, 0.12);
  --line-strong: rgba(134, 255, 207, 0.28);
  --accent: #86ffcf;
  --accent-strong: #a8ffdd;
  --glow: rgba(134, 255, 207, 0.24);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  --radius: 16px;

  background:
    radial-gradient(circle at top left, rgba(134, 255, 207, 0.10), transparent 24%),
    radial-gradient(circle at 82% 8%, rgba(90, 177, 255, 0.10), transparent 20%),
    linear-gradient(180deg, #09162a 0%, #071320 55%, #050c17 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

body.evic-new .evic-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.evic-new .evic-main { flex: 1 0 auto; padding: 28px 0 64px; }

/* --- header ---------------------------------------------------------- */

body.evic-new .evic-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(7, 17, 31, 0.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
body.evic-new .evic-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 76px;
}

body.evic-new .evic-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
body.evic-new .evic-brand__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--accent) 0%, #5ab1ff 100%);
  color: #05221a;
  font-weight: 800;
  letter-spacing: 0.04em;
}
body.evic-new .evic-brand__text { display: flex; flex-direction: column; line-height: 1.25; }
body.evic-new .evic-brand__text strong { font-size: 17px; letter-spacing: 0.12em; }
body.evic-new .evic-brand__text span { font-size: 12px; color: var(--ink-soft); }

body.evic-new .evic-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
body.evic-new .evic-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
body.evic-new .evic-nav a:hover,
body.evic-new .evic-nav a:focus {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

body.evic-new .evic-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

body.evic-new .evic-btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.evic-new .evic-btn--primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #05221a;
  box-shadow: 0 10px 28px var(--glow);
}
body.evic-new .evic-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px var(--glow); }
body.evic-new .evic-btn--ghost { color: var(--ink-soft); border-color: var(--line); }
body.evic-new .evic-btn--ghost:hover { color: var(--ink); border-color: var(--line-strong); }

/* --- footer ----------------------------------------------------------- */

body.evic-new .evic-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  background: rgba(5, 12, 23, 0.7);
  padding: 30px 0;
}
body.evic-new .evic-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
body.evic-new .evic-footer__brand strong { display: block; letter-spacing: 0.12em; }
body.evic-new .evic-footer__brand span { font-size: 13px; color: var(--ink-soft); }
body.evic-new .evic-footer__links { display: flex; gap: 18px; flex-wrap: wrap; }
body.evic-new .evic-footer__links a { color: var(--ink-soft); font-size: 14px; text-decoration: none; }
body.evic-new .evic-footer__links a:hover { color: var(--accent-strong); }
body.evic-new .evic-footer__legal { font-size: 13px; color: var(--ink-soft); }

/* --- typography and links on the pages themselves ---------------------- */

body.evic-new h1,
body.evic-new h2,
body.evic-new h3,
body.evic-new h4 { color: var(--ink); }

body.evic-new .headline h1,
body.evic-new h1 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 8px 0 22px;
}

body.evic-new a { color: var(--ink); }
body.evic-new a:hover,
body.evic-new a:focus { color: var(--accent-strong); text-decoration: none; }

body.evic-new .index-title,
body.evic-new .title-link a {
  color: var(--ink);
  font-weight: 700;
}

/* --- tables ------------------------------------------------------------ */

body.evic-new .table,
body.evic-new .custom-table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  color: var(--ink);
}
body.evic-new .table > thead > tr > th,
body.evic-new .table > tbody > tr > th {
  background: var(--surface-strong);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
body.evic-new .table > tbody > tr > td {
  border-top: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
body.evic-new .table > tbody > tr:last-child > td { border-bottom: 0; }
body.evic-new .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.02); }
body.evic-new .table-hover > tbody > tr:hover,
body.evic-new .table > tbody > tr:hover { background: rgba(134, 255, 207, 0.05); }
body.evic-new .table a { color: var(--ink); }
body.evic-new .table a:hover { color: var(--accent-strong); }
body.evic-new .table-responsive { border: 0; }

/* The red and green used for price movement stay as they are: they carry
   meaning, and recolouring them to fit the theme would cost that. */

/* The Pro listings use .alternation, which paints every other column a
   light grey. Against a dark page that reads as a blank white sheet over
   the content, which is exactly how the Pro articles page looked. The
   banding is kept, just at a weight that belongs here. */
body.evic-new table.alternation td,
body.evic-new table.alternation th { background: transparent; }
body.evic-new table.alternation td:nth-child(2n+1) { background: rgba(255, 255, 255, 0.03); }

/* --- blocks that come in light from the shared stylesheet --------------- */

/* Found by walking the site logged in: each of these is painted a light
   colour that reads as a blank sheet on a dark page. */

body.evic-new .stock-title-panel {
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}

body.evic-new .desclong-main-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
body.evic-new .desclong-main-table,
body.evic-new .desclong-main-table td,
body.evic-new .desclong-main-table th {
  background: transparent !important;
  color: var(--ink);
  border-color: var(--line);
}

/* Select2 renders its own widget and ignores the form styling above. The
   dropdown itself is attached to the body rather than inside the page, so
   it is matched from body rather than from .evic-main. */

body.evic-new .select2-container--default .select2-selection--single,
body.evic-new .select2-container--default .select2-selection--multiple,
body.evic-new .select2-selection {
  background: var(--surface-strong) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px;
  color: var(--ink);
}
body.evic-new .select2-selection__rendered { color: var(--ink) !important; }
body.evic-new .select2-selection__placeholder { color: var(--ink-soft) !important; }
body.evic-new .select2-selection__arrow b { border-top-color: var(--ink-soft) !important; }

body.evic-new .select2-dropdown {
  background: var(--surface-strong);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
body.evic-new .select2-results__option { background: transparent; color: var(--ink); }
body.evic-new .select2-results__option--highlighted {
  background: rgba(134, 255, 207, 0.12) !important;
  color: var(--ink) !important;
}
body.evic-new .select2-search__field {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}

/* --- panels, wells, bordered blocks ------------------------------------ */

body.evic-new .panel,
body.evic-new .well,
body.evic-new .border_2,
body.evic-new .img-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--ink);
}
body.evic-new .panel-heading {
  background: var(--surface-strong);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

/* --- forms and filters -------------------------------------------------- */

body.evic-new .form-control,
body.evic-new input[type="text"],
body.evic-new input[type="email"],
body.evic-new input[type="password"],
body.evic-new input[type="search"],
body.evic-new select,
body.evic-new textarea {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  box-shadow: none;
}
body.evic-new .form-control:focus,
body.evic-new select:focus,
body.evic-new input:focus,
body.evic-new textarea:focus {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(134, 255, 207, 0.10);
  outline: none;
}
body.evic-new ::placeholder { color: rgba(167, 184, 212, 0.7); }
body.evic-new label { color: var(--ink-soft); font-weight: 600; }

body.evic-new .btn,
body.evic-new input[type="submit"] {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
}
body.evic-new .btn:hover,
body.evic-new input[type="submit"]:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}
body.evic-new .btn-primary,
body.evic-new .btn.submit,
body.evic-new input[type="submit"] {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  border-color: transparent;
  color: #05221a;
}

/* --- the contact form ---------------------------------------------------- */

/* The fields sat at a fixed 175px against a 580px message box, and the
   send button looked like any other grey control rather than the one
   thing you are meant to press. */

body.evic-new .inputs-wrapper.inputs-contact { display: block; }
body.evic-new .inputs-contact .form-group { width: 100%; max-width: 580px; margin-bottom: 14px; }
body.evic-new .inputs-contact .form-wrapper { display: block; }
body.evic-new .inputs-contact .form-label { display: block; margin-bottom: 6px; }
body.evic-new .contact-us-form.form-control,
body.evic-new .evic-main textarea.form-control { width: 100%; max-width: 580px; }

body.evic-new .evic-main .btn.danger {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border: 0;
  color: #05221a;
  font-weight: 700;
  padding: 10px 26px;
}
body.evic-new .evic-main .btn.danger:hover { color: #05221a; filter: brightness(1.05); }

/* --- the video page -------------------------------------------------------- */

/* The date and the description sit on white, which frames the player in a
   band of it. */
body.evic-new .video_desc,
body.evic-new .video_desc p { background: transparent !important; color: var(--ink); }
body.evic-new .video_time {
  background: transparent !important;
  color: var(--ink-soft);
  display: block;
  margin-bottom: 10px;
}

/* The player sat on a white block with its own padding, which showed as a
   frame around the video, and the video itself was wider than the column
   it is in. */
body.evic-new .video-player { background: transparent !important; padding: 0 !important; }
body.evic-new .video-player-show,
body.evic-new .video-player video,
body.evic-new .video-player iframe {
  display: block;
  width: 100%;
  /* An iframe has no size of its own, so height: auto collapsed this to
     the default 150px and the video letterboxed itself into a strip.
     The ratio is what gives the box its height. The cap keeps the player
     in proportion with the text under it on a wide screen. */
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: var(--radius);
}

/* --- running text --------------------------------------------------------- */

/* Pages that are mostly prose — the disclaimer and the like — came in at
   14px over a 1300px line, which is about twice a comfortable measure. */
body.evic-new .evic-main p { font-size: 15px; line-height: 1.7; }
body.evic-new .evic-main p.text-justify { max-width: 860px; margin-bottom: 16px; }
body.evic-new .evic-main p.text-justify b,
body.evic-new .evic-main p.text-justify strong { display: inline-block; margin-top: 10px; }

/* --- pagination ---------------------------------------------------------- */

body.evic-new .pagination > li > a,
body.evic-new .pagination > li > span {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
body.evic-new .pagination > li > a:hover { background: var(--surface-strong); color: var(--ink); }
body.evic-new .pagination > .active > a,
body.evic-new .pagination > .active > span,
body.evic-new .pagination > .page.active > a {
  background: var(--accent);
  border-color: var(--accent);
  color: #05221a;
}

/* --- alerts --------------------------------------------------------------- */

body.evic-new .alert {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
body.evic-new .alert-danger { border-color: rgba(255, 120, 120, 0.4); }
body.evic-new .alert-success { border-color: var(--line-strong); }

/* --- submenus and breadcrumbs ---------------------------------------------- */

body.evic-new .nav-tabs {
  border-bottom: 1px solid var(--line);
}
body.evic-new .nav-tabs > li > a {
  background: transparent;
  border: 0;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
body.evic-new .nav-tabs > li > a:hover { background: transparent; color: var(--ink); }
body.evic-new .nav-tabs > li.active > a,
body.evic-new .nav-tabs > li.active > a:hover,
body.evic-new .nav-tabs > li.active > a:focus {
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--accent);
  color: var(--ink);
}

body.evic-new .breadcrumb {
  background: transparent;
  padding-left: 0;
  color: var(--ink-soft);
}
body.evic-new .breadcrumb a { color: var(--ink-soft); }
body.evic-new .breadcrumb a:hover { color: var(--accent-strong); }

/* The section submenu ships as a Bootstrap navbar with a solid blue bar. The
   bar itself is stripped back to nothing and the links become pills, so the
   navigation reads as part of this design rather than a leftover strip of
   the old one. */

body.evic-new .sub-navigation-wrapping { margin: 0 0 20px; }
body.evic-new .sub-navigation-wrapping .navbar,
body.evic-new .sub-navigation-wrapping .navbar-default,
body.evic-new .sub-navigation-wrapping .navbar-collapse,
body.evic-new .sub-navigation-wrapping .container-fluid,
body.evic-new .sub-navigation {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0;
  margin: 0;
  padding: 0;
}
body.evic-new .sub-navigation .nav-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding: 0 0 10px;
}
body.evic-new .sub-navigation .nav-pills > li { float: none; }
body.evic-new .sub-navigation .nav-pills > li > a {
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
}
/* The link text sits in its own span carrying the old blue. */
body.evic-new .sub-navigation .nav-pills > li > a span { color: inherit; }
body.evic-new .sub-navigation .nav-pills > li > a:hover {
  background: rgba(134, 255, 207, 0.08);
  color: var(--ink);
}
body.evic-new .sub-navigation .nav-pills > li.active > a,
body.evic-new .sub-navigation .nav-pills > li.active > a:hover,
body.evic-new .sub-navigation .nav-pills > li.active > a:focus {
  background: var(--accent);
  color: #05221a;
}

/* --- the Pro navigation ------------------------------------------------------ */

/* Two rows: the three sections, and the subjects inside whichever is open.
   The second row only appears where there are subjects, so the videos
   section shows one row rather than an empty strip. */

/* The widths are explicit because the application's own stylesheet squeezes
   an unsized flex row here to zero, which stacked the links and pushed them
   off the right edge of the page. */
body.evic-new .evic-pro-nav { display: block; width: 100%; margin: 0 0 22px; }

body.evic-new .evic-pro-nav__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  min-width: 0;
  border-bottom: 1px solid var(--line);
}
body.evic-new .evic-pro-nav__sections a {
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
body.evic-new .evic-pro-nav__sections a:hover { color: var(--ink); }
body.evic-new .evic-pro-nav__sections a.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

body.evic-new .evic-pro-nav__subjects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 12px 0 0;
}
body.evic-new .evic-pro-nav__subjects a {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
}
body.evic-new .evic-pro-nav__subjects a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}
body.evic-new .evic-pro-nav__subjects a.is-active {
  background: var(--accent);
  border-color: transparent;
  color: #05221a;
}

/* --- page headings --------------------------------------------------------- */

/* Several sections render their title as p.main inside .headline rather than
   as an h1, so the heading rules above miss it and it keeps the old near
   black. */
body.evic-new .headline .main,
body.evic-new .headline p.main {
  color: var(--ink);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 6px 0 20px;
}

/* --- sign in and sign up ---------------------------------------------------- */

/* These pages come wrapped in a full-width blue block with the fields
   floated side by side. Ronald asked for them without the surrounding
   chrome, so the layout drops the header and footer here and the form
   becomes a single centred card. */

body.evic-new .bg-blue { background: transparent !important; }

body.evic-new .forms-wrapper {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 30px 24px;
  max-width: 420px;
  margin: 56px auto;
  overflow: hidden;
}
body.evic-new .forms-wrapper h1 { font-size: 26px; margin: 0 0 20px; }
body.evic-new .forms-wrapper hr { border-color: var(--line); }

body.evic-new .forms-wrapper .input { float: none; width: 100%; margin: 0 0 14px; }
body.evic-new .forms-wrapper .input label { display: block; margin-bottom: 6px; font-size: 13px; }
body.evic-new .forms-wrapper .form-control { width: 100%; padding: 10px 12px; height: auto; }
body.evic-new .forms-wrapper .input.switch-wrap { display: flex; align-items: center; gap: 10px; }
body.evic-new .forms-wrapper .input.switch-wrap label { margin: 0; }

body.evic-new .forms-wrapper .divider { text-align: center; margin: 16px 0; color: var(--ink-soft); font-size: 13px; }
/* Solid, so the rule behind it does not strike through the word. */
body.evic-new .forms-wrapper .divider span { background: #0c1a2d; padding: 0 12px; position: relative; }

body.evic-new .forms-wrapper .facebook-btn-warpper .btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 10px 16px;
}
body.evic-new .forms-wrapper input.btn.submit,
body.evic-new .forms-wrapper input[type="submit"] {
  display: block;
  width: 100%;
  clear: both;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #05221a;
  border: 0;
  padding: 11px 16px;
  font-weight: 700;
  margin-top: 4px;
}
body.evic-new .forms-wrapper .restore-password { margin-top: 14px; text-align: center; }
body.evic-new .forms-wrapper a { color: var(--ink-soft); font-size: 14px; }
body.evic-new .forms-wrapper a:hover { color: var(--accent-strong); }

/* The sign up page puts Log In and Registreer in a strip of spans that runs
   the two words together once the old stylesheet is overridden, and builds
   its fields from Formtastic's form-group rather than the plain .input the
   sign in page uses. The "of" span belongs to the old layout and is hidden. */

body.evic-new .forms-wrapper .tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--line);
}
body.evic-new .forms-wrapper .tabs .split { display: none; }
body.evic-new .forms-wrapper .tab {
  cursor: pointer;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}
body.evic-new .forms-wrapper .tab:hover { color: var(--ink); }
body.evic-new .forms-wrapper .tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

body.evic-new .forms-wrapper .form-group { margin: 0 0 14px; }
body.evic-new .forms-wrapper .form-label { display: block; margin-bottom: 6px; }
body.evic-new .forms-wrapper .form-label label { font-size: 13px; margin: 0; }
body.evic-new .forms-wrapper .form-wrapper { display: block; }
body.evic-new .forms-wrapper abbr[title="required"] {
  color: var(--accent);
  text-decoration: none;
  border: 0;
  margin-left: 3px;
}
body.evic-new .forms-wrapper .inline-errors,
body.evic-new .forms-wrapper .error { color: #ff9a9a; font-size: 12px; }

/* --- news listings ---------------------------------------------------------- */

/* Headlines in the news tables carry the old bright blue from a rule
   specific enough to outrank the general link colour, so it is matched here
   rather than fought with !important. */
body.evic-new .table.table-news tbody td strong a { color: var(--ink); }
body.evic-new .table.table-news tbody td strong a:hover { color: var(--accent-strong); }
body.evic-new .table.table-news tbody td a { color: var(--ink-soft); }

/* --- the info pages ----------------------------------------------------------- */

/* These pages were written against their own layout, so under this one they
   arrive unstyled. They also carry a second header inside the page body —
   the Analist navbar and logo — which is why an EVIC visitor used to meet
   Analist branding here; it is hidden rather than removed, because the
   other five sites still render it from the same view. */

body.evic-new .info-page .navbar,
body.evic-new .info-page .contact-info-header { display: none !important; }

body.evic-new .info-page { color: var(--ink); }
body.evic-new .info-page img { max-width: 100%; height: auto; }

body.evic-new .info-page .section-banner { margin: 0 0 52px; }
body.evic-new .info-page .section-banner__container { position: relative; }
body.evic-new .info-page .section-banner__header {
  font-size: 17px;
  line-height: 2;
  color: var(--ink);
  margin: 24px 0 20px;
}

body.evic-new .info-page .section-banner__button,
body.evic-new .info-page .header_link.btn.submit {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #05221a;
  font-weight: 700;
  text-decoration: none;
}

body.evic-new .info-page .section-icons { margin: 64px 0; }
body.evic-new .info-page .section-icons__header { font-size: 26px; font-weight: 700; text-align: center; margin-bottom: 12px; }
body.evic-new .info-page .section-icons__subhead { text-align: center; color: var(--ink-soft); margin-bottom: 40px; }
body.evic-new .info-page .section-icons__box-icon { text-align: center; padding: 24px 16px; }
body.evic-new .info-page .section-icons__box-icon img { max-width: 48px; margin-bottom: 12px; }

body.evic-new .info-page .features-wrap { margin: 64px 0; }
body.evic-new .info-page .features-title { font-size: 26px; font-weight: 700; margin-bottom: 32px; }

body.evic-new .info-page .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
body.evic-new .info-page .panel-heading { background: var(--surface-strong); border-bottom: 1px solid var(--line); }

body.evic-new .info-page .section-accordion__header { font-size: 24px; font-weight: 700; margin: 36px 0 18px; }

/* The question bars only responded to a click on the words themselves,
   because the link inside them is inline. Making it fill the bar is the
   whole fix. */
body.evic-new .info-page .section-accordion { margin-bottom: 56px; }
body.evic-new .info-page .section-accordion .panel { margin-bottom: 10px; }
body.evic-new .section-accordion .panel-heading { padding: 0; }
body.evic-new .section-accordion .panel-heading a {
  display: block;
  padding: 18px 22px;
  text-decoration: none;
  color: var(--ink);
}
body.evic-new .section-accordion .panel-heading a:hover { color: var(--accent-strong); }

/* The pricing table. The highlighted plan came in Bootstrap blue, the
   "/jaar" suffix in near-black, and the feature list had a fixed height
   that cut the longest plan off mid-line. */

body.evic-new .info-page .primary-card-header {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color: #05221a !important;
  border-bottom: 0;
}
body.evic-new .info-page .primary-card-header * { color: #05221a !important; }

body.evic-new .info-page .text-body-secondary { color: var(--ink-soft) !important; }
body.evic-new .info-page .pricing-card-title { color: var(--ink); }
body.evic-new .info-page .color-li { color: var(--accent-strong); }

body.evic-new .info-page .btn-primary-price,
body.evic-new .info-page .btn-outline-primary {
  background: var(--surface-strong);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
body.evic-new .info-page .btn-primary-price:hover,
body.evic-new .info-page .btn-outline-primary:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

body.evic-new .info-page .ul-prices,
body.evic-new .info-page .h-217 { height: auto !important; min-height: 0; overflow: visible; }

/* With the fixed height gone the cards end up different lengths, so the
   row becomes a flex row and the buttons are pushed to a common bottom. */
body.evic-new .info-page .row-cols-md-3 { display: flex; flex-wrap: wrap; align-items: stretch; }
body.evic-new .info-page .row-cols-md-3 > [class*="col-"] { display: flex; }
body.evic-new .info-page .row-cols-md-3 .panel { display: flex; flex-direction: column; width: 100%; }
body.evic-new .info-page .panel-body { display: flex; flex-direction: column; flex: 1 1 auto; }
body.evic-new .info-page .panel-body .btn { margin-top: auto; }

/* The quote block below the questions arrived as loose text wrapped round
   a photograph. */
/* The bottom margin also keeps the last block clear of the HubSpot chat
   launcher, which is pinned to the bottom-left corner of the window and
   floats over whatever is under it. */
body.evic-new .info-page .section-carousel { margin: 56px 0 96px; }
body.evic-new .info-page .section-carousel__flex-block {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
body.evic-new .info-page .section-carousel__flex-block-left { flex: 0 0 200px; }
body.evic-new .info-page .section-carousel__flex-block-left img { border-radius: 12px; }
body.evic-new .info-page .section-carousel__flex-block-right { flex: 1 1 320px; min-width: 0; }
body.evic-new .info-page .section-carousel p,
body.evic-new .info-page .section-carousel li { font-size: 15px; line-height: 1.6; color: var(--ink); }
body.evic-new .info-page .section-carousel ul { padding-left: 20px; margin: 12px 0; }

/* --- what EVIC should not carry ---------------------------------------------- */

/* Ronald's point: EVIC is a platform of its own, not a skin over Analist.
   Anything the shared views inject that belongs to the other sites is
   hidden here rather than removed from those views, so nothing changes for
   analist.nl and the rest. */
body.evic-new .banners,
body.evic-new .banner,
body.evic-new .right-side-banners,
body.evic-new .text-links,
body.evic-new .textlinks,
body.evic-new .adv_paginator ~ .banner { display: none !important; }

/* --- responsive ----------------------------------------------------------------- */

@media (max-width: 1100px) {
  body.evic-new .evic-nav { gap: 14px; }
  body.evic-new .evic-nav a { font-size: 13px; }
}

@media (max-width: 900px) {
  body.evic-new .evic-header__inner { flex-wrap: wrap; min-height: 0; padding-top: 12px; padding-bottom: 12px; }
  body.evic-new .evic-nav { order: 3; width: 100%; gap: 12px; }
  body.evic-new .headline h1,
  body.evic-new h1 { font-size: 26px; }
  body.evic-new .evic-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------ more videos
   Four across, two on a tablet, one on a phone. The palette comes from the
   variables at the top of this file so the block sits with the rest.
*/
body.evic-new .evic-related {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

body.evic-new .evic-related__title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

body.evic-new .evic-related__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

body.evic-new .evic-related__grid .video_item {
  width: auto;
  float: none;
  margin: 0;
  padding: 0;
}

body.evic-new .evic-related__grid .video_item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--radius) / 2);
}

body.evic-new .evic-related__grid .video_item time {
  display: block;
  margin: 10px 0 4px;
  font-size: 12px;
  color: var(--ink-soft);
}

body.evic-new .evic-related__grid .video_item p { margin: 0; line-height: 1.35; }
body.evic-new .evic-related__grid .video_item a { color: var(--ink); text-decoration: none; }
body.evic-new .evic-related__grid .video_item a:hover { color: var(--accent-strong); }

@media (max-width: 991px) {
  body.evic-new .evic-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  body.evic-new .evic-related__grid { grid-template-columns: 1fr; }
}