/* Hyperr Suite demo · opmaak
   ───────────────────────────────────────────────────────────────────────────
   Bron van waarheid = de REPO's, niet een meting aan een screenshot:
   · tokens      hyperr-ui/src/styles/theme.css
   · schil       hyperr-ui/src/components/{SuiteShell,SuiteSidebar,SuiteHeader}.tsx
   · kaarten     hyperr-ui/src/components/{Card,KPICard,DataTable}.tsx
   · paginavorm  hyperr-ai-suite/app/(platform)/suite/[moduleId]/ModuleDetailClient.tsx
   Elke maat hieronder staat letterlijk in een van die bestanden.

   Let op, dit is echt zo: op dat ene live scherm staan twee ontwerptalen.
   De schil (zijbalk, topbalk) draait op Plus Jakarta Sans met #4B22F4, en de
   Daily Performance-pagina erin heeft een eigen `.hp-daily`-scope met Inter en
   #552AF5. Ik volg de SCHIL, want die is gedeeld door elke module.

   Twee dichtheden, bewust:
   · BINNEN het venster geldt de app-norm van de live Suite, dus 14px.
   · BUITEN het venster (tabstrook, onderschrift) is het een marketingpagina.

   Alles staat achter #suite-demo en elke klasse begint met hs-, zodat de CSS
   van de site en die van de demo elkaar niet kunnen raken.
   ─────────────────────────────────────────────────────────────────────────── */

:root{
  /* Paars · live Suite */
  --hp-purple:#4B22F4;
  --hp-purple-bright:#6B3FF8;
  --hp-purple-deep:#3D00CF;
  --hp-purple-dark:#3A1AB0;
  --hp-purple-hover:#7C5BEB;
  --hp-purple-light:#EFECFE;
  --hp-purple-light-hover:#D4CCFF;
  --hp-logo:#552AF5;
  --hp-insight:#4A2FB8;
  /* de hero-kaart, letterlijk overgenomen */
  --hp-hero:linear-gradient(145deg,#6B3FF8 0%,#4B28ED 45%,#3D00CF 100%);

  /* Semantisch */
  --hp-success:#3DEB8F;
  --hp-success-ink:#0B3B24;
  --hp-success-surface:#E1F5EE;
  --hp-negative:#FF007A;
  --hp-negative-text:#D6294B;
  --hp-negative-surface:#FDECEF;
  --hp-warning:#F59E0B;
  --hp-warning-dark:#B45309;
  --hp-warning-surface:#FDF3E3;

  /* Tekst */
  --hp-text:#12111A;
  --hp-text-heading:#0D1C2E;
  --hp-text-2:#6E6C85;
  --hp-text-muted:#9EA3B0;
  --hp-text-faint:#C9C4D9;

  /* Navigatie */
  --hp-nav-text:#6E6C85;
  --hp-nav-muted:#9694A6;
  --hp-nav-faint:#B3B1C2;
  --hp-nav-hover:#F4F3FF;

  /* Vlakken en lijnen */
  --hp-surface:#FFFFFF;
  --hp-surface-card:#FAFBFE;
  --hp-surface-page:#F5F8FD;
  --hp-border:#E6EAF2;
  --hp-border-neutral:#E5E7EB;
  --hp-border-dashed:#DDDCE6;
  --hp-chip:#EEEEF3;
  --hp-header-bg:rgba(255,255,255,.9);

  /* Tekst op een paars vlak */
  --hp-on-accent-muted:rgba(255,255,255,.55);
  --hp-on-accent-faint:rgba(255,255,255,.4);
  --hp-on-accent-line:rgba(255,255,255,.18);
  --hp-on-accent-positive:#5EFFB8;
  --hp-on-accent-negative:#FF7DB5;

  --hp-shadow:0 1px 4px rgba(13,28,46,.04);
  --hp-shadow-lift:0 10px 28px rgba(13,28,46,.10);
  --hp-spring:cubic-bezier(.16,1,.3,1);

  /* De band rondom het venster. Het enige dat in donkere modus meebeweegt,
     want de Suite zelf is een licht product. */
  --band-bg:#FFFFFF;
  --band-text:#12111A;
  --band-sub:#6E6C85;
  --band-pill:#FFFFFF;
  --band-pill-border:#E6EAF2;
  --band-pill-text:#6E6C85;
  --band-shadow:0 32px 80px -24px rgba(19,12,64,.26), 0 2px 8px rgba(19,12,64,.05);

  --fs-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-app:18px;
  --r-card:16px;
  --side-w:300px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --band-bg:#0A0718;
    --band-text:#F2F0FF;
    --band-sub:#A8A2C4;
    --band-pill:#171034;
    --band-pill-border:#2C2352;
    --band-pill-text:#D6D0F2;
    --band-shadow:0 32px 90px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
  }
}
:root[data-theme="dark"]{
  --band-bg:#0A0718;
  --band-text:#F2F0FF;
  --band-sub:#A8A2C4;
  --band-pill:#171034;
  --band-pill-border:#2C2352;
  --band-pill-text:#D6D0F2;
  --band-shadow:0 32px 90px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
}

/* Zet dit element in een sectie zonder eigen max-width als je de band van
   rand tot rand wilt, zoals promptwatch.com. */
#suite-demo{
  display:block;
  color:var(--band-text);font-family:var(--fs-sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#suite-demo, #suite-demo *, #suite-demo *::before, #suite-demo *::after{box-sizing:border-box}
/* De Artifact-omgeving zet deze regel zelf, een losse pagina niet. Zonder
   hem blijft het Ask-paneel als wit vlak staan zodra het dicht is. */
#suite-demo [hidden]{display:none!important}
#suite-demo button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;margin:0;padding:0}
#suite-demo :is(button,a,[tabindex]):focus-visible{outline:2px solid var(--hp-purple);outline-offset:2px;border-radius:4px}
#suite-demo p, #suite-demo h2, #suite-demo h3{margin:0}

/* ── Tabstrook · tabbladen bovenop het venster ─────────────────────────── */

/* De modules zitten vast aan het venster, als tabbladen in een browser: het actieve tabblad heeft de
   kleur van de titelbalk en loopt erin over, de andere zijn half doorzichtig wit. Zo zie je dat ze bij
   het scherm horen en dat je erop kunt klikken. */
#suite-demo .hs-tabs{
  position:relative;z-index:2;
  display:flex;gap:4px;justify-content:flex-start;align-items:flex-end;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  margin:0 0 -1px;padding:0 10px;
}
#suite-demo .hs-tabs::-webkit-scrollbar{display:none}

#suite-demo .hs-tab{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:11px 16px 11px 13px;border-radius:10px 10px 0 0;
  border:1px solid rgba(113,113,122,.28);border-bottom:0;
  background:rgba(255,255,255,.5);color:#3F3F46;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:14px;font-weight:500;line-height:1;
  transition:color .15s,background .15s;
}
#suite-demo .hs-tab svg{width:16px;height:16px;opacity:.7}
#suite-demo .hs-tab:hover{background:rgba(255,255,255,.85);color:var(--hp-purple)}
#suite-demo .hs-tab[aria-selected="true"]{
  padding-bottom:12px;
  background:#F3F3F5;border-color:rgba(113,113,122,.5);color:#18181B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
#suite-demo .hs-tab[aria-selected="true"] svg{opacity:1;color:var(--hp-purple)}

/* ── Het venster ───────────────────────────────────────────────────────── */

/* Het decor · recept van promptwatch.com, opgemeten 21 sep 2026:
   pillen bovenaan op de paginagrond, daaronder een band met een eigen
   achtergrond, en daarin een venster met een grijze bies dat alleen
   bovenaan is afgerond en onderaan uit de band loopt. Zij gebruiken een
   luchtfoto; wij een zacht verloop in de merkkleuren, want een artifact mag
   geen externe afbeelding laden. */

#suite-demo .hs-band{
  position:relative;
  overflow:hidden;
  padding-block:clamp(26px,4vw,44px) 0;
  background:
    radial-gradient(760px 420px at 12% 8%,  rgba(107,63,248,.20), transparent 62%),
    radial-gradient(680px 460px at 88% 14%, rgba(194,51,232,.16), transparent 60%),
    radial-gradient(900px 520px at 50% 108%, rgba(75,34,244,.22), transparent 66%),
    linear-gradient(180deg,#F3F1FE 0%,#EFECFE 100%);
}
#suite-demo .hs-band::after{
  /* fijne ruit, net als hun raster, zodat het vlak niet dood oogt */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(120% 90% at 50% 20%,#000,transparent 75%);
}

/* Het venster is breed genoeg om de Suite in zijn desktop-indeling te tonen.
   De echte zijbalk is 300px (SUITE_SIDEBAR_WIDTH_EXPANDED); bij een venster
   van 1440 houdt de contentkolom ~1070px over, net als in de app op een
   normale laptop. Smaller en elk raster klapt naar zijn tablet-variant, en
   dan lijkt de demo niet meer op wat de klant straks ziet. */
#suite-demo .hs-stage{
  position:relative;z-index:1;
  max-width:1440px;margin-inline:auto;
  padding-inline:clamp(16px,3vw,34px);
  margin-bottom:-56px;
}

/* De bies · 1px grijs rondom, alleen bovenaan afgerond */
#suite-demo .hs-frame{
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:10px 10px 0 0;
  padding:1px 1px 0;
  background:linear-gradient(180deg,rgba(113,113,122,.55) 0%,rgba(113,113,122,.45) 55%,rgba(161,161,170,.35) 100%);
  box-shadow:0 28px 70px -26px rgba(19,12,64,.45);
}

#suite-demo .hs-titlebar{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  height:30px;padding:0 12px;
  background:#F3F3F5;border-radius:9px 9px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
#suite-demo .hs-lights{display:flex;gap:6px;flex:0 0 auto}
#suite-demo .hs-lights i{width:9px;height:9px;border-radius:50%;display:block}
#suite-demo .hs-lights i:nth-child(1){background:#FF5F57}
#suite-demo .hs-lights i:nth-child(2){background:#FEBC2E}
#suite-demo .hs-lights i:nth-child(3){background:#28C840}
#suite-demo .hs-wtitle{
  flex:1;text-align:center;font-size:11.5px;font-weight:500;color:#6B6B76;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-inline:8px;
}
#suite-demo .hs-wspacer{width:33px;flex:0 0 auto}

#suite-demo .hs-app{
  position:relative;
  display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);
  height:clamp(520px,54vw,720px);
  border-radius:9px 9px 0 0;overflow:hidden;
  background:var(--hp-surface);
  color:var(--hp-text);font-size:14px;line-height:1.5;
}
@media (max-width:900px){
  #suite-demo .hs-app{grid-template-columns:minmax(0,1fr);height:auto;min-height:500px}
  #suite-demo .hs-stage{margin-bottom:-40px}
}

/* Zijbalk · 300px, platte rijen, geen pillen */

