/* StreamPilot — layout.css: app chrome, navigatie, desktop enhancements */
/* =======================================================================
   3) LAYOUT (mobile-first)
   ======================================================================= */
.app{
  min-height:100vh;
  display:flex;
  flex-direction:column; /* mobile: topbar + topnav + content */
}

.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

/* Content container — full width, geen max-width */
.content{
  width:100%;
  padding: 20px var(--pad-x) 32px;
  scroll-margin-top: calc(var(--topbar-h) + var(--topnav-h) + var(--safe-top) + 12px);
  padding-bottom: calc(32px + var(--safe-bottom));
}

/* grids */
.grid{ display:grid; gap: var(--card-gap); align-items: stretch; }
.grid--align-start{ align-items: start; }
.grid--3{ grid-template-columns: 1fr; } /* mobile default */
.grid--4{ grid-template-columns: 1fr; } /* mobile default */

/* =======================================================================
   4) TOPBAR (always visible)
   ======================================================================= */
.topbar{
  position: sticky;
  top: var(--safe-top);
  z-index: var(--z-topbar);

  height: var(--topbar-h);
  padding: 0 var(--pad-x);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  border-bottom: 1px solid var(--border);
  background: rgba(10,10,12,.80);
  backdrop-filter: blur(14px);
}

/* Left: logo (mobile) + title block */
.topbar__left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}

/* Title block: page title + breadcrumb nav */
.topbar__title-block{
  display:flex;
  flex-direction:column;
  gap: 1px;
  min-width:0;
}
.topbar__page-title{
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.topbar__breadcrumb{
  display:flex;
  align-items:center;
  gap: 5px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .07em;
}
.topbar__bc-link{
  color: rgba(218,218,219,.45);
  text-decoration:none;
  transition: color .12s;
}
.topbar__bc-link:hover{ color: var(--muted); }
.topbar__bc-sep{ color: rgba(218,218,219,.3); }
.topbar__bc-current{ color: rgba(218,218,219,.55); }

.topbar__right{
  display:flex;
  align-items:center;
  gap: 12px;
  flex: 0 0 auto;
}

/* Language switch (topbar) */
.lang{ display:flex; align-items:center; gap: 6px; }
.lang__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: .06em;
  min-width: 42px;
  transition: border-color .12s ease, background .12s ease;
}
.lang__btn:hover{ border-color: var(--border); color: var(--text); }
.lang__btn.is-active{
  background: rgba(253,100,30,.12);
  border-color: rgba(253,100,30,.35);
  color: var(--text);
}

/* User */
.user{
  display:flex;
  align-items:center;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
}
.user__avatar-wrap{
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.user__avatar{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  display: block;
}
.user__avatar--placeholder{
  width: 36px;
  height: 36px;
  display:grid;
  place-items:center;
  background: rgba(253,100,30,.18);
  border: 1px solid rgba(253,100,30,.35);
  border-radius: 999px;
  font-weight: 800;
  font-size: var(--text-base);
  letter-spacing: .03em;
}
/* Online status dot: top-right corner of avatar */
.user__status-dot{
  position: absolute;
  top: -1px;
  right: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--bg);
}
/* Notification badge: bottom-right corner of avatar (pending users etc.) */
.user__notify-badge {
  position: absolute;
  bottom: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; border: 2px solid var(--bg);
  background: rgba(253,100,30,.9); color: #fff;
  font-size: 0.5625rem; font-weight: 700; line-height: 12px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}

/* user__meta is removed from topbar, kept for dropdown only */
.user__meta{ display:none; }

.topbar__logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.topbar__logo img{ display:block; width: 28px; height: 28px; }

/* Avatar button */
.user__avatarBtn{
  display:flex;
  align-items:center;
  background: transparent;
  border: 0;
  padding: 2px;
  color: inherit;
  cursor: pointer;
  border-radius: 999px;
  transition: box-shadow .15s;
}
.user__avatarBtn:hover{
  box-shadow: 0 0 0 2px rgba(253,100,30,.40);
}

/* Desktop-inline actions hidden on mobile */
.user__actions--inline{ display:none; }

/* Topbar small form controls (desktop inline) */
.topbar__form{ margin:0; display:flex; align-items:center; gap:6px; }
.topbar__label{ font-size: var(--text-xs); opacity:.85; font-weight:800; color: var(--muted); }
.topbar__select{
  font-size: var(--text-xs);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-weight: 800;
}
.topbar__logout{ opacity:.85; font-size: var(--text-xs); text-decoration:none; }
.topbar__logout:hover{ opacity: 1; }

