@import url("/assets/theseo-product-shell-j05.css");

/* Jarvis review j06: one visual family with TheSEO AI */
.jarvis-site-shell,
.jarvis-app-site {
  --ink: #e5edff;
  --mut: #94a3b8;
  --mut2: #64748b;
  --blue: #1652f0;
  --per: #6e79ff;
  --per2: #8b95ff;
  --cyan: #67e8f9;
  --paper: #050a16;
  --paper2: #070e1f;
  --line: rgba(139,149,255,.14);
  --hair: rgba(255,255,255,.08);
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(.16,1,.3,1);
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}

.jarvis-site-shell {
  --j-ink: #e5edff;
  --j-muted: #94a3b8;
  --j-soft: #070e1f;
  --j-panel: rgba(8,14,30,.46);
  --j-line: rgba(139,149,255,.14);
  --j-violet: #8b95ff;
  --j-violet-2: #aab3ff;
  --j-green: #86efac;
  --j-amber: #f4c978;
  --j-red: #fb7185;
  color: var(--ink);
  background: var(--paper);
}

.jarvis-site-shell .jarvis-v2bg,
.jarvis-app-site .jarvis-v2bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 22% -10%, #0a1430 0%, transparent 55%),
    linear-gradient(#050a16 0%, #060d1d 50%, #04070f 100%);
}

.jarvis-site-shell .jarvis-v2bg .grid,
.jarvis-app-site .jarvis-v2bg .grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(rgba(139,149,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,149,255,.05) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  mask-image: radial-gradient(140% 100% at 50% 0%, #000 30%, rgba(0,0,0,.35) 100%);
  -webkit-mask-image: radial-gradient(140% 100% at 50% 0%, #000 30%, rgba(0,0,0,.35) 100%);
  animation: jarvisGridIn 1.6s var(--ease) both;
}

.jarvis-site-shell .jarvis-v2bg .ruler,
.jarvis-app-site .jarvis-v2bg .ruler {
  position: absolute;
  inset: 0 auto 0 0;
  width: 18px;
  opacity: .35;
  background: repeating-linear-gradient(rgba(139,149,255,.24) 0 1px, transparent 1px 24px);
  animation: jarvisRulerIn 1.4s var(--ease) .25s both;
}

.jarvis-site-shell .jarvis-v2bg .glow,
.jarvis-app-site .jarvis-v2bg .glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(1400px,150vw);
  height: 800px;
  transform: translate(-52%,-56%);
  background: radial-gradient(50% 50%, rgba(70,110,255,.2), transparent 70%);
  animation: jarvisAiGlow 24s ease-in-out infinite;
}

.jarvis-site-shell .jarvis-v2bg .grain,
.jarvis-app-site .jarvis-v2bg .grain {
  opacity: .12;
}

.jarvis-site-shell .tech-scan,
.jarvis-site-shell .tech-link,
.jarvis-site-shell .tech-node,
.jarvis-site-shell .tech-code-stream,
.jarvis-app-site .tech-scan,
.jarvis-app-site .tech-link,
.jarvis-app-site .tech-node,
.jarvis-app-site .tech-code-stream {
  display: none;
}

@keyframes jarvisGridIn {
  from { opacity: 0; transform: scale(1.015); }
  to { opacity: 1; transform: none; }
}

@keyframes jarvisRulerIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: .35; transform: none; }
}

@keyframes jarvisAiGlow {
  0%,100% { opacity:.7; transform:translate(-56%,-58%) scale(1); }
  50% { opacity:1; transform:translate(-47%,-53%) scale(1.07); }
}

/* Header: same dark register shell as the AI family */
.jarvis-site-shell .v2hdr,
.jarvis-app-site .v2hdr {
  position: sticky;
  top: 0;
  z-index: 120;
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: none;
}

.jarvis-site-shell .v2hdr-in,
.jarvis-app-site .v2hdr-in {
  min-height: 92px;
  padding: 20px max(36px,env(safe-area-inset-right)) 18px max(36px,env(safe-area-inset-left));
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: auto;
  transition: background .6s var(--ease), border-color .6s var(--ease), backdrop-filter .6s var(--ease);
}