#suite-demo .hs-side{
  background:var(--hp-surface);border-right:1px solid var(--hp-border);
  display:flex;flex-direction:column;min-height:0;
}
@media (max-width:900px){#suite-demo .hs-side{display:none}}

#suite-demo .hs-side-top{
  display:flex;align-items:center;gap:10px;
  min-height:64px;flex:0 0 auto;padding:0 20px;
  border-bottom:1px solid var(--hp-border);
}
#suite-demo .hs-wordmark{height:18px;width:auto;display:block;flex-shrink:0}
#suite-demo .hs-panel-ico{
  margin-left:auto;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  color:var(--hp-nav-muted);flex-shrink:0;transition:background .15s,color .15s;
}
#suite-demo .hs-panel-ico:hover{background:var(--hp-nav-hover);color:var(--hp-purple)}
#suite-demo .hs-panel-ico svg{width:18px;height:18px}

#suite-demo .hs-side-scroll{overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;padding:6px 20px}
#suite-demo .hs-side-scroll::-webkit-scrollbar{width:8px}
#suite-demo .hs-side-scroll::-webkit-scrollbar-thumb{background:var(--hp-border);border-radius:4px}

#suite-demo .hs-back{
  display:flex;align-items:center;gap:12px;width:100%;padding:13px 0;
  color:var(--hp-nav-muted);font-size:13px;font-weight:500;text-align:left;
  transition:color .15s;
}
#suite-demo .hs-back:hover{color:var(--hp-purple)}
#suite-demo .hs-back svg{width:14px;height:14px}
/* Elk navigatie-icoon staat in een vak van 20x20 zodat de labels uitlijnen
   ongeacht de vorm van het icoon. Zo doet SuiteSidebar het ook. */
#suite-demo .hs-back > span:first-child,
#suite-demo .hs-tool-name > span:first-child,
#suite-demo .hs-nav-i > span:first-child{
  display:grid;place-items:center;width:20px;height:20px;flex-shrink:0;
}

#suite-demo .hs-tool-name{
  display:flex;align-items:center;gap:12px;padding:10px 0;
  font-size:14px;font-weight:700;color:var(--hp-text);
}
#suite-demo .hs-tool-name svg{width:18px;height:18px;color:var(--hp-text)}

#suite-demo .hs-sec{
  font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  color:var(--hp-nav-faint);padding:18px 6px 6px;
}
#suite-demo .hs-nav{display:flex;flex-direction:column}
#suite-demo .hs-nav-groep{display:flex;flex-direction:column}
/* Subitems: `ml-[10px] border-l pl-[10px]` uit SuiteSidebar 0.46.0 */
#suite-demo .hs-subnav{
  margin-left:10px;padding-left:10px;
  border-left:1px solid var(--hp-border);
  display:flex;flex-direction:column;
}
#suite-demo .hs-nav-i.hs-sub{padding:10px 0;animation:hsIn .5s var(--hp-spring) both}
@keyframes hsIn{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
#suite-demo .hs-chev.hs-op{transform:rotate(180deg)}
#suite-demo .hs-nav-i{
  position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:13px 0;
  font-size:14px;font-weight:500;color:var(--hp-nav-text);text-align:left;line-height:1.25;
  transition:color .15s;
}
#suite-demo .hs-nav-i svg{width:18px;height:18px}
#suite-demo .hs-nav-i > span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;line-height:1.25}
#suite-demo .hs-nav-i:hover{color:var(--hp-purple)}
#suite-demo .hs-nav-i[aria-current="page"]{color:var(--hp-purple)}
#suite-demo .hs-nav-i[disabled]{color:var(--hp-nav-faint);cursor:default}
#suite-demo .hs-nav-i[disabled]:hover{color:var(--hp-nav-faint)}
#suite-demo .hs-chev{margin-left:auto;color:var(--hp-nav-faint);display:flex;flex-shrink:0}
#suite-demo .hs-chev svg{width:14px;height:14px}
#suite-demo .hs-demo{
  flex-shrink:0;
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hp-purple);background:var(--hp-purple-light);
  padding:3px 8px;border-radius:9999px;
}

#suite-demo .hs-side-user{
  border-top:1px solid var(--hp-border);flex:0 0 auto;
  display:flex;align-items:center;gap:10px;min-height:66px;padding:14px 20px;
}
#suite-demo .hs-av{
  width:32px;height:32px;border-radius:9999px;
  background:var(--hp-purple-light);color:var(--hp-purple);
  font-size:12px;font-weight:800;
  display:grid;place-items:center;flex-shrink:0;
}
#suite-demo .hs-side-user b{display:block;font-size:12.5px;font-weight:600;line-height:1.25;color:var(--hp-text)}
#suite-demo .hs-side-user span span{display:block;font-size:11px;color:var(--hp-text-2);line-height:1.25}

/* Topbalk · 64px */

#suite-demo .hs-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--hp-surface-page)}

#suite-demo .hs-head{
  min-height:64px;flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:12px 24px;
  background:var(--hp-header-bg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hp-border);
}
#suite-demo .hs-crumb{
  font-size:16px;font-weight:600;color:var(--hp-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#suite-demo .hs-crumb i{font-style:normal;margin:0 4px}

#suite-demo .hs-spacer{flex:1}
#suite-demo .hs-asktrig{
  flex-shrink:0;width:34px;height:34px;border-radius:9999px;
  display:grid;place-items:center;color:var(--hp-nav-muted);
  transition:background .15s,color .15s;
}
#suite-demo .hs-asktrig svg{width:18px;height:18px}
#suite-demo .hs-asktrig:hover{background:var(--hp-nav-hover);color:var(--hp-purple)}
#suite-demo .hs-asktrig.hs-op{background:var(--hp-purple-light);color:var(--hp-purple)}

#suite-demo .hs-klant{
  display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  font-size:13.5px;font-weight:600;color:var(--hp-text);
  padding:6px 10px 6px 8px;border-radius:10px;transition:background .15s;
}
#suite-demo .hs-klant:hover{background:var(--hp-nav-hover)}
#suite-demo .hs-klant .hs-kav{
  width:24px;height:24px;border-radius:6px;background:var(--hp-purple-light);color:var(--hp-purple);
  font-size:11px;font-weight:800;display:grid;place-items:center;
}
#suite-demo .hs-klant svg{width:13px;height:13px;color:var(--hp-nav-faint)}

/* Paginakop */

#suite-demo .hs-pagehead{
  background:var(--hp-surface-page);padding:20px 24px 0;flex:0 0 auto;
}
#suite-demo .hs-ph-row{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
#suite-demo .hs-ph-row > div{flex:1 1 260px;min-width:0}
#suite-demo .hs-pagehead h2{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--hp-text)}
#suite-demo .hs-pagehead p{margin-top:2px;font-size:12px;line-height:1.5;color:var(--hp-text-2);max-width:44em}
#suite-demo .hs-ph-acties{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
#suite-demo .hs-ghostbtn{
  display:inline-flex;align-items:center;flex-shrink:0;
  background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:9px;
  padding:7px 13px;font-size:12.5px;font-weight:500;color:var(--hp-text-2);white-space:nowrap;
  transition:border-color .15s,background .15s;
}
#suite-demo .hs-ghostbtn:hover{border-color:var(--hp-purple-light-hover);background:var(--hp-nav-hover)}
#suite-demo .hs-period{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  background:var(--hp-surface);border:1px solid var(--hp-border);border-radius:9px;
  padding:7px 13px;font-size:12.5px;font-weight:500;color:var(--hp-text-2);white-space:nowrap;
  transition:border-color .15s,background .15s;
}
#suite-demo .hs-period:hover{border-color:var(--hp-purple-light-hover);background:var(--hp-nav-hover)}
#suite-demo .hs-period svg{width:14px;height:14px;color:var(--hp-nav-faint)}

#suite-demo .hs-subtabs{display:flex;gap:22px;margin-top:16px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--hp-border)}
#suite-demo .hs-subtabs::-webkit-scrollbar{display:none}
#suite-demo .hs-subtab{
  padding:0 0 11px;flex:0 0 auto;font-size:13.5px;font-weight:500;color:var(--hp-text-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s;
}
#suite-demo .hs-subtab:hover{color:var(--hp-text)}
#suite-demo .hs-subtab[aria-current="true"]{color:var(--hp-purple);font-weight:700;border-bottom-color:var(--hp-purple)}

/* Canvas */

#suite-demo .hs-canvas{
  container-type:inline-size;flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:24px 32px 56px;background:var(--hp-surface-page);scroll-behavior:smooth;
}
#suite-demo .hs-canvas::-webkit-scrollbar{width:8px}
#suite-demo .hs-canvas::-webkit-scrollbar-thumb{background:var(--hp-border);border-radius:4px}
@media (max-width:900px){#suite-demo .hs-canvas{overflow-y:visible;padding:16px}}

#suite-demo .hs-stack{display:flex;flex-direction:column;gap:24px}

/* ── Kit ───────────────────────────────────────────────────────────────── */

/* De smalle strook · linkerlijn, losse waarden op één regel */
#suite-demo .hs-strip{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--hp-purple-light),#FAFBFF 45%);
  border:1px solid var(--hp-border);border-left:3px solid var(--hp-purple);
  border-radius:10px;padding:12px 22px;font-size:13px;color:var(--hp-text);
}
#suite-demo .hs-strip > span{display:inline-flex;align-items:baseline;gap:8px}
#suite-demo .hs-strip .hs-sl{
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hp-text-muted);
}
#suite-demo .hs-strip b{font-size:15px;font-weight:700;color:var(--hp-text);font-variant-numeric:tabular-nums}

/* De regel met een stip · alleen voor de uitzondering */
#suite-demo .hs-alert{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:#D63A6E;padding:0 2px;
}
#suite-demo .hs-alert::before{
  content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0;
}

#suite-demo .hs-callout{
  display:flex;gap:10px;align-items:flex-start;
  background:linear-gradient(90deg,var(--hp-purple-light),#FAFBFF 55%);
  border:1px solid #F0F1F8;border-radius:12px;
  padding:14px 22px;font-size:13px;line-height:1.6;color:var(--hp-text-2);
}
#suite-demo .hs-callout svg{width:16px;height:16px;flex:0 0 auto;color:var(--hp-purple);margin-top:2px}
#suite-demo .hs-callout span{max-width:62em}
#suite-demo .hs-callout b{color:var(--hp-insight);font-weight:700}

#suite-demo .hs-kpis{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@container (max-width:459px){#suite-demo .hs-kpis{grid-template-columns:minmax(0,1fr)}}
@container (min-width:460px){#suite-demo .hs-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:700px){#suite-demo .hs-kpis.hs-k3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (min-width:920px){#suite-demo .hs-kpis.hs-k4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Tegel · radius 16, padding 24/28, linkerlijn in de accentkleur met een
   schuine waas. Letterlijk de v2-ratio-tile van het live dashboard. */
#suite-demo .hs-kpi{
  background:var(--hp-surface);
  border:1px solid var(--hp-border);border-left:3px solid var(--hp-border);
  border-radius:var(--r-card);box-shadow:var(--hp-shadow);
  padding:24px 28px;display:flex;flex-direction:column;gap:18px;
  position:relative;overflow:hidden;
}
#suite-demo .hs-kpi-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#suite-demo .hs-kpi-headcol{display:flex;flex-direction:column;gap:8px;min-width:0}
#suite-demo .hs-kpi-bottom{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-top:14px;border-top:1px solid var(--hp-surface-page);margin-top:auto;
}
#suite-demo .hs-norm{font-size:13px;color:var(--hp-text-2)}
#suite-demo .hs-norm strong{color:var(--hp-text);font-weight:700}
#suite-demo .hs-eur{font-size:12px;color:var(--hp-text-muted);font-variant-numeric:tabular-nums;text-align:right}
#suite-demo .hs-kpi.hs-acc-purple{border-left-color:var(--hp-purple);background:linear-gradient(160deg,#fff 50%,rgba(75,34,244,.06))}
#suite-demo .hs-kpi.hs-acc-mint{border-left-color:var(--hp-success);background:linear-gradient(160deg,#fff 50%,rgba(57,216,153,.08))}
#suite-demo .hs-kpi.hs-acc-pink{border-left-color:var(--hp-negative);background:linear-gradient(160deg,#fff 50%,rgba(255,0,122,.07))}
#suite-demo .hs-kpi.hs-acc-warn{border-left-color:var(--hp-warning);background:linear-gradient(160deg,#fff 50%,rgba(245,158,11,.08))}