/* Mobile dropdown panel */
.topbar__right{ position: relative;}
.topbarMenu{
  display:none;
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(92vw, 360px);
  padding: 10px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.topbarMenu.is-open{ display:block; }
.topbarMenu__section{ padding: 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
.topbarMenu__section + .topbarMenu__section{ margin-top: 10px; }
.topbarMenu__title{ font-weight: 800; }
.topbarMenu__sub{ color: var(--muted); font-size: var(--text-xs); margin-top: 4px; }
.topbarMenu__row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.topbarMenu__label{ font-size: var(--text-xs); color: var(--muted); font-weight: 800; }
.topbarMenu__ctrl{ display:flex; gap: 6px; }
.topbarMenu__form{ margin:0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.topbarMenu__select{
  width: 180px;
  max-width: 60vw;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.25);
  color: var(--text);
  font-weight: 700;
  font-size: var(--text-xs);
}


/* Topbar: toon alleen actions op mobiel, zonder user-meta volledig te tonen */
.user__actions{ display:flex; }
.user__actions form label,
.user__actions a{ font-size: var(--text-xs); }

@media (min-width: 901px){
  .topbar__logo{ display:none; }
}


/* =======================================================================
   5) TOPNAV (mobile navigation under topbar) — 2 rows (modules + subnav)
   Markup: .topnav__bar + .topnav__scroll, optioneel .topnav__bar--sub
   ======================================================================= */
.topnav{
  position: sticky;
  top: calc(var(--topbar-h) + var(--safe-top));
  z-index: var(--z-topnav);

  height: auto;
  display: flex;
  flex-direction: column;

  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.20);
  backdrop-filter: blur(10px);
}

/* 1 balk */
.topnav__bar{ width: 100%; }

/* scheidingslijn tussen module-rij en sub-rij */
.topnav__bar--sub{
  border-top: 1px solid rgba(255,255,255,.06);
}

/* de horizontale scroller binnen elke balk */
.topnav__scroll{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--pad-x);

  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.topnav__scroll::-webkit-scrollbar{ display: none; }

/* subrij: iets compacter */
.topnav__bar--sub .topnav__scroll{
  padding-top: 8px;
  padding-bottom: 10px;
}

/* chips */
.topnav__item,
.topnav__subitem{
  display:flex;
  align-items:center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 999px;

  border: 1px solid transparent;
  background: rgba(255,255,255,.05);
  white-space: nowrap;

  transition: border-color .12s ease, background .12s ease, transform .06s ease, opacity .12s ease;
}

/* hover: alleen border, transform wordt via media query gedaan */
.topnav__item:hover,
.topnav__subitem:hover{
  border-color: var(--border);
}

.topnav__item:active,
.topnav__subitem:active{
  transform: translateY(0);
}

.topnav__item.is-active,
.topnav__subitem.is-active{
  background: rgba(253,100,30,.12);
  border-color: rgba(253,100,30,.35);
}

.topnav__label{
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

/* soon/disabled */
.topnav__item.is-soon,
.topnav__subitem.is-soon{
  opacity: .75;
  cursor: default;
}
.topnav__item.is-soon:hover,
.topnav__subitem.is-soon:hover{
  border-color: transparent;
}

/* locked (grayed but clickable) */
.topnav__item.is-locked,
.topnav__subitem.is-locked{
  opacity: .50;
  filter: saturate(.75);
}
.topnav__item.is-locked:hover,
.topnav__subitem.is-locked:hover{
  border-color: rgba(255,255,255,.10);
}

/* Disabled semantics: voorkom klikgedrag op "Soon" spans */
.is-soon[aria-disabled="true"]{
  pointer-events: none;
}

/* Badges: sidebar -> rechts uitlijnen, topnav -> kleine spacing */
.nav__item .badge,
.nav__groupSummary .badge{ margin-left: auto; }

.topnav__item .badge,
.topnav__subitem .badge{ margin-left: 6px; }

/* optioneel: icon iets stabieler (chip hoogte) */
.topnav .ico{ flex: 0 0 auto; }

/* backdrop-filter fallback */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .topbar, .topnav, .sidebar{
    background: rgba(0,0,0,.45);
  }
}

/* Hover transforms (only on hover devices) */
@media (hover:hover) and (pointer:fine){
  .topnav__item:hover,
  .topnav__subitem:hover{
    transform: translateY(-1px);
  }

  .nav__item:hover,
  .nav__groupSummary:hover{
    transform: translateY(-1px);
  }
}
@media (hover:none){
  .topnav__item:hover,
  .topnav__subitem:hover{
    transform: none;
  }
}

/* =======================================================================
   6) SIDEBAR (desktop navigation)
   - Mobile: hidden
   ======================================================================= */
.sidebar{
  display:none; /* mobile default */
}


/* =======================================================================
   10) DESKTOP ENHANCEMENTS
   ======================================================================= */
@media (min-width: 901px){

  :root{ --pad-x: 20px; }

  .app{ flex-direction: row; } /* desktop: sidebar + main */

  /* Desktop: topnav uit */
  .topnav{ display:none; }

  /* Desktop: sidebar aan */
  .sidebar{
    display:flex;
    width: var(--sidebar-w);
    padding: 14px 10px;
    border-right: 1px solid var(--border);
    background: rgba(10,10,12,.75);
    backdrop-filter: blur(14px);
    flex-direction:column;
    height:100vh;
    position: sticky;
    top: var(--safe-top);
    z-index: var(--z-sidebar);
    transition: width .22s ease;
    overflow: hidden;
  }

  /* collapsed */
  .sidebar[data-collapsed="1"]{
    width: var(--sidebar-w-collapsed);
    padding: 10px 6px;
  }

  /* hover-expand (via JS na vertraging) */
  .sidebar[data-collapsed="1"].is-hover-expanded{
    width: var(--sidebar-w);
    padding: 14px 10px;
    box-shadow: 4px 0 24px rgba(0,0,0,.45);
  }

  .nav{ flex:1; overflow: hidden; }
  .sidebar__footer{ margin-top:auto; }

  /* Brand row */
  .sidebar__brand{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap: 10px;
    padding: 4px 4px 12px 4px;
    min-height: 56px;
    flex-shrink: 0;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    overflow: hidden;
  }

  /* Logo: expanded */
  .brand__logo{ height: 42px; display:block; flex-shrink: 0; }
  .brand__icon{ width:36px; height:36px; display:none; flex: 0 0 auto; }

  /* collapsed: icon-only */
  .sidebar[data-collapsed="1"] .brand__icon{ display:block; }
  .sidebar[data-collapsed="1"] .brand__logo{ display:none; }
  .sidebar[data-collapsed="1"] .sidebar__brand{
    justify-content:center;
    padding: 4px 4px 12px 4px;
  }

  /* hover-expanded: terug naar volledig */
  .sidebar[data-collapsed="1"].is-hover-expanded .brand__icon{ display:none; }
  .sidebar[data-collapsed="1"].is-hover-expanded .brand__logo{ display:block; }
  .sidebar[data-collapsed="1"].is-hover-expanded .sidebar__brand{
    justify-content:flex-start;
    gap: 10px;
  }

  /* Nav list */
  .nav{
    display:flex;
    flex-direction:column;
    gap: 6px;
    padding: 4px 2px;
  }

  .nav__item{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    transition: background .12s ease, transform .06s ease, opacity .12s ease;
    white-space: nowrap;
    overflow: hidden;
  }
  .nav__item:hover{ background: rgba(255,255,255,.05); }
  .nav__item:active{ transform: translateY(0); }
  .nav__item.is-active{
    background: rgba(253,100,30,.12);
    border-left: 2px solid var(--accent);
    padding-left: 8px;
  }

  /* ── Per-module kleuridentiteit in sidebar ── */
  .nav__item[data-color="blue"].is-active   { background: rgba(59,130,246,.13);  border-left-color: var(--color-blue); }
  .nav__item[data-color="purple"].is-active { background: rgba(168,85,247,.13);  border-left-color: var(--color-purple); }
  .nav__item[data-color="green"].is-active  { background: rgba(34,197,94,.13);   border-left-color: var(--color-green); }
  .nav__item[data-color="yellow"].is-active { background: rgba(234,179,8,.13);   border-left-color: var(--color-yellow); }
  .nav__item[data-color="teal"].is-active   { background: rgba(20,184,166,.13);  border-left-color: var(--color-teal); }
  .nav__item[data-color="pink"].is-active   { background: rgba(236,72,153,.13);  border-left-color: var(--color-pink); }
  .nav__item[data-color="indigo"].is-active { background: rgba(99,102,241,.13);  border-left-color: var(--color-indigo); }

  /* Active icon neemt module-kleur over */
  .nav__item[data-color="blue"].is-active .nav__icon   { color: var(--color-blue); }
  .nav__item[data-color="purple"].is-active .nav__icon { color: var(--color-purple); }
  .nav__item[data-color="green"].is-active .nav__icon  { color: var(--color-green); }
  .nav__item[data-color="yellow"].is-active .nav__icon { color: var(--color-yellow); }
  .nav__item[data-color="teal"].is-active .nav__icon   { color: var(--color-teal); }
  .nav__item[data-color="pink"].is-active .nav__icon   { color: var(--color-pink); }
  .nav__item[data-color="indigo"].is-active .nav__icon { color: var(--color-indigo); }
  .nav__item[data-color="orange"].is-active .nav__icon { color: var(--accent); }

  /* locked (grayed but clickable) */
  .nav__item.is-locked,
  .nav__groupSummary.is-locked{
    opacity: .50;
    filter: saturate(.75);
  }

  .nav__icon{
    width:22px;
    height:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:.95;
    flex: 0 0 22px;
  }

  .nav__label{
    color: var(--muted);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.1;
    letter-spacing: .2px;
    min-width:0;
  }
  .nav__item.is-active .nav__label{ color: var(--text); }

  .nav__sectionTitle{
    margin: 10px 8px 6px 8px;
    font-size: var(--text-2xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(218,218,219,.55);
  }

  /* Details */
  .nav__group{ margin:0; padding:0; border:0; background:transparent; }
  .nav__group > summary{ list-style:none; }
  .nav__group > summary::-webkit-details-marker{ display:none; }
  .nav__group > summary::marker{ content:""; }

  .nav__groupSummary{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor:pointer;
    user-select:none;
    line-height: 1.1;
    transition: background .12s ease, transform .06s ease, opacity .12s ease;
  }
  .nav__groupSummary:hover{ background: rgba(255,255,255,.035); }
  .nav__groupSummary:active{ transform: translateY(0); }
  .nav__group[open] > .nav__groupSummary{ background: rgba(255,255,255,.025); }
  .nav__group.is-active > .nav__groupSummary{
    background: rgba(253,100,30,.10);
    color: var(--text);
  }

  .nav__chev{
    margin-left:auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(218,218,219,.55);
    border-bottom: 2px solid rgba(218,218,219,.55);
    transform: rotate(-45deg);
    transition: transform .15s ease;
    opacity: .9;
  }
  .nav__group[open] .nav__chev{ transform: rotate(45deg); }

  .nav__groupItems{
    margin: 6px 0 0 0;
    padding: 0 0 0 14px;
    display:flex;
    flex-direction:column;
    gap: 6px;
  }
  .nav__item--sub{ padding: 6px 10px; border-radius: 8px; }

  .nav__sub{
    margin: 4px 0 2px 0;
    padding: 0 0 0 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* footer */
  .sidebar__footer{
    padding: 14px 8px 8px 8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color: var(--muted);
  }

  /* collapsed: labels weg + tooltip */
  .sidebar[data-collapsed="1"] .nav__label,
  .sidebar[data-collapsed="1"] .nav__chev,
  .sidebar[data-collapsed="1"] .nav__groupItems,
  .sidebar[data-collapsed="1"] .nav__sub{
    display:none;
  }
  /* section label: ruimte bewaren, tekst verbergen */
  .sidebar[data-collapsed="1"] .nav__section-label{
    visibility: hidden;
    overflow: hidden;
  }

  .sidebar[data-collapsed="1"] .nav__item,
  .sidebar[data-collapsed="1"] .nav__groupSummary{
    position: relative;
  }

  /* Tooltip bij collapsed (niet bij hover-expanded) */
  .sidebar[data-collapsed="1"]:not(.is-hover-expanded) .nav__item::after,
  .sidebar[data-collapsed="1"]:not(.is-hover-expanded) .nav__groupSummary::after{
    content: attr(title);
    position:absolute;
    left: calc(var(--sidebar-w-collapsed) - 6px);
    top:50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(10px);
    color: var(--text);
    font-size: var(--text-xs);
    padding:6px 10px;
    border-radius:10px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: opacity .12s ease;
    z-index: 100;
  }
  .sidebar[data-collapsed="1"]:not(.is-hover-expanded) .nav__item:hover::after,
  .sidebar[data-collapsed="1"]:not(.is-hover-expanded) .nav__groupSummary:hover::after{
    opacity:1;
  }

  /* hover-expanded: alles terug naar normaal */
  .sidebar[data-collapsed="1"].is-hover-expanded .nav__label,
  .sidebar[data-collapsed="1"].is-hover-expanded .nav__chev{
    display:initial;
  }
  .sidebar[data-collapsed="1"].is-hover-expanded .nav__section-label{
    visibility: visible;
  }
  .sidebar[data-collapsed="1"].is-hover-expanded .nav__groupItems,
  .sidebar[data-collapsed="1"].is-hover-expanded .nav__sub{
    display:flex;
  }
  .sidebar[data-collapsed="1"].is-hover-expanded .nav__item,
  .sidebar[data-collapsed="1"].is-hover-expanded .nav__groupSummary{
    justify-content:flex-start;
    position: static;
  }

  /* desktop grid upgrades */
  .grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4{ grid-template-columns: repeat(var(--dashboard-cols), minmax(0, 1fr)); }
  .card--wide { grid-column: span 2; }
  .card--full { grid-column: 1 / -1; }

  /* ─── Card-dichtheid ────────────────────────────────────────────────────
     data-density op <body> stelt --dashboard-cols + padding/font-schaal in.
     ────────────────────────────────────────────────────────────────────── */
  body[data-density="3"] {
    --dashboard-cols: 3;
    --card-pad:       1.25rem;
    --card-gap:       1rem;
    --card-title:     var(--text-base);
    --card-desc:      var(--text-sm);
  }
  body[data-density="4"] {
    --dashboard-cols: 4;
    --card-pad:       1rem;
    --card-gap:       0.875rem;
    --card-title:     var(--text-sm);
    --card-desc:      var(--text-xs);
  }
  body[data-density="5"] {
    --dashboard-cols: 5;
    --card-pad:       0.875rem;
    --card-gap:       0.75rem;
    --card-title:     var(--text-xs);
    --card-desc:      var(--text-xs);
  }
  body[data-density="6"] {
    --dashboard-cols: 6;
    --card-pad:       0.75rem;
    --card-gap:       0.625rem;
    --card-title:     var(--text-xs);
    --card-desc:      var(--text-2xs);
  }

  /* Commands: rij-gebaseerde 1/4 + 3/4 layout */
  .cmd-page-rows{ display:flex; flex-direction:column; gap:24px; }
  .cmd-row{ display:grid; grid-template-columns:1fr 3fr; gap:14px; align-items:start; }
  .cmd-row + .cmd-row{ border-top:1px solid rgba(255,255,255,.07); padding-top:24px; }
  .cmd-row-card{ position:sticky; top:calc(var(--topbar-h) + var(--topnav-h) + 16px); }
  .cmd-row-card--form{ position:static; }
  .cmd-section-hdr{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .cmd-section-title{ font-size: var(--text-base); font-weight:700; margin:0; }
  .cmd-sidebar-stats{ padding-top:8px; padding-bottom:8px; }
  .cmd-stat{ display:inline-flex; align-items:baseline; gap:5px; margin-right:14px; }
  .cmd-stat__n{ font-size: var(--text-2xl); font-weight:700; line-height:1; }
  .cmd-stat__l{ font-size: var(--text-xs); color:var(--muted); }
  .cmd-add-form{ margin-bottom:14px; }
  .cmd-form-footer{ margin-top:8px; }
  .cmd-col-meta{ font-size: var(--text-xs); }
  .cmd-count-badge{ font-size: var(--text-xs); }
  .cmd-card-count{ font-size: var(--text-xs); margin-top:8px; margin-bottom:0; }

  /* hero desktop */
  .hero{ grid-template-columns: 1fr 1fr; }
  .hero__title{ font-size: var(--text-4xl); }

  /* landing page desktop */
  .lp-hero { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding-bottom: 56px; }
  .lp-hero__title { font-size: 2.375rem; }
  .lp-features { grid-template-columns: repeat(3, 1fr); }
  .lp-steps { flex-direction: row; align-items: stretch; }
  .lp-step { flex: 1; }
  .lp-step__arrow { display: block; padding-top: 28px; }
}