.jarvis-site-shell .v2hdr.isScrolled .v2hdr-in,
.jarvis-app-site .v2hdr.isScrolled .v2hdr-in {
  background: rgba(5,9,20,.72);
  border-bottom-color: var(--hair);
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

@media (max-width: 620px) {
  .jarvis-site-shell .v2hdr.isScrolled .v2hdr-in,
  .jarvis-app-site .v2hdr.isScrolled .v2hdr-in {
    background: #050914;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.jarvis-site-shell .v2hdr.is-open .v2hdr-in,
.jarvis-app-site .v2hdr.is-open .v2hdr-in {
  background: rgba(5,9,20,.94);
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
}

.jarvis-lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}

.jarvis-site-shell .v2logo,
.jarvis-app-site .v2logo {
  color: #fff;
  font-size: 1.7rem;
}

.jarvis-site-shell .v2logo .ann,
.jarvis-app-site .v2logo .ann {
  color: var(--mut2);
}

.jarvis-lockup-divider {
  width: 1px;
  height: 36px;
  background: var(--hair);
}

.jarvis-head-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.jarvis-head-brand img {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(139,149,255,.3);
  border-radius: 8px;
  box-shadow: 0 0 24px rgba(110,121,255,.16);
}

.jarvis-head-brand strong {
  color: #fff;
  font-size: .94rem;
  letter-spacing: -.02em;
}

.jarvis-head-brand small {
  color: var(--mut2);
  font: 500 .58rem/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.jarvis-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.jarvis-start-link {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(139,149,255,.26);
  border-radius: 2px;
  background: rgba(110,121,255,.08);
  color: #c7d2fe;
  box-shadow: none;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.jarvis-start-link:hover {
  transform: none;
  border-color: rgba(103,232,249,.45);
  background: rgba(103,232,249,.07);
  color: #fff;
  box-shadow: none;
}

.jarvis-site-shell .v2toggle,
.jarvis-app-site .v2toggle {
  color: #9aa6c6;
}

.jarvis-site-shell .v2toggle:hover,
.jarvis-app-site .v2toggle:hover {
  color: #fff;
}

.jarvis-site-shell .v2reg,
.jarvis-app-site .v2reg {
  background: rgba(5,9,20,.94);
  border-bottom-color: transparent;
}

.jarvis-site-shell .v2reg-grid,
.jarvis-app-site .v2reg-grid {
  grid-template-columns: 1.35fr 1fr;
  gap: 46px;
}

.jarvis-site-shell .v2reg-col--jarvis .v2reg-row,
.jarvis-app-site .v2reg-col--jarvis .v2reg-row {
  border-color: rgba(103,232,249,.12);
}

.jarvis-site-shell .v2reg-col--jarvis .v2reg-n,
.jarvis-app-site .v2reg-col--jarvis .v2reg-n {
  color: var(--cyan);
}

.jarvis-site-shell .v2reg-col--jarvis .v2reg-t,
.jarvis-app-site .v2reg-col--jarvis .v2reg-t {
  font-family: var(--mono);
  font-size: .98rem;
}

.jarvis-site-shell .v2reg-col--jarvis .v2reg-row:hover,
.jarvis-app-site .v2reg-col--jarvis .v2reg-row:hover {
  background: rgba(103,232,249,.05);
}

/* Product page composition */
.jarvis-site-shell > main,
.jarvis-site-shell > .j-release,
.jarvis-site-shell > .j-footer,
.jarvis-app-site > #root,
.jarvis-app-site > .v2foot {
  position: relative;
  z-index: 1;
}

.jarvis-site-shell .j-release {
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  background: rgba(5,9,20,.32);
  backdrop-filter: none;
}

.jarvis-site-shell .j-release .j-shell {
  min-height: 36px;
  color: var(--mut2);
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .035em;
}

.jarvis-site-shell .j-release b {
  color: var(--cyan);
  font-weight: 600;
}

.jarvis-site-shell .j-main {
  overflow: visible;
}

.jarvis-site-shell .j-shell {
  width: min(1180px,calc(100% - 48px));
}

.jarvis-site-shell .j-hero,
.jarvis-site-shell .j-page-hero {
  position: relative;
  color: var(--ink);
  text-align: left;
  background: transparent;
}

.jarvis-site-shell .j-hero {
  padding: 42px 0 72px;
}

.jarvis-site-shell .j-page-hero {
  padding: 54px 0 62px;
  border-bottom: 1px solid var(--hair);
}

.jarvis-site-shell .j-hero::after,
.jarvis-site-shell .j-page-hero::after,
.jarvis-site-shell .j-platform-frame::before {
  display: none;
}

.jarvis-site-shell .j-eyebrow,
.jarvis-site-shell .j-kicker,
.jarvis-site-shell .j-breadcrumb {
  color: var(--mut2);
  font: 500 11px/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.jarvis-site-shell .j-eyebrow {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.jarvis-site-shell .j-eyebrow::before {
  width: 5px;
  height: 5px;
  border-radius: 0;
  background: var(--cyan);
  box-shadow: none;
}

.jarvis-site-shell .j-breadcrumb {
  margin-bottom: 28px;
}

.jarvis-site-shell .j-breadcrumb a {
  color: #c7d2fe;
}

.jarvis-site-shell .j-hero h1,
.jarvis-site-shell .j-page-hero h1 {
  max-width: 1040px;
  margin: 30px 0 0;
  color: #f2f5ff;
  font-size: clamp(44px,7vw,92px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.05em;
  text-align: left;
  text-shadow: none;
  /* DE PAGINA SCHOOF ZIJWAARTS OP EEN TELEFOON, gezien 25-08 op 375 px.
     Een kop staat hier op 45 px, en een enkel lang woord is dan breder dan het
     scherm: op /jarvis/vertrouwen/productvoorwaarden/ was het woord
     productvoorwaarden 431 px in een vak van 339, waarmee de hele pagina 449 px
     werd en zichtbaar naar rechts wegliep. Zonder deze regel breekt zo'n woord
     nergens, want een spatie is de enige plek waar tekst standaard mag breken.
     break-word doet niets zolang een woord wel past, dus de andere 25
     Jarvis-paginas zijn nagemeten en veranderen geen pixel. Dit is dezelfde
     oplossing die .gah-hero .v2h1 op de dienstpaginas al gebruikt. */
  overflow-wrap: break-word;
}

.jarvis-site-shell .j-page-hero h1 {
  max-width: 980px;
  font-size: clamp(44px,6.3vw,82px);
}

.jarvis-site-shell .j-hero h1 em,
.jarvis-site-shell .j-page-hero h1 em,
.jarvis-site-shell .j-section h2 em,
.jarvis-site-shell .j-cta h2 em {
  color: #aeb9ff;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.jarvis-site-shell .j-hero .j-lead,
.jarvis-site-shell .j-page-hero .j-lead {
  max-width: 62ch;
  margin: 28px 0 0;
  color: var(--mut);
  font-size: 1.05rem;
  line-height: 1.7;
  text-align: left;
  text-wrap: pretty;
}

.jarvis-site-shell .j-actions {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 30px;
}

.jarvis-site-shell .j-button,
.jarvis-site-shell .j-nav-cta {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(139,149,255,.28);
  border-radius: 2px;
  background: rgba(110,121,255,.12);
  color: #eef2ff !important;
  box-shadow: none;
  font: 600 11px/1 var(--mono);
  letter-spacing: .035em;
}

.jarvis-site-shell .j-button:hover,
.jarvis-site-shell .j-nav-cta:hover {
  transform: none;
  border-color: rgba(103,232,249,.42);
  background: rgba(103,232,249,.08);
  box-shadow: none;
}

.jarvis-site-shell .j-button--ghost {
  border-color: var(--hair);
  background: rgba(5,10,22,.38);
  color: #cbd5e1 !important;
}

.jarvis-site-shell .j-proof {
  justify-content: flex-start;
  gap: 9px 24px;
  margin-top: 26px;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  color: var(--mut2);
  font: 500 10.5px/1.5 var(--mono);
  letter-spacing: .025em;
}

.jarvis-site-shell .j-proof span::before {
  content: ">";
  color: var(--cyan);
  margin-right: 7px;
}

.jarvis-site-shell .j-platform-frame,
.jarvis-site-shell .j-screen {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(103,232,249,.18);
  border-radius: 12px;
  background: #04080f;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  animation: none;
}

.jarvis-site-shell .j-platform-frame {
  width: min(1180px,100%);
  margin: 48px auto 0;
}

.jarvis-site-shell .j-platform-frame::after,
.jarvis-site-shell .j-screen::after {
  display: none;
}

.jarvis-site-shell .jarvis-frame-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(103,232,249,.12);
  background: rgba(103,232,249,.05);
}

.jarvis-site-shell .jarvis-frame-bar i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #233047;
}

.jarvis-site-shell .jarvis-frame-bar i:nth-child(2) { background:#27364e; }
.jarvis-site-shell .jarvis-frame-bar i:nth-child(3) { background:#1f2b40; }

.jarvis-site-shell .jarvis-frame-bar span {
  margin-left: 8px;
  color: var(--mut2);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .04em;
}

.jarvis-site-shell .j-platform-frame img,
.jarvis-site-shell .j-screen img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
}

.jarvis-site-shell .j-platform-note {
  right: 14px;
  bottom: 14px;
  padding: 7px 10px;
  border: 1px solid rgba(139,149,255,.18);
  border-radius: 2px;
  background: rgba(4,8,15,.88);
  color: var(--mut);
  box-shadow: none;
  font: 500 9.5px/1.4 var(--mono);
}

.jarvis-site-shell .j-section {
  width: min(1180px,calc(100% - 48px));
  margin: 0 auto;
  padding: 138px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.jarvis-site-shell .j-section:nth-of-type(even) {
  background: transparent;
}

.jarvis-site-shell .j-section > .j-shell {
  width: 100%;
}

.jarvis-site-shell .j-section-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(280px,430px);
  gap: 50px;
  align-items: end;
  margin-bottom: 42px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}

.jarvis-site-shell .j-section h2,
.jarvis-site-shell .j-prose h2,
.jarvis-site-shell .j-cta h2 {
  color: #f2f5ff;
  text-shadow: none;
}

.jarvis-site-shell .j-section h2 {
  max-width: 760px;
  margin: 11px 0 0;
  font-size: clamp(2rem,4.2vw,4rem);
  line-height: 1.02;
  letter-spacing: -.05em;
}

.jarvis-site-shell .j-section-head p,
.jarvis-site-shell .j-copy,
.jarvis-site-shell .j-split-copy p,
.jarvis-site-shell .j-cta p,
.jarvis-site-shell .j-prose p,
.jarvis-site-shell .j-prose li {
  color: var(--mut);
}

/* LEESBREEDTE VAN DE LOPENDE TEKST, gevonden 25-08 op de brede maten.
   Veertien vertrouwens- en kennispagina's zetten hun tekst in .j-prose, en
   die staat in de roosterkolom van .j-shell.j-detail: 753 px, ongeveer 90
   tekens op een regel. Vier pagina's doen dat niet en zetten hun tekst als
   .j-copy rechtstreeks in .j-shell. Die had geen bovengrens en liep dus mee
   met de schil: 1180 px, ongeveer 157 tekens per regel, op laptop zo goed
   als op tv. Naast elkaar gelegd leest offboarding als een andere pagina dan
   sla, terwijl het dezelfde reeks is.
   760 px is hier niet verzonnen maar de maat die het ontwerp zelf al
   aanhoudt: .jarvis-site-shell .j-section h2 hierboven staat op max-width
   760px, en .j-prose komt uit op 753. Alleen een bovengrens, dus op smalle
   schermen verandert er niets; daar is de schil zelf al smaller.
   Raakt /jarvis/vertrouwen/{offboarding,onboarding,wijzigingen,bewijsdossier}
   en hun vier Engelse tegenhangers onder /en/jarvis/trust/. */
.jarvis-site-shell .j-copy,
.jarvis-site-shell .j-callout {
  max-width: 760px;
}

.jarvis-site-shell .j-grid-3 {
  gap: 16px;
}

.jarvis-site-shell .j-card,
.jarvis-site-shell .j-plan,
.jarvis-site-shell .j-aside {
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(8,14,30,.45);
  box-shadow: none;
}

.jarvis-site-shell .j-card {
  padding: 22px;
}

.jarvis-site-shell .j-card-number {
  width: auto;
  height: auto;
  display: block;
  margin-bottom: 48px;
  border-radius: 0;
  background: transparent;
  color: var(--per2);
  font: 600 11px/1 var(--mono);
}

.jarvis-site-shell .j-card h3,
.jarvis-site-shell .j-step h3,
.jarvis-site-shell .j-aside h3,
.jarvis-site-shell .j-plan h2 {
  color: #fff;
}

.jarvis-site-shell .j-card p,
.jarvis-site-shell .j-step p,
.jarvis-site-shell .j-plan p,
.jarvis-site-shell .j-plan li,
.jarvis-site-shell .j-table td {
  color: var(--mut);
}

.jarvis-site-shell .j-status {
  color: var(--mut2);
  font-family: var(--mono);
}

.jarvis-site-shell .j-status::before {
  border-radius: 0;
}

.jarvis-site-shell .j-steps {
  border-color: var(--line);
  border-radius: 0;
  background: rgba(8,14,30,.45);
}

.jarvis-site-shell .j-step {
  border-color: var(--line);
}

.jarvis-site-shell .j-step b {
  color: var(--cyan);
  font-family: var(--mono);
}

.jarvis-site-shell .j-split {
  gap: 38px;
}

.jarvis-site-shell .j-split-copy {
  padding: 16px 0;
}

.jarvis-site-shell .j-cta {
  padding: 42px;
  border: 1px solid rgba(103,232,249,.18);
  border-radius: 0;
  background: rgba(8,14,30,.45);
  box-shadow: none;
}

.jarvis-site-shell .j-detail {
  gap: 64px;
}

.jarvis-site-shell .j-prose h3 {
  color: #f2f5ff;
}

.jarvis-site-shell .j-prose a,
.jarvis-site-shell .j-aside a::after {
  color: var(--cyan);
}

.jarvis-site-shell .j-aside {
  top: 112px;
}

.jarvis-site-shell .j-aside a {
  border-color: var(--hair);
  color: #cbd5e1;
}

.jarvis-site-shell .j-callout {
  border-left-color: var(--cyan);
  border-radius: 0;
  background: rgba(103,232,249,.06);
  color: #cbd5e1;
}

.jarvis-site-shell .j-pricing {
  gap: 16px;
}

.jarvis-site-shell .j-plan {
  min-height: 500px;
}

.jarvis-site-shell .j-plan.is-featured {
  border: 1px solid rgba(103,232,249,.5);
  box-shadow: none;
}

.jarvis-site-shell .j-plan-tag,
.jarvis-site-shell .j-price b {
  color: #fff;
}

.jarvis-site-shell .j-price span {
  color: var(--mut2);
}

.jarvis-site-shell .j-plan ul,
.jarvis-site-shell .j-docs,
.jarvis-site-shell .j-doc-row,
.jarvis-site-shell .j-table th,
.jarvis-site-shell .j-table td {
  border-color: var(--hair);
}

.jarvis-site-shell .j-plan li::before {
  content: ">";
  color: var(--cyan);
}

.jarvis-site-shell .j-segment button {
  border-color: var(--line);
  border-radius: 0;
  background: rgba(8,14,30,.45);
  color: var(--mut);
}

.jarvis-site-shell .j-segment button[aria-pressed="true"] {
  border-color: rgba(103,232,249,.45);
  background: rgba(103,232,249,.08);
  color: var(--cyan);
}

.jarvis-site-shell .j-doc-row:hover {
  background: rgba(103,232,249,.035);
}

.jarvis-site-shell .j-doc-id,
.jarvis-site-shell .j-doc-format {
  color: var(--mut2);
}

.jarvis-site-shell .j-doc-title,
.jarvis-site-shell .j-table td:first-child {
  color: #fff;
}

.jarvis-site-shell .j-table {
  border-color: var(--line);
  background: rgba(8,14,30,.45);
}

.jarvis-site-shell .j-table th {
  color: var(--mut2);
}

.jarvis-site-shell .j-footer,
.jarvis-app-site .v2foot {
  margin-top: 118px;
  border-top: 1px solid var(--hair);
  background: rgba(4,8,17,.62);
  color: var(--mut);
  backdrop-filter: blur(14px);
}

.jarvis-site-shell .j-footer-grid {
  padding-top: 48px;
}

.jarvis-site-shell .j-footer h3,
.jarvis-site-shell .j-footer p,
.jarvis-site-shell .j-footer a,
.jarvis-site-shell .j-footer-bottom {
  color: var(--mut2);
}

.jarvis-site-shell .j-footer a:hover {
  color: #fff;
}

.jarvis-site-shell .j-footer-bottom {
  border-color: var(--hair);
}

.jarvis-footer-lockup .v2logo,
.jarvis-footer-lockup > strong {
  color: #fff;
}

/* The real platform stays a product interface inside the AI-family shell */
.jarvis-app-site #root {
  --canvas: #f8f8ff;
  --surface: rgba(255,255,255,.84);
  --surface-strong: #fff;
  --ink: #17162c;
  --muted: #77778e;
  --muted-2: #9999ad;
  --line: #e5e5f2;
  --line-strong: #d9d8ea;
  min-height: calc(100vh - 92px);
  color: #17162c;
}

.jarvis-app-site .app-shell,
.jarvis-app-site .workspace {
  min-height: calc(100vh - 92px);
}

.jarvis-app-site .sidebar {
  top: 92px;
  height: calc(100vh - 92px);
}

.jarvis-app-site .mobile-header,
.jarvis-app-site .sidebar-backdrop {
  top: 92px;
}

@media (max-width: 920px) {
  .jarvis-site-shell .v2reg-grid,
  .jarvis-app-site .v2reg-grid,
  .jarvis-site-shell .j-section-head,
  .jarvis-site-shell .j-detail {
    grid-template-columns: 1fr;
  }

  .jarvis-site-shell .v2reg-grid,
  .jarvis-app-site .v2reg-grid {
    gap: 30px;
  }
}

@media (max-width: 640px) {
  .jarvis-site-shell .v2hdr-in,
  .jarvis-app-site .v2hdr-in {
    min-height: 92px;
    padding: 13px 18px;
    gap: 8px;
  }

  .jarvis-lockup {
    gap: 9px;
  }

  .jarvis-lockup-divider {
    display: block;
    height: 30px;
  }

  .jarvis-site-shell .v2logo,
  .jarvis-app-site .v2logo {
    font-size: 1.48rem;
  }

  .jarvis-site-shell .v2logo .ann,
  .jarvis-app-site .v2logo .ann {
    display: block;
    max-width: 112px;
    font-size: 8px;
    line-height: 1.2;
  }

  .jarvis-head-brand img {
    width: 29px;
    height: 29px;
    border-radius: 6px;
  }

  .jarvis-head-brand strong {
    font-size: .78rem;
  }

  .jarvis-head-brand small {
    display: none;
  }

  .jarvis-header-actions {
    gap: 10px;
  }

  .jarvis-start-link {
    min-height: 32px;
    padding: 0 9px;
    font-size: 9px;
  }

  .jarvis-site-shell .v2toggle,
  .jarvis-app-site .v2toggle {
    gap: 7px;
    font-size: 9.5px;
  }

  .jarvis-site-shell .j-shell,
  .jarvis-site-shell .j-section {
    width: calc(100% - 36px);
  }

  .jarvis-site-shell .j-release .j-shell {
    display: block;
    min-height: 0;
    padding-block: 10px;
    line-height: 1.55;
  }

  .jarvis-site-shell .j-release b {
    display: block;
    margin-bottom: 3px;
  }

  .jarvis-site-shell .j-hero {
    padding: 22px 0 58px;
  }

  .jarvis-site-shell .j-page-hero {
    padding: 34px 0 48px;
  }

  .jarvis-site-shell .j-hero h1,
  .jarvis-site-shell .j-page-hero h1 {
    margin-top: 27px;
    font-size: clamp(40px,12vw,58px);
    line-height: 1.02;
  }

  .jarvis-site-shell .j-hero .j-lead,
  .jarvis-site-shell .j-page-hero .j-lead {
    font-size: 1rem;
  }

  .jarvis-site-shell .j-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .jarvis-site-shell .j-button {
    width: 100%;
  }

  .jarvis-site-shell .j-proof {
    display: grid;
    grid-template-columns: 1fr;
  }

  .jarvis-site-shell .j-platform-frame {
    margin-top: 40px;
    border-radius: 9px;
  }

  .jarvis-site-shell .jarvis-frame-bar {
    min-height: 36px;
    padding: 8px 11px;
  }

  .jarvis-site-shell .jarvis-frame-bar span {
    font-size: 8.5px;
  }

  .jarvis-site-shell .j-section {
    padding: 94px 0 8px;
  }

  .jarvis-site-shell .j-section-head {
    gap: 18px;
    margin-bottom: 28px;
  }

  .jarvis-site-shell .j-grid-3 {
    grid-template-columns: 1fr;
  }

  .jarvis-site-shell .j-card-number {
    margin-bottom: 34px;
  }

  .jarvis-site-shell .j-cta {
    padding: 26px;
  }

  .jarvis-app-site #root,
  .jarvis-app-site .app-shell,
  .jarvis-app-site .workspace {
    min-height: calc(100vh - 92px);
  }

  .jarvis-app-site .sidebar {
    top: 92px;
    height: calc(100vh - 92px);
  }

  .jarvis-app-site .mobile-header,
  .jarvis-app-site .sidebar-backdrop {
    top: 92px;
  }
}

@media (max-width: 430px) {
  .jarvis-lockup-divider {
    display: none;
  }

  .jarvis-site-shell .v2logo .ann,
  .jarvis-app-site .v2logo .ann {
    display: block;
    max-width: 88px;
    font-size: 6.8px;
    line-height: 1.25;
    letter-spacing: .1em;
    white-space: normal;
  }

  .jarvis-head-brand img {
    width: 27px;
    height: 27px;
  }

  .jarvis-header-actions {
    gap: 8px;
  }

  .jarvis-start-link {
    padding-inline: 8px;
  }

  /* DE KOPBALK LIEP OVER ZICHZELF HEEN, gezien 25-08 op 375 px.
     Op /jarvis/kennis/ en /jarvis/documentatie/ staat naast de knoppen ook de
     taalwisselaar in de kop. Samen met het merkblok is dat breder dan 375 px.
     Omdat .v2hdr-in nowrap was en .jarvis-lockup min-width 0 had, werd het
     merkblok kleiner geperst dan zijn inhoud: het woord Jarvis schoof onder de
     knop Starten, 26 px overlap. Twee losse woorden over elkaar heen.

     min-width max-content laat het merkblok zijn eigen breedte houden, en
     flex-wrap laat de knoppen dan naar een tweede regel zakken in plaats van
     eroverheen. Alleen wanneer het nodig is: op /jarvis/app/, zonder
     taalwisselaar, past alles nog op een regel en blijft de kop 92 px. */
  .jarvis-site-shell .v2hdr-in,
  .jarvis-app-site .v2hdr-in {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .jarvis-lockup {
    min-width: max-content;
  }
}

/* HET MERKBLOK WAS 27 PX HOOG, gemeten op 375 px, en dat is te weinig voor een
   duim. De indexknop en de links in de voettekst leken ook te klein, maar die
   krijgen in v2.css onder (pointer: coarse) al een onzichtbaar raakvlak van 15
   px rondom en meten in werkelijkheid 45 tot 56 px. Een meetscript dat naar de
   zichtbare doos kijkt ziet dat vlak niet en meldt ze onterecht. Alleen het
   merkblok staat niet in die regel, dus alleen dat krijgt hier hoogte.

   BIJGESTELD 25-08. Het onzichtbare raakvlak in v2.css is daar vervangen door
   echte voering, precies omdat een raakvlak dat je niet kunt meten elke ronde
   opnieuw als fout wordt opgeschreven. Zie de toelichting bij punt e in v2.css. */
@media (max-width: 900px) {
  .jarvis-site-shell .jarvis-head-brand,
  .jarvis-app-site .jarvis-head-brand {
    min-height: 32px;
  }
}

/* DE KNOP STARTEN STOND OP 32 PX. Dat haalt de ondergrens net, maar hij staat
   op 375 px in dezelfde rij als de indexknop en de taalknop, en die staan sinds
   25-08 allebei op 45. Een rij van 45, 45 en 32 leest als een fout, dus gaat
   deze mee. Voering, geen groter lettertype: 10,5 px letters blijven 10,5 px,
   en de knop groeit van 32 naar 45. De rand en de kleuren blijven. */
@media (pointer: coarse), (max-width: 560px) {
  .jarvis-site-shell .jarvis-start-link,
  .jarvis-app-site .jarvis-start-link {
    padding-block: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jarvis-site-shell .jarvis-v2bg *,
  .jarvis-app-site .jarvis-v2bg * {
    animation: none !important;
  }
}

/* DE VOETREGEL "theseo × Jarvis" OP DE GRONDLIJN, 18-09-2026. Gianluca op de telefoon: "jarvis x theseo is niet mooi
   uitgelijnd, moet van onder perfect zijn uitgelijnd". De regel stond op align-items: center, en met drie
   verschillende lettergroottes (het merk 1,35 rem, het kruisje 1 rem, Jarvis 1,15 rem) liggen de grondlijnen dan
   tot 7 px uit elkaar. Op de grondlijn staan de drie woorden van onder gelijk, welke letterhoogte ze ook hebben. */
.jarvis-site-shell .jarvis-footer-lockup, .jarvis-footer-lockup { align-items: baseline; }