#suite-demo .hs-kpi .hs-lab{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hp-text-muted);
}
#suite-demo .hs-kpi .hs-val{
  font-size:2.3rem;font-weight:700;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--hp-text);
}
#suite-demo .hs-kpi .hs-sub{font-size:13px;line-height:1.5;color:var(--hp-text-2)}
#suite-demo .hs-kpi .hs-mini{display:block;width:100%;height:30px;margin-top:auto;overflow:visible}

/* Hero · `.hero-card` + `.v2-cum-*` uit daily.css. Padding 30px 32px, twee
   zachte radiale vlekken in de hoeken, cijfer 2,3rem/700, en een voetregel
   achter een hairline van 1px in wit op 14%. */
#suite-demo .hs-kpi.hs-hero{
  background:var(--hp-hero);border:none;border-radius:var(--r-card);
  color:#fff;padding:30px 32px;box-shadow:none;gap:0;
  position:relative;overflow:hidden;
}
#suite-demo .hs-kpi.hs-hero::before{
  content:"";position:absolute;top:-60px;right:-60px;width:240px;height:240px;
  background:radial-gradient(circle,rgba(180,140,255,.25) 0%,transparent 65%);pointer-events:none;
}
#suite-demo .hs-kpi.hs-hero::after{
  content:"";position:absolute;bottom:-40px;left:-20px;width:160px;height:160px;
  background:radial-gradient(circle,rgba(61,0,207,.35) 0%,transparent 70%);pointer-events:none;
}
#suite-demo .hs-kpi.hs-hero > *{position:relative;z-index:1}
#suite-demo .hs-kpi.hs-hero .hs-lab{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:14px;
}
#suite-demo .hs-kpi.hs-hero .hs-val{font-size:2.3rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff}
#suite-demo .hs-kpi.hs-hero .hs-bigdelta{font-size:12px;font-weight:700;margin-top:6px;color:var(--hp-on-accent-positive)}
#suite-demo .hs-kpi.hs-hero .hs-sub{font-size:11px;color:rgba(255,255,255,.45);margin-top:6px}
#suite-demo .hs-kpi.hs-hero .hs-inset{
  margin-top:auto;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
#suite-demo .hs-kpi.hs-hero .hs-inset em{
  font-style:normal;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
#suite-demo .hs-kpi.hs-hero .hs-inset strong{
  font-size:19px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;
}
#suite-demo .hs-kpi.hs-hero .hs-foot-vs{
  margin-left:auto;font-size:13px;font-weight:700;color:var(--hp-on-accent-muted);
}

#suite-demo .hs-delta{
  display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:4px 11px;
  font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
#suite-demo .hs-delta.hs-up{background:rgba(57,216,153,.14);color:#20A370}
#suite-demo .hs-delta.hs-down{background:rgba(255,0,122,.10);color:#D63A6E}
#suite-demo .hs-delta.hs-flat{background:var(--hp-chip);color:var(--hp-text-2)}
#suite-demo .hs-delta svg{width:11px;height:11px}

#suite-demo .hs-card{
  background:var(--hp-surface);border:1px solid var(--hp-border);
  border-radius:var(--r-card);box-shadow:var(--hp-shadow);
  padding:24px 28px;display:flex;flex-direction:column;
}
#suite-demo .hs-card > h3{
  font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--hp-text);
  display:flex;align-items:baseline;justify-content:space-between;gap:9px;flex-wrap:wrap;
  margin-bottom:16px;
}
#suite-demo .hs-card > h3 small{font-size:12px;font-weight:400;color:var(--hp-text-2)}
#suite-demo .hs-card .hs-cap{
  margin-top:10px;padding-top:9px;border-top:1px dashed var(--hp-border-dashed);
  font-size:11.5px;line-height:1.5;font-weight:600;color:var(--hp-insight);max-width:44em;
}

#suite-demo .hs-chart{width:100%;height:auto;display:block;margin-top:10px;overflow:visible}
#suite-demo .hs-chart .hs-grid{stroke:var(--hp-border);stroke-width:1}
#suite-demo .hs-chart .hs-ax{font:500 10px/1 var(--fs-mono)}

#suite-demo .hs-two{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
@container (max-width:659px){#suite-demo .hs-two{grid-template-columns:minmax(0,1fr)}}
@container (min-width:660px){#suite-demo .hs-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Tabel */

#suite-demo .hs-tw{overflow-x:auto;margin-top:12px}
#suite-demo .hs-tw::-webkit-scrollbar{height:7px}
#suite-demo .hs-tw::-webkit-scrollbar-thumb{background:var(--hp-border);border-radius:4px}
#suite-demo table{border-collapse:collapse;width:100%;min-width:460px;font-variant-numeric:tabular-nums}
#suite-demo th{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--hp-text-muted);text-align:right;padding:11px 18px;
  border-bottom:1px solid var(--hp-border);white-space:nowrap;
}
#suite-demo th:first-child{text-align:left;padding-left:0}
#suite-demo td{
  padding:15px 18px;font-size:13px;text-align:right;
  border-bottom:1px solid var(--hp-surface-page);white-space:nowrap;color:var(--hp-text);
}
#suite-demo td:first-child{text-align:left;font-weight:600;padding-left:0}
#suite-demo .hs-num{font-variant-numeric:tabular-nums;color:var(--hp-text)}
#suite-demo .hs-name{color:var(--hp-text);white-space:normal;min-width:180px}
#suite-demo tbody tr{transition:background .12s}
#suite-demo tbody tr:hover td{background:#FAFBFF}
#suite-demo tbody tr:last-child td{border-bottom:none}
#suite-demo tfoot td{border-top:2px solid var(--hp-border);border-bottom:none;font-weight:700;color:var(--hp-text);background:#FAFAFF}

#suite-demo .hs-tag{
  display:inline-block;border-radius:6px;padding:4px 9px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  background:var(--hp-purple-light);color:var(--hp-purple);
}
#suite-demo .hs-tag.hs-mint{background:var(--hp-success-surface);color:var(--hp-success-ink)}
#suite-demo .hs-tag.hs-grey{background:var(--hp-chip);color:var(--hp-text-2)}
#suite-demo .hs-tag.hs-pink{background:var(--hp-negative-surface);color:var(--hp-negative-text)}
#suite-demo .hs-tag.hs-warn{background:var(--hp-warning-surface);color:var(--hp-warning-dark)}

/* Staafjes */

#suite-demo .hs-bars{display:flex;flex-direction:column;gap:10px;margin-top:14px}
#suite-demo .hs-bar{display:grid;grid-template-columns:minmax(92px,150px) minmax(0,1fr) auto;gap:12px;align-items:center}
#suite-demo .hs-bar > span:first-child{font-size:12px;font-weight:500;color:var(--hp-text-2)}
#suite-demo .hs-bar .hs-track{height:8px;border-radius:4px;background:var(--hp-surface-page);overflow:hidden}
#suite-demo .hs-bar .hs-fill{height:100%;border-radius:4px;background:var(--hp-purple);transition:width .55s var(--hp-spring)}
#suite-demo .hs-bar .hs-fill.hs-mint{background:var(--hp-success)}
#suite-demo .hs-bar .hs-fill.hs-pink{background:var(--hp-negative)}
#suite-demo .hs-bar b{font:600 11.5px/1 var(--fs-mono);font-variant-numeric:tabular-nums;min-width:56px;text-align:right;color:var(--hp-text)}

/* Tegelraster onder Alle tools */

#suite-demo .hs-tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
@container (max-width:519px){#suite-demo .hs-tiles{grid-template-columns:minmax(0,1fr)}}
@container (min-width:520px){#suite-demo .hs-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (min-width:860px){#suite-demo .hs-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
#suite-demo .hs-tile{
  text-align:left;background:var(--hp-surface);border:1px solid var(--hp-border);
  border-radius:var(--r-card);box-shadow:var(--hp-shadow);
  padding:20px 24px;display:flex;flex-direction:column;gap:8px;
  transition:transform .25s var(--hp-spring),box-shadow .25s,border-color .15s;
}
#suite-demo .hs-tile:hover{transform:translateY(-3px);border-color:var(--hp-purple-light-hover);box-shadow:var(--hp-shadow-lift);z-index:2}
#suite-demo .hs-tile[disabled]{cursor:default;background:var(--hp-surface-card);box-shadow:none}
#suite-demo .hs-tile[disabled]:hover{transform:none;border-color:var(--hp-border);box-shadow:none}
#suite-demo .hs-tile[disabled] b, #suite-demo .hs-tile[disabled] p{color:var(--hp-nav-muted)}
#suite-demo .hs-tile[disabled] .hs-ico{background:var(--hp-chip);color:var(--hp-nav-muted)}
#suite-demo .hs-tile .hs-ico{
  width:32px;height:32px;border-radius:9px;background:var(--hp-purple-light);color:var(--hp-purple);
  display:flex;align-items:center;justify-content:center;
}
#suite-demo .hs-tile .hs-ico svg{width:17px;height:17px}
#suite-demo .hs-tile b{font-size:14px;font-weight:700;color:var(--hp-text)}
#suite-demo .hs-tile p{font-size:11.5px;line-height:1.5;color:var(--hp-text-2)}
#suite-demo .hs-tile .hs-tag{align-self:flex-start;margin-top:2px}

/* ── Per module een eigen scope ────────────────────────────────────────
   De Suite doet dit zelf ook: `.hp-daily` heeft eigen tokens en eigen maten.
   Elke module houdt dus zijn eigen gezicht in plaats van dat alles door één
   mal gaat. Hieronder de Recommender, gemeten aan
   dashboard-recommender/design-reference/performance-v19.html. */

#suite-demo .hs-m-rec{
  --hp-purple:#552AF5;
  --hp-text:#0D1C2E;
  --hp-text-2:#6B7A99;
  --hp-text-muted:#9EA3B0;
  --hp-border:#EDEEF6;
  --hp-surface-page:#F4F5FB;
  --hp-hero:linear-gradient(145deg,#6B3FF8 0%,#552AF5 45%,#3D00CF 100%);
}
/* drie gelijke kolommen: hero plus twee kaarten */
#suite-demo .hs-m-rec .hs-kpis{grid-template-columns:minmax(0,1fr)}
@container (min-width:760px){#suite-demo .hs-m-rec .hs-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}

#suite-demo .hs-m-rec .hs-callout{
  background:linear-gradient(135deg,rgba(85,42,245,.06) 0%,rgba(57,216,153,.04) 100%);
  border:1px solid rgba(85,42,245,.12);border-radius:12px;padding:14px 20px;
}
#suite-demo .hs-m-rec .hs-callout svg{color:#552AF5;width:18px;height:18px}

#suite-demo .hs-m-rec .hs-kpi{
  border:1px solid var(--hp-border);border-left-width:1px;border-left-color:var(--hp-border);
  border-radius:16px;padding:26px 26px 0;gap:0;overflow:hidden;
}
#suite-demo .hs-m-rec .hs-kpi .hs-lab{
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:#9EA3B0;justify-content:space-between;width:100%;
}
#suite-demo .hs-m-rec .hs-kpi .hs-val{font-size:2rem;font-weight:600;letter-spacing:-.03em;line-height:1;margin-top:10px}
#suite-demo .hs-m-rec .hs-kpi .hs-sub{font-size:12px;color:var(--hp-text-2);margin-top:6px}
#suite-demo .hs-m-rec .hs-kpi .hs-mini{height:52px;margin-top:16px;padding-top:0}
#suite-demo .hs-m-rec .hs-legenda{
  display:block;padding:8px 0 16px;font-size:10px;font-weight:500;color:#9EA3B0;
}
#suite-demo .hs-m-rec .hs-kpi-bottom{border-top:none;padding-top:0;padding-bottom:20px;margin-top:auto}

/* hero · cijfer op 4rem, padding 32 */
#suite-demo .hs-m-rec .hs-kpi.hs-hero{padding:32px}
#suite-demo .hs-m-rec .hs-kpi.hs-hero .hs-lab{
  font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.55);margin-bottom:0;
}
#suite-demo .hs-m-rec .hs-kpi.hs-hero .hs-val{font-size:4rem;font-weight:700;margin-top:16px}
#suite-demo .hs-m-rec .hs-kpi.hs-hero .hs-sub{font-size:12px;font-weight:600;color:rgba(255,255,255,.65);margin-top:6px}
#suite-demo .hs-m-rec .hs-dek{
  display:block;margin-top:20px;font-size:13px;font-weight:600;color:rgba(255,255,255,.9);
}
#suite-demo .hs-m-rec .hs-kpi.hs-hero .hs-inset em{font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.45)}
#suite-demo .hs-m-rec .hs-kpi.hs-hero .hs-inset strong{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
#suite-demo .hs-m-rec .hs-kpi.hs-hero .hs-foot-vs{
  margin-left:0;display:block;width:100%;font-size:11px;font-weight:400;color:rgba(255,255,255,.4);margin-top:3px;
}

#suite-demo .hs-m-rec .hs-card{border-color:#F0F1F8;padding:32px 36px}
#suite-demo .hs-m-rec .hs-card > h3{font-weight:600}

/* linkkaarten onderaan een Recommender-pagina */
#suite-demo .hs-links{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@container (min-width:700px){#suite-demo .hs-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
#suite-demo .hs-link{
  text-align:left;background:var(--hp-surface);border:1px solid var(--hp-border);
  border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:8px;
  box-shadow:var(--hp-shadow);transition:transform .25s var(--hp-spring),box-shadow .25s,border-color .15s;
}
#suite-demo .hs-link:hover{transform:translateY(-3px);border-color:var(--hp-purple-light-hover);box-shadow:var(--hp-shadow-lift)}
#suite-demo .hs-link-ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--hp-purple-light);color:var(--hp-purple);
}
#suite-demo .hs-link-ico svg{width:17px;height:17px}
#suite-demo .hs-link b{font-size:15px;font-weight:700;color:var(--hp-text)}
#suite-demo .hs-link p{font-size:12.5px;line-height:1.5;color:var(--hp-text-2)}
#suite-demo .hs-link-go{
  margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--hp-purple);
}
#suite-demo .hs-link-go svg{width:13px;height:13px}

/* ── Ask Hyperr · slide-over met backdrop, uit Drawer.tsx ──────────────
   fixed bottom-0 top-0 z-[200], breedte 460, backdrop rgba(13,28,46,.5)
   met blur(2px), overgang 350ms cubic-bezier(.16,1,.3,1). In de demo
   absoluut binnen het venster in plaats van fixed op het scherm. */

#suite-demo .hs-backdrop{
  position:absolute;inset:0;z-index:199;
  background:rgba(13,28,46,.5);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:hsFade .3s ease both;
}
@keyframes hsFade{from{opacity:0}to{opacity:1}}

#suite-demo .hs-paneel{
  position:absolute;top:0;bottom:0;right:0;z-index:200;
  width:460px;max-width:100%;
  display:flex;flex-direction:column;
  background:var(--hp-surface);
  border-left:1px solid var(--hp-border);
  box-shadow:-24px 0 60px -20px rgba(13,28,46,.28);
  animation:hsSlide .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes hsSlide{from{transform:translateX(100%)}to{transform:none}}
@media (max-width:900px){#suite-demo .hs-paneel{width:100%}}

#suite-demo .hs-pk{
  flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 24px;border-bottom:1px solid var(--hp-border);
}
#suite-demo .hs-pk-t{display:block;font-size:15px;font-weight:700;color:var(--hp-text)}
#suite-demo .hs-pk-s{display:block;margin-top:2px;font-size:12px;color:var(--hp-text-muted)}
#suite-demo .hs-pk-x{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;
  background:var(--hp-purple-light);color:var(--hp-text-2);transition:background .15s;
}
#suite-demo .hs-pk-x svg{width:14px;height:14px;transform:rotate(45deg)}
#suite-demo .hs-pk-x:hover{background:var(--hp-border)}
#suite-demo .hs-pk-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px 24px}
#suite-demo .hs-pk-body::-webkit-scrollbar{width:8px}
#suite-demo .hs-pk-body::-webkit-scrollbar-thumb{background:var(--hp-border);border-radius:4px}
#suite-demo .hs-pk-body .hs-thread,
#suite-demo .hs-pk-body .hs-composer,
#suite-demo .hs-pk-body .hs-sugs{max-width:none}
#suite-demo .hs-pk-body .hs-ask-empty{padding-block:clamp(8px,4vh,32px) 8px}
#suite-demo .hs-pk-body .hs-ask-empty h2{font-size:22px}
#suite-demo .hs-pk-body .hs-bub{max-width:100%}
#suite-demo .hs-pk-body .hs-answer p{font-size:13px}

/* ── Ask Hyperr ────────────────────────────────────────────────────────── */

#suite-demo .hs-ask{display:flex;flex-direction:column;min-height:100%}
#suite-demo .hs-ask-empty{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:clamp(12px,5vh,48px) 0 8px;text-align:center;
}
#suite-demo .hs-ask-empty .hs-eye{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--hp-purple)}
#suite-demo .hs-ask-empty h2{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.2;color:var(--hp-text)}
#suite-demo .hs-ask-empty h2 b{font-weight:800;color:var(--hp-purple)}

#suite-demo .hs-sugs{display:flex;flex-direction:column;gap:8px;width:100%;max-width:560px}
#suite-demo .hs-sug{
  display:flex;align-items:center;gap:11px;text-align:left;padding:12px 16px;
  border:1px solid var(--hp-border);border-radius:10px;
  background:var(--hp-surface);color:var(--hp-text-2);
  font-size:13px;font-weight:500;line-height:1.4;
  transition:border-color .15s,color .15s,background .15s,transform .15s var(--hp-spring);
}
#suite-demo .hs-sug:hover{border-color:var(--hp-purple-light-hover);background:var(--hp-nav-hover);color:var(--hp-purple);transform:translateY(-1px)}
#suite-demo .hs-sug svg{width:14px;height:14px;flex:0 0 auto;opacity:.6}

#suite-demo .hs-shuffle{
  align-self:center;display:inline-flex;align-items:center;gap:7px;
  color:var(--hp-nav-faint);font-size:12px;font-weight:500;padding:7px 10px;border-radius:8px;
  transition:color .15s,background .15s;
}
#suite-demo .hs-shuffle:hover{color:var(--hp-purple);background:var(--hp-nav-hover)}
#suite-demo .hs-shuffle svg{width:14px;height:14px}

#suite-demo .hs-thread{display:flex;flex-direction:column;gap:14px;max-width:720px;width:100%;margin-inline:auto}
#suite-demo .hs-bub{
  align-self:flex-end;max-width:min(100%,520px);
  background:var(--hp-purple-light);color:var(--hp-text);
  border-radius:14px 14px 4px 14px;padding:11px 16px;font-size:13.5px;line-height:1.55;
}

#suite-demo .hs-trace{display:flex;flex-direction:column;gap:8px}
#suite-demo .hs-trace-i{
  display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.4;color:var(--hp-nav-muted);
  animation:hsRise .34s var(--hp-spring) both;
}
#suite-demo .hs-trace-i svg{width:14px;height:14px;color:var(--hp-nav-faint);flex:0 0 auto}
#suite-demo .hs-trace-i em{font-style:normal;color:var(--hp-text-2);font-weight:600}
#suite-demo .hs-trace-i.hs-done svg{color:var(--hp-success)}
@keyframes hsRise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

#suite-demo .hs-dots{display:inline-flex;gap:3px;align-items:center;margin-left:2px}
#suite-demo .hs-dots i{width:4px;height:4px;border-radius:50%;background:var(--hp-nav-faint);animation:hsPulse 1.1s ease-in-out infinite}
#suite-demo .hs-dots i:nth-child(2){animation-delay:.16s}
#suite-demo .hs-dots i:nth-child(3){animation-delay:.32s}
@keyframes hsPulse{0%,100%{opacity:.25}50%{opacity:1}}

#suite-demo .hs-answer{display:flex;flex-direction:column;gap:12px;animation:hsRise .4s var(--hp-spring) both}
#suite-demo .hs-answer p{font-size:13.5px;line-height:1.6;color:var(--hp-text);max-width:62em}
#suite-demo .hs-answer p b{font-weight:700;color:var(--hp-insight)}
#suite-demo .hs-answer .hs-card{padding:14px 20px 16px}

#suite-demo .hs-cant{
  display:flex;gap:10px;align-items:flex-start;
  border:1px dashed var(--hp-border-dashed);border-radius:12px;
  padding:13px 17px;background:var(--hp-surface);
}
#suite-demo .hs-cant svg{width:15px;height:15px;color:var(--hp-nav-faint);flex:0 0 auto;margin-top:2px}
#suite-demo .hs-cant b{
  display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hp-nav-faint);margin-bottom:4px;
}
#suite-demo .hs-cant span span{font-size:12.5px;line-height:1.55;color:var(--hp-text-2)}

#suite-demo .hs-acts{display:flex;flex-wrap:wrap;gap:8px}
#suite-demo .hs-act{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--hp-purple);border-radius:9px;padding:9px 16px;
  background:var(--hp-surface);color:var(--hp-purple);font-size:12.5px;font-weight:600;
  transition:background .15s,box-shadow .15s,color .15s;
}
#suite-demo .hs-act:hover{background:var(--hp-purple);color:#fff;box-shadow:var(--hp-shadow-lift)}
#suite-demo .hs-act svg{width:13px;height:13px}
#suite-demo .hs-act.hs-ghost{border-color:var(--hp-border);color:var(--hp-text-2)}
#suite-demo .hs-act.hs-ghost:hover{background:var(--hp-nav-hover);color:var(--hp-text);box-shadow:none}

#suite-demo .hs-composer{
  flex:0 0 auto;margin-top:16px;max-width:720px;width:100%;margin-inline:auto;
  border:1px solid var(--hp-border);border-radius:14px;background:var(--hp-surface);
  box-shadow:var(--hp-shadow);padding:14px 18px 12px;
}
#suite-demo .hs-composer .hs-line{min-height:20px;font-size:13.5px;line-height:1.45;color:var(--hp-text);word-break:break-word}
#suite-demo .hs-composer .hs-line:empty::before{content:attr(data-ph);color:var(--hp-nav-faint)}
#suite-demo .hs-composer .hs-line .hs-caret{
  display:inline-block;width:1.5px;height:15px;vertical-align:-2px;
  background:var(--hp-purple);animation:hsBlink 1s step-end infinite;margin-left:1px;
}
@keyframes hsBlink{50%{opacity:0}}
#suite-demo .hs-composer .hs-row{display:flex;align-items:center;gap:10px;margin-top:10px}
#suite-demo .hs-composer .hs-row .hs-plus{color:var(--hp-nav-faint);display:flex}
#suite-demo .hs-composer .hs-row .hs-plus svg{width:16px;height:16px}
#suite-demo .hs-composer .hs-row .hs-who{font-size:11px;font-weight:500;color:var(--hp-nav-faint)}
#suite-demo .hs-composer .hs-send{
  margin-left:auto;width:28px;height:28px;border-radius:8px;
  background:var(--hp-purple);color:#fff;display:flex;align-items:center;justify-content:center;
}
#suite-demo .hs-composer .hs-send svg{width:14px;height:14px}
#suite-demo .hs-composer .hs-send[disabled]{background:var(--hp-chip);color:var(--hp-nav-muted);cursor:default}

/* ── Onderschrift · marketinglaag ──────────────────────────────────────── */

#suite-demo .hs-foot{
  margin:16px auto 14px;display:flex;gap:10px;align-items:center;justify-content:center;
  flex-wrap:wrap;text-align:center;font-size:12px;line-height:1.5;color:var(--band-sub);
  max-width:1200px;padding-inline:16px;
}
#suite-demo .hs-foot .hs-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}
/* Op een telefoon breken de scheidingsstipjes het onderschrift op; dan stapelen. */
@media (max-width:640px){
  #suite-demo .hs-foot{flex-direction:column;gap:3px}
  #suite-demo .hs-foot .hs-dot{display:none}
}

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

/* ══════════════════════════════════════════════════════════════════════
   SEO Agents · scope .hs-m-seo
   Overgenomen uit seo-audit/portal/app/globals.css. Die module heeft een
   eigen token-set (--purple #4B22F4 via theme.css, --bg #F4F2FB) en een
   eigen kaartmaat; vandaar een eigen scope in plaats van de shell-tokens.
   ══════════════════════════════════════════════════════════════════════ */

#suite-demo .hs-m-seo {
  --s-purple: #4B22F4;
  --s-purple-deep: #3D00CF;
  --s-purple-soft: #EEEAFE;
  --s-purple-tint: #F7F5FE;
  --s-bg: #F4F2FB;
  --s-line: #E5E1F4;
  --s-line-soft: #EFECF8;
  --s-ink: #031F0B;
  --s-ink-soft: #4E544D;
  --s-ink-mute: #6B7A99;
  --s-ink-faint: #9EA3B0;
  --s-good: #2BC580;
  --s-good-soft: #E1F5EE;
  --s-warn: #B45309;
  --s-warn-soft: #FCEFD1;
  --s-bad: #D63A6E;
  --s-bad-soft: #FBE0E5;
  background: var(--s-bg);
}

/* Greeting + cyclus · .greeting-row */
#suite-demo .hs-greetrow { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
#suite-demo .hs-greetcard {
  background: #fff; border: 1px solid var(--s-line); border-radius: 18px;
  padding: 28px 28px 24px; position: relative; overflow: hidden;
}
#suite-demo .hs-greetcard::before {
  content: ''; position: absolute; top: -120px; right: -120px; width: 280px; height: 280px;
  border-radius: 50%; background: radial-gradient(circle, var(--s-purple-soft), transparent 70%);
  pointer-events: none;
}
#suite-demo .hs-greet {
  font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.025em;
  color: var(--s-ink); position: relative;
}
#suite-demo .hs-greet em { font-style: normal; color: var(--s-purple); }
#suite-demo .hs-greetsub {
  font-size: 14px; color: var(--s-ink-mute); margin-top: 12px; max-width: 460px; position: relative;
}
#suite-demo .hs-greetsub strong { color: var(--s-ink); font-weight: 600; }
#suite-demo .hs-ask2 {
  display: flex; align-items: stretch; gap: 8px; margin-top: 14px; background: #fff;
  border: 1px solid var(--s-line); border-radius: 14px; padding: 10px 10px 10px 14px; position: relative;
}
#suite-demo .hs-ask2-in {
  flex: 1; font-size: 14px; line-height: 1.5; color: var(--s-ink-faint); padding: 4px 0; min-width: 0;
}
#suite-demo .hs-ask2-in::after {
  content: '\258D'; animation: hs-caret 1.1s steps(1) infinite; color: var(--s-purple);
}
@keyframes hs-caret { 0%, 50% { opacity: 1 } 51%, 100% { opacity: 0 } }
#suite-demo .hs-ask2-send {
  width: 36px; height: 36px; align-self: flex-end; border: 0; border-radius: 10px;
  background: var(--s-purple); color: #fff; display: inline-flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
#suite-demo .hs-ask2-send svg { width: 16px; height: 16px; }
#suite-demo .hs-qa-lab {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--s-ink-faint); margin: 18px 0 10px; position: relative;
}
#suite-demo .hs-qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; }
#suite-demo .hs-qa {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-align: left;
  padding: 14px; background: #fff; border: 1px solid var(--s-line); border-radius: 12px;
  cursor: pointer; font: inherit; color: var(--s-ink);
  transition: border-color .15s, background .15s, transform .1s;
}
#suite-demo .hs-qa:hover { border-color: color-mix(in srgb, var(--s-purple) 40%, var(--s-line)); background: color-mix(in srgb, var(--s-purple) 3%, #fff); }
#suite-demo .hs-qa:active { transform: translateY(1px); }
#suite-demo .hs-qa-ico {
  width: 30px; height: 30px; border-radius: 8px; color: var(--s-purple);
  background: color-mix(in srgb, var(--s-purple) 10%, #fff);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#suite-demo .hs-qa-ico svg { width: 15px; height: 15px; }
#suite-demo .hs-qa-t { font-size: 13px; font-weight: 500; line-height: 1.35; }

#suite-demo .hs-cyc {
  background: linear-gradient(135deg, var(--s-purple) 0%, var(--s-purple-deep) 100%);
  color: #fff; border-radius: 18px; padding: 22px 26px; display: flex; flex-direction: column;
  gap: 14px; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(75,40,237,.18);
}
#suite-demo .hs-cyc::after {
  content: ''; position: absolute; bottom: -100px; right: -100px; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 60%);
  pointer-events: none;
}
#suite-demo .hs-cyc > * { position: relative; z-index: 1; }
#suite-demo .hs-cyc-lab {
  font-size: 10px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: rgba(255,255,255,.6);
}
#suite-demo .hs-cyc-naam { font-size: 22px; font-weight: 700; margin: 4px 0 2px; letter-spacing: -.02em; line-height: 1.1; }
#suite-demo .hs-cyc-fase { font-size: 12.5px; color: rgba(255,255,255,.7); }
#suite-demo .hs-cyc-num { font-size: 56px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
#suite-demo .hs-cyc-numlab {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.65); margin-top: 8px;
}
#suite-demo .hs-cyc-lijn { height: 1px; background: rgba(255,255,255,.16); margin: 2px 0; }
#suite-demo .hs-cyc-rij { display: flex; align-items: baseline; gap: 10px; }
#suite-demo .hs-cyc-v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
#suite-demo .hs-cyc-v .hs-u { font-size: 12px; font-weight: 600; opacity: .6; margin-left: 1px; }
#suite-demo .hs-cyc-l { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); }
#suite-demo .hs-cyc-knop {
  background: #fff; color: var(--s-purple); font-weight: 700; border: 0; border-radius: 9999px;
  padding: 7px 16px; font-size: 12.5px; cursor: pointer; align-self: flex-start;
}
#suite-demo .hs-cyc-knop:hover { background: var(--s-purple-soft); }

/* KPI-strip */
#suite-demo .hs-seokpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
#suite-demo .hs-seokpi > div { background: #fff; border: 1px solid var(--s-line); border-radius: 14px; padding: 18px 20px; }
#suite-demo .hs-seokpi .hs-l { font-size: 12px; color: var(--s-ink-mute); font-weight: 500; margin-bottom: 6px; }
#suite-demo .hs-seokpi .hs-n { font-size: 32px; font-weight: 700; color: var(--s-ink); line-height: 1; letter-spacing: -.025em; }
#suite-demo .hs-seokpi .hs-n .hs-u { font-size: 16px; color: var(--s-ink-faint); font-weight: 400; }
#suite-demo .hs-seokpi .hs-d { font-size: 11.5px; margin-top: 8px; font-weight: 500; color: var(--s-ink-mute); }
#suite-demo .hs-seokpi .hs-d.hs-pos { color: var(--s-good); }

/* Kaart */
#suite-demo .hs-m-seo .hs-card2 {
  background: #fff; border: 1px solid var(--s-line); border-radius: 18px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
#suite-demo .hs-ch { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
#suite-demo .hs-ct { font-size: 15px; font-weight: 600; color: var(--s-ink); }
#suite-demo .hs-cs { font-size: 12px; color: var(--s-ink-mute); margin-top: 3px; }
#suite-demo .hs-leg { display: flex; gap: 16px; font-size: 11.5px; color: var(--s-ink-mute); flex-shrink: 0; }
#suite-demo .hs-leg > span { display: inline-flex; align-items: center; gap: 6px; }
#suite-demo .hs-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
#suite-demo .hs-leg i.hs-dash { width: 16px; height: 0; border-top: 2px dashed #C9C4D9; border-radius: 0; }

/* Insights ↔ acties */
#suite-demo .hs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
#suite-demo .hs-collab {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--s-ink-faint); margin-bottom: 10px;
}
#suite-demo .hs-ii { display: flex; gap: 10px; padding: 8px; border-radius: 10px; align-items: flex-start; }
#suite-demo .hs-ii:hover { background: var(--s-bg); }
#suite-demo .hs-ii-ic {
  width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
#suite-demo .hs-ii-ic svg { width: 14px; height: 14px; }
#suite-demo .hs-ii-ic.hs-warn { background: var(--s-warn-soft); color: var(--s-warn); }
#suite-demo .hs-ii-ic.hs-bad { background: var(--s-bad-soft); color: var(--s-bad); }
#suite-demo .hs-ii-ic.hs-good { background: var(--s-good-soft); color: var(--s-good); }
#suite-demo .hs-ii-t { font-size: 13px; color: var(--s-ink); line-height: 1.45; }
#suite-demo .hs-ii-m { font-size: 11px; color: var(--s-ink-mute); margin-top: 2px; }
#suite-demo .hs-ii-m strong { color: var(--s-good); font-weight: 600; }
#suite-demo .hs-ii.hs-actie { border: 1px solid var(--s-line); margin-bottom: 4px; cursor: pointer; }
#suite-demo .hs-ii.hs-actie:hover { border-color: color-mix(in srgb, var(--s-purple) 40%, var(--s-line)); }

/* Categorieën */
#suite-demo .hs-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#suite-demo .hs-topic { border: 1px solid var(--s-line); border-radius: 14px; padding: 16px; background: #fff; }
#suite-demo .hs-topic-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
#suite-demo .hs-topic .hs-tn { font-size: 13.5px; font-weight: 600; color: var(--s-ink); }
#suite-demo .hs-topic .hs-tu { font-size: 11px; color: var(--s-ink-mute); margin-top: 2px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
#suite-demo .hs-ringrow { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
#suite-demo .hs-gauge { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
#suite-demo .hs-ringnum {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px; color: var(--s-ink); letter-spacing: -.02em;
}
#suite-demo .hs-ringmeta .hs-v { font-size: 13px; font-weight: 600; }
#suite-demo .hs-ringmeta .hs-l { font-size: 11px; color: var(--s-ink-mute); margin-top: 2px; }
#suite-demo .hs-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
#suite-demo .hs-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
#suite-demo .hs-pill.hs-strong { background: var(--s-good-soft); color: var(--s-good); }
#suite-demo .hs-pill.hs-average { background: var(--s-warn-soft); color: var(--s-warn); }
#suite-demo .hs-pill.hs-weak { background: var(--s-bad-soft); color: var(--s-bad); }

/* Tijdlijn */
#suite-demo .hs-tl { display: flex; flex-direction: column; }
#suite-demo .hs-tli { display: flex; gap: 12px; padding: 10px 8px; border-radius: 10px; align-items: flex-start; }
#suite-demo .hs-tli:hover { background: var(--s-bg); }
#suite-demo .hs-tld {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--s-purple);
}
#suite-demo .hs-tld.hs-good { background: var(--s-good); }
#suite-demo .hs-tld.hs-warn { background: var(--s-warn); }
#suite-demo .hs-tlt { font-size: 13px; color: var(--s-ink); }
#suite-demo .hs-tlm { font-size: 11px; color: var(--s-ink-mute); margin-top: 2px; }

/* Optimizer SEO · tweekolomsvoorstellen (actions.tsx) */
#suite-demo .hs-pagehead2 { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
#suite-demo .hs-pagehead2 h3 {
  font-size: 32px; font-weight: 700; color: var(--s-ink); margin: 0 0 6px;
  line-height: 1.15; letter-spacing: -.025em;
}
#suite-demo .hs-pagehead2 h3 em { font-style: normal; color: var(--s-purple); }
#suite-demo .hs-pagehead2 p { font-size: 13px; color: var(--s-ink-mute); margin: 8px 0 0; }
#suite-demo .hs-pagehead2 p strong { color: var(--s-ink); font-weight: 700; }
#suite-demo .hs-ph2-acties { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
#suite-demo .hs-btnask {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9999px;
  background: var(--s-purple-soft); color: var(--s-purple); border: 1px solid transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s;
}
#suite-demo .hs-btnask svg { width: 12px; height: 12px; }
#suite-demo .hs-btnask:hover { background: var(--s-purple); color: #fff; }
#suite-demo .hs-btn2 {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9999px;
  background: #fff; color: var(--s-ink); border: 1px solid var(--s-line);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
#suite-demo .hs-btn2 svg { width: 12px; height: 12px; }
#suite-demo .hs-histbanner {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--s-warn-soft);
  border: 1px solid color-mix(in srgb, var(--s-warn) 30%, var(--s-line)); border-radius: 10px;
  font-size: 12.5px; font-weight: 500; color: var(--s-warn);
}
#suite-demo .hs-histbanner svg { width: 13px; height: 13px; flex-shrink: 0; }

#suite-demo .hs-actshell { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: flex-start; }
#suite-demo .hs-plist {
  background: #fff; border: 1px solid var(--s-line); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden;
}
#suite-demo .hs-plist-h {
  padding: 16px 16px 10px; display: flex; justify-content: space-between; font-size: 12px;
  color: var(--s-ink-mute); border-bottom: 1px solid var(--s-line-soft);
}
#suite-demo .hs-plist-h strong { color: var(--s-ink); font-weight: 700; }
#suite-demo .hs-ltabs {
  display: flex; align-items: center; gap: 4px; padding: 10px 12px;
  border-bottom: 1px solid var(--s-line-soft);
}
#suite-demo .hs-ltabs button {
  background: transparent; border: 0; padding: 5px 10px; border-radius: 9999px; font: inherit;
  font-size: 11.5px; line-height: 1; font-weight: 600; color: var(--s-ink-mute); cursor: pointer;
}
#suite-demo .hs-ltabs button:hover { background: var(--s-purple-soft); color: var(--s-ink); }
#suite-demo .hs-ltabs button.hs-on { background: var(--s-purple); color: #fff; }
#suite-demo .hs-tier {
  display: flex; align-items: center; gap: 7px; padding: 10px 16px 5px; font-size: 10px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--s-ink-mute);
}
#suite-demo .hs-tier i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
#suite-demo .hs-prow {
  padding: 14px 16px; border-bottom: 1px solid var(--s-line-soft); cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; transition: background .12s; text-align: left;
  background: none; border-left: 0; border-right: 0; border-top: 0; font: inherit; width: 100%;
}
#suite-demo .hs-prow:hover { background: var(--s-bg); }
#suite-demo .hs-prow.hs-on { background: var(--s-purple-soft); }
#suite-demo .hs-prow-pos { font-size: 11px; color: var(--s-ink-mute); font-weight: 500; }
#suite-demo .hs-prow-url {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--s-ink);
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#suite-demo .hs-prow-m { font-size: 11px; color: var(--s-ink-mute); display: flex; gap: 4px; flex-wrap: wrap; }
#suite-demo .hs-prow-m .hs-imp { color: var(--s-good); font-weight: 600; }
#suite-demo .hs-prow-b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
#suite-demo .hs-bstrat {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
}
#suite-demo .hs-bstrat.hs-exploit { background: var(--s-good-soft); color: var(--s-good); }
#suite-demo .hs-bstrat.hs-explore { background: var(--s-purple-soft); color: var(--s-purple-deep); }
#suite-demo .hs-bdec { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 10.5px; font-weight: 600; }
#suite-demo .hs-bdec.hs-appr { background: var(--s-good-soft); color: var(--s-good); }
#suite-demo .hs-bdec.hs-rej { background: var(--s-bad-soft); color: var(--s-bad); }

#suite-demo .hs-pdetail {
  background: #fff; border: 1px solid var(--s-line); border-radius: 18px; padding: 28px 32px;
  display: flex; flex-direction: column; gap: 22px;
}
#suite-demo .hs-crumb {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--s-purple);
  font-weight: 500; margin-bottom: 6px; word-break: break-all;
}
#suite-demo .hs-pdetail h3 { font-size: 24px; font-weight: 700; margin: 0 0 10px; letter-spacing: -.025em; line-height: 1.2; color: var(--s-ink); }
#suite-demo .hs-metarow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--s-ink-soft); }
#suite-demo .hs-metarow strong { color: var(--s-ink); font-weight: 600; }
#suite-demo .hs-metarow .hs-sep { color: var(--s-ink-faint); }
#suite-demo .hs-dacties {
  display: flex; gap: 8px; align-items: center; padding: 12px 14px; background: var(--s-bg); border-radius: 10px;
}
#suite-demo .hs-dacties .hs-spacer { flex: 1; }
#suite-demo .hs-dacties .hs-dec { font-size: 12.5px; color: var(--s-ink-mute); }
#suite-demo .hs-dacties .hs-dec b { color: var(--s-good); }

#suite-demo .hs-impact {
  display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--s-line);
  border-radius: 14px; overflow: hidden; background: var(--s-bg);
}
#suite-demo .hs-impact > div { padding: 16px 18px; border-right: 1px solid var(--s-line); }
#suite-demo .hs-impact > div:last-child { border-right: 0; }
#suite-demo .hs-impact .hs-l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--s-ink-mute); }
#suite-demo .hs-impact .hs-v {
  font-size: 26px; font-weight: 700; color: var(--s-ink); margin-top: 6px; line-height: 1;
  letter-spacing: -.025em; display: flex; align-items: baseline; gap: 6px;
}
#suite-demo .hs-impact .hs-v.hs-p { color: var(--s-purple); }
#suite-demo .hs-impact .hs-v.hs-g { color: var(--s-good); }
#suite-demo .hs-impact .hs-v .hs-from { color: var(--s-ink-faint); font-weight: 400; }
#suite-demo .hs-impact .hs-v .hs-ar { font-size: 16px; color: var(--s-ink-faint); }
#suite-demo .hs-impact .hs-s { font-size: 11px; color: var(--s-ink-mute); margin-top: 6px; }

#suite-demo .hs-reason { border: 1px solid var(--s-line); border-radius: 14px; padding: 18px 22px; background: var(--s-purple-tint); }
#suite-demo .hs-reason-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 12px; }
#suite-demo .hs-reason-l { display: flex; gap: 12px; align-items: center; }
#suite-demo .hs-reason-ic {
  width: 32px; height: 32px; border-radius: 9px; background: var(--s-purple); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#suite-demo .hs-reason-ic svg { width: 16px; height: 16px; }
#suite-demo .hs-reason-t { font-size: 14px; font-weight: 600; color: var(--s-ink); }
#suite-demo .hs-reason-s { font-size: 12px; color: var(--s-ink-mute); margin-top: 2px; }
#suite-demo .hs-reason-b { font-size: 13px; line-height: 1.6; color: var(--s-ink); }
#suite-demo .hs-collapse {
  display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--s-purple); cursor: pointer; flex-shrink: 0;
}
#suite-demo .hs-collapse svg { width: 13px; height: 13px; }

#suite-demo .hs-diff { border: 1px solid var(--s-line); border-radius: 14px; overflow: hidden; background: #fff; }
#suite-demo .hs-diff-h {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 16px;
  background: var(--s-bg); border-bottom: 1px solid var(--s-line); gap: 12px;
}
#suite-demo .hs-diff-f { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--s-ink); }
#suite-demo .hs-diff-c { font-size: 11px; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--s-ink-soft); }
#suite-demo .hs-diff-c b { color: var(--s-purple); }
#suite-demo .hs-diff-b { display: grid; grid-template-columns: 1fr 1fr; }
#suite-demo .hs-diff-s { padding: 16px 18px; font-size: 13.5px; line-height: 1.55; position: relative; }
#suite-demo .hs-diff-s.hs-before { border-right: 1px solid var(--s-line); }
#suite-demo .hs-diff-s::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
#suite-demo .hs-diff-s.hs-before::before { background: var(--s-ink-faint); }
#suite-demo .hs-diff-s.hs-after::before { background: var(--s-purple); }
#suite-demo .hs-diff-s .hs-b {
  display: inline-flex; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; margin-bottom: 10px; padding: 2px 8px; border-radius: 9999px;
}
#suite-demo .hs-diff-s.hs-before .hs-b { background: var(--s-bg); color: var(--s-ink-mute); }
#suite-demo .hs-diff-s.hs-after .hs-b { background: var(--s-purple-soft); color: var(--s-purple); }
#suite-demo .hs-diff-s.hs-before .hs-t {
  color: var(--s-ink-mute); text-decoration: line-through;
  text-decoration-color: var(--s-ink-faint); text-decoration-thickness: 1px;
}
#suite-demo .hs-diff-s.hs-after .hs-t { color: var(--s-ink); font-weight: 500; }

/* Vraag de agent · lege staat */
#suite-demo .hs-agempty { padding: 40px 0 8px; max-width: 760px; margin: 0 auto; text-align: center; }
#suite-demo .hs-agempty h3 { font-size: 30px; font-weight: 700; letter-spacing: -.025em; margin: 0; color: var(--s-ink); }
#suite-demo .hs-agempty h3 em { font-style: normal; color: var(--s-purple); }
#suite-demo .hs-agempty .hs-lead { font-size: 14px; color: var(--s-ink-mute); margin: 12px 0 0; }
#suite-demo .hs-capbar { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
#suite-demo .hs-cap {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--s-ink-mute);
  border: 1px solid var(--s-line); background: #fff; border-radius: 9999px; padding: 4px 11px;
}
#suite-demo .hs-cap i { width: 6px; height: 6px; border-radius: 50%; background: var(--s-good); }
#suite-demo .hs-sug { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 26px; text-align: left; }
#suite-demo .hs-sugc {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px; background: #fff;
  border: 1px solid var(--s-line); border-radius: 12px; cursor: pointer; font: inherit;
  color: var(--s-ink); text-align: left;
}
#suite-demo .hs-sugc:hover { border-color: color-mix(in srgb, var(--s-purple) 40%, var(--s-line)); }
#suite-demo .hs-sugc .hs-ic {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; color: var(--s-purple);
  background: color-mix(in srgb, var(--s-purple) 10%, #fff);
  display: inline-flex; align-items: center; justify-content: center;
}
#suite-demo .hs-sugc .hs-ic svg { width: 13px; height: 13px; }
#suite-demo .hs-sugc .hs-t { font-size: 13px; line-height: 1.4; }

/* Mislukte acties */
#suite-demo .hs-manual { display: flex; flex-direction: column; gap: 12px; }
#suite-demo .hs-mcard { background: #fff; border: 1px solid var(--s-line); border-radius: 14px; padding: 16px 18px; }
#suite-demo .hs-mhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
#suite-demo .hs-mpage {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--s-ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#suite-demo .hs-minstr { font-size: 13.5px; line-height: 1.55; color: var(--s-ink); }
#suite-demo .hs-mmeta { font-size: 11px; color: var(--s-ink-mute); margin-top: 8px; }
#suite-demo .hs-mact { display: flex; gap: 8px; margin-top: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   Recommender · aanvullingen op .hs-m-rec
   Uit nl-hyperr-nova-recommender/frontend/app/(app)/performance/page.tsx:
   het hero-raster is lg:grid-cols-4 met de hero op 1 kolom en drie kaarten
   in een geneste sm:grid-cols-3, daaronder vier launchers en het A/B-blok.
   ══════════════════════════════════════════════════════════════════════ */

/* De echte pagina zet `grid-cols-1 lg:grid-cols-4` om de hero heen, met de
   drie kaarten in een geneste `sm:grid-cols-3`. Tailwind meet het venster,
   en daar zit de 300px-zijbalk van SuiteShell naast: lg (1024) betekent dus
   een contentkolom van 724, sm (640) een van 340. Die twee getallen staan
   hieronder, zodat de demo op dezelfde breedte omklapt als de app. */
#suite-demo .hs-m-rec .hs-kpis.hs-k4 { grid-template-columns: minmax(0, 1fr); }
@container (min-width: 340px) {
  #suite-demo .hs-m-rec .hs-kpis.hs-k4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #suite-demo .hs-m-rec .hs-kpis.hs-k4 .hs-kpi.hs-hero { grid-column: 1 / -1; }
}
@container (min-width: 724px) {
  #suite-demo .hs-m-rec .hs-kpis.hs-k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #suite-demo .hs-m-rec .hs-kpis.hs-k4 .hs-kpi.hs-hero { grid-column: auto; }
}

/* Launchers */
#suite-demo .hs-launch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@container (min-width: 340px) { #suite-demo .hs-launch { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 724px) { #suite-demo .hs-launch { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#suite-demo .hs-lc {
  display: flex; flex-direction: column; text-align: left; border-radius: 16px;
  border: 1px solid var(--hp-line); background: var(--hp-surface); padding: 20px;
  box-shadow: 0 1px 2px rgba(14, 8, 36, .04); cursor: pointer; font: inherit;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
#suite-demo .hs-lc:hover {
  transform: translateY(-2px); border-color: rgba(75, 34, 244, .3);
  box-shadow: 0 1px 3px rgba(14, 8, 36, .06), 0 8px 24px rgba(75, 40, 237, .1);
}
#suite-demo .hs-lc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#suite-demo .hs-lc-ic {
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; background: rgba(75, 34, 244, .1); color: #4B22F4;
}
#suite-demo .hs-lc-ic svg { width: 18px; height: 18px; }
#suite-demo .hs-lc-go { color: var(--hp-text-3); display: inline-flex; }
#suite-demo .hs-lc-go svg { width: 16px; height: 16px; }
#suite-demo .hs-lc:hover .hs-lc-go { color: #4B22F4; }
#suite-demo .hs-lc b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
#suite-demo .hs-lc p { font-size: 12px; color: var(--hp-text-2); margin: 2px 0 0; }
#suite-demo .hs-lc-det {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #4B22F4;
}
#suite-demo .hs-lc-det svg { width: 13px; height: 13px; }

/* A/B-test */
#suite-demo .hs-ab { display: flex; flex-direction: column; }
#suite-demo .hs-ab-h { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
#suite-demo .hs-ab-l { display: flex; align-items: flex-start; gap: 12px; }
#suite-demo .hs-ab-ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(75, 34, 244, .1); color: #4B22F4;
}
#suite-demo .hs-ab-ic svg { width: 18px; height: 18px; }
#suite-demo .hs-ab h4 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
#suite-demo .hs-ab-sub { font-size: 12px; color: var(--hp-text-2); margin: 2px 0 0; max-width: 620px; line-height: 1.5; }
#suite-demo .hs-ab-meta { font-size: 11px; color: var(--hp-text-3); margin: 3px 0 0; font-weight: 500; }
#suite-demo .hs-ab-r { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
#suite-demo .hs-live {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px; padding: 4px 12px;
  border: 1px solid rgba(57, 216, 153, .35); background: rgba(57, 216, 153, .12);
  color: #0F6E56; font-size: 11px; font-weight: 600;
}
#suite-demo .hs-live i { width: 6px; height: 6px; border-radius: 50%; background: #39D899; }
#suite-demo .hs-pilltog { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9999px; background: var(--hp-surface-2); }
#suite-demo .hs-pilltog button {
  border: 0; background: transparent; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--hp-text-2); padding: 5px 12px; border-radius: 9999px; cursor: pointer;
}
#suite-demo .hs-pilltog button.hs-on { background: var(--hp-surface); color: var(--hp-text-1); box-shadow: 0 1px 2px rgba(14, 8, 36, .08); }
#suite-demo .hs-abstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
@container (min-width: 724px) { #suite-demo .hs-abstats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#suite-demo .hs-abs {
  border-radius: 12px; border: 1px solid var(--hp-line); padding: 12px 16px;
  background: color-mix(in srgb, var(--hp-surface-2) 40%, transparent);
}
#suite-demo .hs-abs .hs-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hp-text-3); }
#suite-demo .hs-abs .hs-v { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; }
#suite-demo .hs-abs .hs-v.hs-p { color: #4B22F4; }
#suite-demo .hs-abs .hs-badge {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 9999px; padding: 3px 10px;
  margin-top: 4px; font-size: 18px; font-weight: 700; letter-spacing: -.02em;
}
#suite-demo .hs-abs .hs-badge.hs-pos { background: rgba(57, 216, 153, .14); color: #0F6E56; }
#suite-demo .hs-abs .hs-badge.hs-neu { background: rgba(75, 34, 244, .1); color: #4B22F4; }
#suite-demo .hs-abs .hs-s { font-size: 11.5px; color: var(--hp-text-2); margin-top: 5px; line-height: 1.45; }
#suite-demo .hs-overline { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hp-text-3); margin-bottom: 12px; }
#suite-demo .hs-abbars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@container (min-width: 340px) { #suite-demo .hs-abbars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#suite-demo .hs-abbar {
  border-radius: 12px; border: 1px solid var(--hp-line); padding: 12px 16px;
  background: color-mix(in srgb, var(--hp-surface-2) 40%, transparent);
}
#suite-demo .hs-abbar-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
#suite-demo .hs-abbar-h b { font-size: 12px; font-weight: 600; }
#suite-demo .hs-upl {
  display: inline-flex; align-items: center; border-radius: 9999px; padding: 2px 9px;
  background: rgba(75, 34, 244, .1); color: #4B22F4; font-size: 11px; font-weight: 600;
}
#suite-demo .hs-abbar-r { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#suite-demo .hs-abbar-r > span:first-child { width: 104px; flex-shrink: 0; font-size: 12px; color: var(--hp-text-2); }
#suite-demo .hs-abbar-t { height: 8px; flex: 1; border-radius: 9999px; overflow: hidden; background: var(--hp-surface-2); }
#suite-demo .hs-abbar-t i { display: block; height: 100%; border-radius: 9999px; background: var(--hp-text-3); }
#suite-demo .hs-abbar-r.hs-acc .hs-abbar-t i { background: #4B22F4; }
#suite-demo .hs-abbar-r > span:last-child { width: 64px; flex-shrink: 0; text-align: right; font-size: 11.5px; font-weight: 600; color: var(--hp-text-2); }
#suite-demo .hs-abbar-r.hs-acc > span:last-child { color: #4B22F4; }

/* ══════════════════════════════════════════════════════════════════════
   Performance · scope .hs-m-perf
   Uit hyperr-performance-engine/frontend: MetricTegels.tsx (zes klikbare
   tegels, de actieve vult paars), de grafiekkaart met twee PillToggleGroups
   en de pacing-kaart. Drie subpagina's staan in de app bewust op EmptyState.
   ══════════════════════════════════════════════════════════════════════ */

#suite-demo .hs-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container (min-width: 340px) { #suite-demo .hs-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 724px) { #suite-demo .hs-tegels { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
#suite-demo .hs-tegel {
  display: flex; flex-direction: column; gap: 4px; border-radius: 12px; padding: 12px;
  text-align: left; border: 1px solid var(--hp-line); background: var(--hp-surface);
  cursor: pointer; font: inherit; color: inherit; transition: all .2s;
}
#suite-demo .hs-tegel:hover { border-color: rgba(75, 34, 244, .4); box-shadow: 0 1px 2px rgba(14, 8, 36, .06); }
#suite-demo .hs-tegel.hs-on { border-color: transparent; background: #4B22F4; color: #fff; box-shadow: 0 4px 12px rgba(75, 34, 244, .25); }
#suite-demo .hs-tegel .hs-l { font-size: 12px; color: var(--hp-text-2); }
#suite-demo .hs-tegel.hs-on .hs-l { color: rgba(255, 255, 255, .75); }
#suite-demo .hs-tegel .hs-r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
#suite-demo .hs-tegel .hs-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
#suite-demo .hs-tegel .hs-d { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
#suite-demo .hs-tegel .hs-d.hs-up { color: #0F6E56; }
#suite-demo .hs-tegel .hs-d.hs-down { color: #D63A6E; }
#suite-demo .hs-tegel.hs-on .hs-d { color: rgba(255, 255, 255, .85); }
#suite-demo .hs-tegel .hs-o { font-size: 11px; color: var(--hp-text-3); }
#suite-demo .hs-tegel.hs-on .hs-o { color: rgba(255, 255, 255, .6); }

#suite-demo .hs-grafkop { display: flex; flex-direction: column; gap: 12px; }
@container (min-width: 640px) { #suite-demo .hs-grafkop { flex-direction: row; align-items: flex-start; justify-content: space-between; } }
#suite-demo .hs-grafkop .hs-l { font-size: 13px; color: var(--hp-text-2); }
#suite-demo .hs-grafkop .hs-v { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.025em; line-height: 1.1; }
#suite-demo .hs-grafkop .hs-d { font-size: 12px; color: var(--hp-text-2); margin-top: 2px; }
#suite-demo .hs-togs { display: flex; flex-wrap: wrap; gap: 8px; }
#suite-demo .hs-voet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: 12px; color: var(--hp-text-2);
}
#suite-demo .hs-badge2 {
  display: inline-flex; align-items: center; border-radius: 9999px; padding: 2px 10px;
  font-size: 11px; font-weight: 600; background: rgba(75, 34, 244, .1); color: #4B22F4;
}
#suite-demo .hs-badge2.hs-grijs { background: var(--hp-surface-2); color: var(--hp-text-2); }
#suite-demo .hs-badge2.hs-oranje { background: rgba(245, 158, 11, .14); color: #B45309; }
#suite-demo .hs-note {
  border-radius: 12px; background: #F0EDFF; padding: 12px;
  font-size: 12px; color: var(--hp-text-2); line-height: 1.55;
}
#suite-demo .hs-leeg {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 64px 24px; text-align: center; border-radius: 16px;
  border: 1px dashed var(--hp-line); background: var(--hp-surface);
}
#suite-demo .hs-leeg-ic {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--hp-surface-2); color: var(--hp-text-3); margin-bottom: 4px;
}
#suite-demo .hs-leeg-ic svg { width: 22px; height: 22px; }
#suite-demo .hs-leeg b { font-size: 15px; font-weight: 600; }
#suite-demo .hs-leeg p { font-size: 13px; color: var(--hp-text-2); margin: 0; max-width: 420px; line-height: 1.55; }
#suite-demo .hs-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#suite-demo .hs-select, #suite-demo .hs-input {
  border: 1px solid var(--hp-line); background: var(--hp-surface); border-radius: 9999px;
  padding: 7px 14px; font: inherit; font-size: 12.5px; color: var(--hp-text-1);
  display: inline-flex; align-items: center; gap: 8px;
}
#suite-demo .hs-select svg { width: 13px; height: 13px; color: var(--hp-text-3); }
#suite-demo .hs-input { color: var(--hp-text-3); }

/* ══════════════════════════════════════════════════════════════════════
   Daily Performance · grafiek in de hero + Dagverloop
   Uit hyperr-ai-suite/app/(platform)/suite/dashboard/daily.css.
   ══════════════════════════════════════════════════════════════════════ */

#suite-demo .hs-cum { display: block; width: 100%; height: auto; margin-top: 14px; }
#suite-demo .hs-cum-t { font-size: 8px; font-weight: 700; letter-spacing: .1em; fill: rgba(255, 255, 255, .55); }
#suite-demo .hs-cum-x { font-size: 8.5px; fill: rgba(255, 255, 255, .45); }
#suite-demo .hs-herofoot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14);
}
#suite-demo .hs-herofoot .hs-l { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
#suite-demo .hs-herofoot .hs-v { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }
#suite-demo .hs-herofoot .hs-r { font-size: 12px; font-weight: 600; color: #5EFFB8; text-align: right; }

#suite-demo .hs-sm { padding: 14px 0; border-bottom: 1px solid var(--hp-line); }
#suite-demo .hs-sm:last-child { border-bottom: 0; padding-bottom: 0; }
#suite-demo .hs-sm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#suite-demo .hs-sm-lab {
  display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--hp-text-2);
}
#suite-demo .hs-sm-lab i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#suite-demo .hs-sm-last { font-size: 15px; font-weight: 700; letter-spacing: -.02em; text-align: right; }
#suite-demo .hs-sm-sub { display: block; font-size: 10.5px; font-weight: 500; color: var(--hp-text-3); margin-top: 1px; }
#suite-demo .hs-sm-plot { margin-top: 6px; }
#suite-demo .hs-sm-plot svg { display: block; width: 100%; height: auto; }
#suite-demo .hs-sm-y { font-size: 8.5px; fill: var(--hp-text-3); }

/* SegmentedNav uit @hyperr/ui · de Recommender zet hem in de PageHeader. */
#suite-demo .hs-seg {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 9999px;
  background: var(--hp-surface-2); border: 1px solid var(--hp-line);
}
#suite-demo .hs-seg button {
  border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--hp-text-2); padding: 5px 14px; border-radius: 9999px; cursor: pointer;
}
#suite-demo .hs-seg button.hs-on { background: #4B22F4; color: #fff; }
#suite-demo .hs-ph-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Twee panelen · Product Insights / Customer View */
#suite-demo .hs-tp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: flex-start; }
@container (min-width: 880px) { #suite-demo .hs-tp { grid-template-columns: 280px 1fr; } }
#suite-demo .hs-tp-l {
  background: var(--hp-surface); border: 1px solid var(--hp-line); border-radius: 16px; overflow: hidden;
}
#suite-demo .hs-tp-zoek { padding: 12px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--hp-line); }
#suite-demo .hs-tp-zoek > span { width: 100%; }
#suite-demo .hs-tp-rij {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left;
  padding: 11px 14px; border: 0; border-bottom: 1px solid var(--hp-line); background: none;
  font: inherit; cursor: pointer; color: inherit;
}
#suite-demo .hs-tp-rij:hover { background: var(--hp-surface-2); }
#suite-demo .hs-tp-rij.hs-on { background: #F0EDFF; }
#suite-demo .hs-tp-n { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
#suite-demo .hs-tp-m { font-size: 11.5px; color: var(--hp-text-2); }
#suite-demo .hs-tp-r { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
#suite-demo .hs-tabstrip {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; border-bottom: 1px solid var(--hp-line);
}
#suite-demo .hs-tabstrip button {
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--hp-text-2); padding: 9px 14px; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
#suite-demo .hs-tabstrip button.hs-on { color: #4B22F4; border-bottom-color: #4B22F4; }
#suite-demo .hs-dekking { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (min-width: 880px) { #suite-demo .hs-dekking { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
#suite-demo .hs-dekking > div {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  border: 1px solid var(--hp-line); background: var(--hp-surface); border-radius: 12px; padding: 12px 16px;
}
#suite-demo .hs-dekking .hs-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--hp-text-3); }
#suite-demo .hs-dekking .hs-v { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
#suite-demo .hs-dekking .hs-st { font-size: 11px; font-weight: 600; border-radius: 9999px; padding: 2px 9px; }
#suite-demo .hs-dekking .hs-st.hs-ok { background: rgba(57, 216, 153, .14); color: #0F6E56; }
#suite-demo .hs-dekking .hs-st.hs-warn { background: rgba(245, 158, 11, .14); color: #B45309; }
#suite-demo .hs-dekking .hs-st.hs-bad { background: rgba(255, 0, 122, .1); color: #D63A6E; }

/* Responsief gedrag van de SEO-portal, maar gemeten op de canvas in plaats
   van het venster. In de echte portal breken de rasters op 1100, 760 en 560
   viewport-pixels, en daar zit altijd een zijbalk van 220px naast. De
   contentkolom breekt dus feitelijk op 880, 540 en 340. Meten we hier op de
   canvas, dan klapt de demo op precies dezelfde contentbreedte om als de
   echte pagina. */
@container (max-width: 880px) {
  #suite-demo .hs-greetrow { grid-template-columns: minmax(0, 1fr); }
  #suite-demo .hs-qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #suite-demo .hs-cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #suite-demo .hs-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #suite-demo .hs-seokpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #suite-demo .hs-actshell { grid-template-columns: 280px minmax(0, 1fr); }
}
@container (max-width: 540px) {
  #suite-demo .hs-seokpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #suite-demo .hs-topics { grid-template-columns: minmax(0, 1fr); }
  #suite-demo .hs-impact { grid-template-columns: minmax(0, 1fr); }
  #suite-demo .hs-impact > div { border-right: 0; border-bottom: 1px solid var(--s-line); }
  #suite-demo .hs-impact > div:last-child { border-bottom: 0; }
  #suite-demo .hs-actshell { grid-template-columns: minmax(0, 1fr); }
  #suite-demo .hs-diff-b { grid-template-columns: minmax(0, 1fr); }
  #suite-demo .hs-sug { grid-template-columns: minmax(0, 1fr); }
  #suite-demo .hs-pagehead2 { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@container (max-width: 340px) {
  #suite-demo .hs-qa-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Titel en subtitel staan in spans zodat ze in één knop/regel passen; ze
   horen wel onder elkaar. */
#suite-demo .hs-reason-t,
#suite-demo .hs-reason-s,
#suite-demo .hs-ii-t,
#suite-demo .hs-ii-m,
#suite-demo .hs-prow-pos,
#suite-demo .hs-prow-url,
#suite-demo .hs-tp-n,
#suite-demo .hs-tp-m { display: block; }
#suite-demo .hs-prow-m { display: flex; }
#suite-demo .hs-reason-l > span:last-child { min-width: 0; }
#suite-demo .hs-ii > span:last-child { min-width: 0; }

/* Zonder maat rekt een inline SVG zich uit tot de hoogte van zijn doos. */
#suite-demo .hs-input svg,
#suite-demo .hs-select svg,
#suite-demo .hs-ghostbtn svg,
#suite-demo .hs-btn2 svg { width: 13px; height: 13px; flex-shrink: 0; }
#suite-demo .hs-tp-zoek .hs-input,
#suite-demo .hs-tp-zoek .hs-select { justify-content: flex-start; overflow: hidden; white-space: nowrap; }
#suite-demo .hs-tp-zoek .hs-select { justify-content: space-between; }

/* Een lang label mag de deltapil niet overlappen: de labelkolom krimpt mee,
   de pil niet. */
#suite-demo .hs-kpi-headcol { min-width: 0; }
#suite-demo .hs-kpi-headcol .hs-lab { overflow-wrap: anywhere; }
#suite-demo .hs-kpi-top > .hs-delta { flex-shrink: 0; }